Commit 654617e0 authored by Carl Schwan's avatar Carl Schwan 🚴
Browse files

Update

parent add37fce
......@@ -7,7 +7,7 @@ Introduction
------------
This is a list of common things you should check for to have great
`accessibility <index>`{.interpreted-text role="doc"} for your
`accessibility <index>` for your
application or widgets.
Keyboard Navigation
......@@ -72,7 +72,7 @@ Graphical Elements
GUI elements.
- An option to hide non-essential graphics is provided.
See `units </layout/units>`{.interpreted-text role="doc"} for more
See `units </layout/units>` for more
information on how to use KDE\'s base units to avoid hardcoded size
values.
......@@ -99,9 +99,9 @@ Fonts and Text
- An alternative to WYSIWYG is provided. For example, the ability to
specify different screen and printer fonts in a text editor.
See `typography </style/typography>`{.interpreted-text role="doc"} for
See `typography </style/typography>` for
more information on how to avoid hardcoded font sizes and
`labels </style/writing/labels>`{.interpreted-text role="doc"} for more
`labels </style/writing/labels>` for more
details about labels.
### Testing
......
......@@ -17,23 +17,23 @@ groups:
Formating
---------
- `formating/groupbox`{.interpreted-text role="doc"}
- `formating/splitter`{.interpreted-text role="doc"}
- `formating/groupbox`
- `formating/splitter`
Navigation
----------
- `navigation/actionbutton`{.interpreted-text role="doc"}
- `navigation/commandlink`{.interpreted-text role="doc"}
- `navigation/contextdrawer`{.interpreted-text role="doc"}
- `navigation/contextmenu`{.interpreted-text role="doc"}
- `navigation/dialog`{.interpreted-text role="doc"}
- `navigation/globaldrawer`{.interpreted-text role="doc"}
- `navigation/menubar`{.interpreted-text role="doc"}
- `navigation/pushbutton`{.interpreted-text role="doc"}
- `navigation/tab`{.interpreted-text role="doc"}
- `navigation/toolbar`{.interpreted-text role="doc"}
- `navigation/scrim`{.interpreted-text role="doc"}
- `navigation/actionbutton`
- `navigation/commandlink`
- `navigation/contextdrawer`
- `navigation/contextmenu`
- `navigation/dialog`
- `navigation/globaldrawer`
- `navigation/menubar`
- `navigation/pushbutton`
- `navigation/tab`
- `navigation/toolbar`
- `navigation/scrim`
User Assistance
---------------
......@@ -45,15 +45,15 @@ alerts.
### Notification
- `assistance/emblem`{.interpreted-text role="doc"}
- `assistance/inline`{.interpreted-text role="doc"}
- `assistance/message`{.interpreted-text role="doc"}
- `assistance/progress`{.interpreted-text role="doc"}
- `assistance/statusbar`{.interpreted-text role="doc"}
- `assistance/emblem`
- `assistance/inline`
- `assistance/message`
- `assistance/progress`
- `assistance/statusbar`
### Help
- `assistance/tooltip`{.interpreted-text role="doc"}
- `assistance/tooltip`
Editing and Manipulation
------------------------
......@@ -63,24 +63,24 @@ persistent changes to user's stored information.
### Selection
- `editing/card`{.interpreted-text role="doc"}
- `editing/checkbox`{.interpreted-text role="doc"}
- `editing/combobox`{.interpreted-text role="doc"}
- `editing/dropdown`{.interpreted-text role="doc"}
- `editing/grid`{.interpreted-text role="doc"}
- `editing/list`{.interpreted-text role="doc"}
- `editing/radiobutton`{.interpreted-text role="doc"}
- `editing/togglebutton`{.interpreted-text role="doc"}
- `editing/tree`{.interpreted-text role="doc"}
- `editing/card`
- `editing/checkbox`
- `editing/combobox`
- `editing/dropdown`
- `editing/grid`
- `editing/list`
- `editing/radiobutton`
- `editing/togglebutton`
- `editing/tree`
### Unconstrained Input
- `editing/lineedit`{.interpreted-text role="doc"}
- `editing/tableview`{.interpreted-text role="doc"}
- `editing/textedit`{.interpreted-text role="doc"}
- `editing/lineedit`
- `editing/tableview`
- `editing/textedit`
### Constrained Input
- `editing/date`{.interpreted-text role="doc"}
- `editing/slider`{.interpreted-text role="doc"}
- `editing/spinbox`{.interpreted-text role="doc"}
- `editing/date`
- `editing/slider`
- `editing/spinbox`
......@@ -54,4 +54,4 @@ light-colored number inside a blue circle. The circle can become
number](/hig/emblem-notification-large.png)
For symbolic icon emblems, see
`/style/icons/monochrome/emblem`{.interpreted-text role="doc"}.
`/style/icons/monochrome/emblem`.
......@@ -17,16 +17,16 @@ alerts.
### Notification
- `emblem`{.interpreted-text role="doc"}
- `inline`{.interpreted-text role="doc"}
- `message`{.interpreted-text role="doc"}
- `progress`{.interpreted-text role="doc"}
- `statusbar`{.interpreted-text role="doc"}
- `emblem`
- `inline`
- `message`
- `progress`
- `statusbar`
### Help
- `tooltip`{.interpreted-text role="doc"}
- `tooltip`
### Information
- `aboutview`{.interpreted-text role="doc"}
- `aboutview`
......@@ -115,7 +115,7 @@ Appearance
A basic inline messages consists of an icon and text. It can contain an
optional close button and
`buttons <../navigation/pushbutton>`{.interpreted-text role="doc"}.
`buttons <../navigation/pushbutton>`.
![Inline message with a custom icon and a close
button.](/hig/Message1.png)
......
......@@ -27,7 +27,7 @@ Guidelines
be the primary objective.
- Modal message dialogs must offer choices regarding how to proceed;
don't use them dialogs simply to inform or warn the user. Instead,
use an `inline message <inline>`{.interpreted-text role="doc"}.
use an `inline message <inline>`.
### Behavior
......@@ -57,4 +57,4 @@ Guidelines
read the message text. Never use \"Yes\" and \"No\" as button
titles.
- Follow the general guidelines for
`dialogs <../navigation/dialog>`{.interpreted-text role="doc"}.
`dialogs <../navigation/dialog>`.
......@@ -39,5 +39,5 @@ Guidelines
bar.
- Don\'t use the status bar or any kind of replacement to display
advisory messages in place of standard
`tooltips <tooltip>`{.interpreted-text role="doc"}.
`tooltips <tooltip>`.
- Keep the status information plain; e.g. don\'t add icons.
......@@ -19,8 +19,8 @@ Guidelines
- Use checkboxes for non-exclusive options that have clear
alternatives. Mutually exclusive options should use a set of
`radio buttons <radiobutton>`{.interpreted-text role="doc"} or a
`combo box <combobox>`{.interpreted-text role="doc"}.
`radio buttons <radiobutton>` or a
`combo box <combobox>`.
::: {.container .flex}
::: {.container}
......@@ -37,7 +37,7 @@ remove the need to guess.](/hig/Ambiguous_Opposite_Good.qml.png){.border
:::
- For more than five options, use either a
`list view <list>`{.interpreted-text role="doc"} or the
`list view <list>` or the
`dual-list pattern </patterns/content/duallist>`{.interpreted-text
role="doc"} in case of multiple selections.
- Don\'t use the selection to perform commands.
......@@ -50,7 +50,7 @@ perform commands.](/hig/No_Command_2_Bad.qml.png){.border .dont}
::: {.container}
![`Do.`{.interpreted-text role="noblefir"} Consider using a
`push button <../navigation/pushbutton>`{.interpreted-text role="doc"}
`push button <../navigation/pushbutton>`
instead.](/hig/No_Command_2_Good.qml.png){.border .do}
:::
:::
......
......@@ -4,7 +4,7 @@ title: Combo Box
=========
![A combination of a drop-down list and an edit
control.](/hig/Combobox1.png){.border}
control.](/hig/Combobox1.png)
Purpose
-------
......@@ -37,11 +37,11 @@ Guidelines
- Use a combo box for single selection of one out of many items of
lists that can be extended by the user. Prefer a simple
`drop-down list <dropdown>`{.interpreted-text role="doc"} in case of
`drop-down list <dropdown>` in case of
read-only interaction.
- Consider to replace the combo box by a
`list view <list>`{.interpreted-text role="doc"} with a connected
`line edit control <lineedit>`{.interpreted-text role="doc"}.
`list view <list>` with a connected
`line edit control <lineedit>`.
### Behavior
......@@ -73,7 +73,7 @@ Guidelines
certain item is selected (i.e. they are dependent controls), disable
them instead of hiding.
- Label the combo box with a descriptive caption to the left (cf.
`alignment </layout/alignment>`{.interpreted-text role="doc"}).
`alignment </layout/alignment>`).
- Create a buddy relation so access keys are assigned.
- End each label with a colon.
- Use
......
......@@ -8,7 +8,7 @@ Purpose
The date/time picker is a control that provides a convenient way to
select a certain date or time. The time picker works just like a
`spin box <spinbox>`{.interpreted-text role="doc"} with an adopted mask.
`spin box <spinbox>` with an adopted mask.
The date picker shows all days of a month in weekly columns, has small
navigation buttons to access previous and next month or years as well as
interactive controls to chose month and year directly. The user
......
......@@ -4,7 +4,7 @@ title: Drop-Down
=========
![Control which allows the user to choose one value from a
list.](/hig/Dropdown1.png){.border}
list.](/hig/Dropdown1.png)
Purpose
-------
......@@ -37,11 +37,11 @@ Guidelines
- Use a drop-down list for single selection of one out of many items.
If users should be able to add items use a
`combo box <combobox>`{.interpreted-text role="doc"}.
`combo box <combobox>`.
- For only a few options, consider to use a set of
`radio buttons <radiobutton>`{.interpreted-text role="doc"}.
`radio buttons <radiobutton>`.
- For a single selection out of a large number of items (n\>20), use a
`list view <list>`{.interpreted-text role="doc"}.
`list view <list>`.
- Prefer controls that show the options without further user
interaction, except for the following cases:
- the list of options may change over time,
......@@ -77,7 +77,7 @@ Guidelines
certain item is selected (i.e. they are dependent controls), disable
them instead of hiding.
- Label the drop down with a descriptive caption to the left (cf.
`alignment </layout/alignment>`{.interpreted-text role="doc"}).
`alignment </layout/alignment>`).
- Create a buddy relation so access keys are assigned.
- End each label with a colon.
- Use
......
......@@ -14,7 +14,7 @@ Guidelines
### Is this the right control?
Like `lists <list>`{.interpreted-text role="doc"}, Grids are used to
Like `lists <list>`, Grids are used to
display a sorted or unsorted set of items. All items should be of the
same kind.
......@@ -40,7 +40,7 @@ playsinline="true" width="536" onended="this.play()" class="border"></video>
Attention
:::
For `accessibility </accessibility/index>`{.interpreted-text role="doc"}
For `accessibility </accessibility/index>`
make sure to test keyboard navigation with the grid.
:::
......@@ -76,12 +76,12 @@ re-ordering via drag-and-drop.
#### Cards
See `cards <card>`{.interpreted-text role="doc"} for more information on
See `cards <card>` for more information on
how to use cards in a grid view.
#### KCM
Use the `KCMGrid </platform/kcmgrid>`{.interpreted-text role="doc"} for
Use the `KCMGrid </platform/kcmgrid>` for
grids in KCMs.
Code
......
......@@ -17,26 +17,26 @@ operation; and they typically require validation of the input data.
Selection
---------
- `card`{.interpreted-text role="doc"}
- `checkbox`{.interpreted-text role="doc"}
- `combobox`{.interpreted-text role="doc"}
- `dropdown`{.interpreted-text role="doc"}
- `grid`{.interpreted-text role="doc"}
- `list`{.interpreted-text role="doc"}
- `radiobutton`{.interpreted-text role="doc"}
- `togglebutton`{.interpreted-text role="doc"}
- `tree`{.interpreted-text role="doc"}
- `card`
- `checkbox`
- `combobox`
- `dropdown`
- `grid`
- `list`
- `radiobutton`
- `togglebutton`
- `tree`
Unconstrained Input
-------------------
- `lineedit`{.interpreted-text role="doc"}
- `tableview`{.interpreted-text role="doc"}
- `textedit`{.interpreted-text role="doc"}
- `lineedit`
- `tableview`
- `textedit`
Constrained Input
-----------------
- `date`{.interpreted-text role="doc"}
- `slider`{.interpreted-text role="doc"}
- `spinbox`{.interpreted-text role="doc"}
- `date`
- `slider`
- `spinbox`
......@@ -4,7 +4,7 @@ title: Line Edit
=========
![Single line control to enter unconstrained
text.](/hig/Lineedit1.png){.border}
text.](/hig/Lineedit1.png)
Purpose
-------
......@@ -22,7 +22,7 @@ Guidelines
- Use edits for input of single lines of unconstrained text.
- In case of multiple lines of text or more than a few words, use a
`text edit <textedit>`{.interpreted-text role="doc"}
`text edit <textedit>`
- Don\'t use a line edit if only a specific type of data is valid. Use
a control for constrained input.
......@@ -53,5 +53,5 @@ Guidelines
- When disabling the line edit, also disable any associated labels and
buttons.
- Label every line edit with a descriptive caption to the left (cf.
`/layout/alignment`{.interpreted-text role="doc"}).
`/layout/alignment`).
- Create a buddy relation so access keys are assigned.
......@@ -147,7 +147,7 @@ list you can add aditional up and down buttons.
- Disable controls in a dialog if not in use rather than hide, or
remove them from the list (i.e. they are dependent controls),
- Label the list view with a descriptive caption to the top left (cf.
`alignment </layout/alignment>`{.interpreted-text role="doc"}).
`alignment </layout/alignment>`).
- Create a buddy relation so access keys are assigned.
- End each label with a colon. \":\"
- Use
......@@ -156,23 +156,23 @@ list you can add aditional up and down buttons.
- You can use alternate row colors (use theme settings).
For section headers use
`120% font size </style/typography>`{.interpreted-text role="doc"} and
`120% font size </style/typography>` and
the `alternate background color </style/color/index>`{.interpreted-text
role="doc"}. Don\'t place a border below the section header.
::: {.container .flex}
::: {.container}
![Section header on desktop](/hig/Listview8.png){.border}
![Section header on desktop](/hig/Listview8.png)
:::
::: {.container}
![Section header on mobile](/hig/Listview9.png){.border}
![Section header on mobile](/hig/Listview9.png)
:::
:::
#### Desktop
![List items with and without icons](/hig/Listview6.png){.border}
![List items with and without icons](/hig/Listview6.png)
List items can have a lot of different styles and sizes, but should
always be coherent in a list.
......@@ -180,21 +180,21 @@ always be coherent in a list.
::: {.container .flex}
::: {.container}
![Default padding of a SwipeListItem on
desktop](/hig/Listview3.png){.border}
desktop](/hig/Listview3.png)
Items have a padding of
`Units.smallSpacing </layout/units>`{.interpreted-text role="doc"} on
`Units.smallSpacing </layout/units>` on
the top and bottom and a padding of
`2 * Units.smallSpacing </layout/units>`{.interpreted-text role="doc"}
`2 * Units.smallSpacing </layout/units>`
on the left.
:::
::: {.container}
![Label is vertically centered](/hig/Listview4.png){.border}
![Label is vertically centered](/hig/Listview4.png)
Labels are vertically centered within the list item. If the list item
includes an icon, add a
`2 * Units.smallSpacing </layout/units>`{.interpreted-text role="doc"}
`2 * Units.smallSpacing </layout/units>`
margin between the icon and the label.
:::
:::
......@@ -204,21 +204,21 @@ margin between the icon and the label.
::: {.container .flex}
::: {.container}
![Default padding of a SwipeListItem on
mobile](/hig/Listview1.png){.border}
mobile](/hig/Listview1.png)
Items have a padding of
`Units.largeSpacing </layout/units>`{.interpreted-text role="doc"} on
`Units.largeSpacing </layout/units>` on
the top and bottom and a padding of
`2 * Units.largeSpacing </layout/units>`{.interpreted-text role="doc"}
`2 * Units.largeSpacing </layout/units>`
on the left.
:::
::: {.container}
![Label is vertically centered](/hig/Listview2.png){.border}
![Label is vertically centered](/hig/Listview2.png)
Labels are vertically centered within the list item. If the list item
includes an icon, add a
`2 * Units.largeSpacing </layout/units>`{.interpreted-text role="doc"}
`2 * Units.largeSpacing </layout/units>`
margin between the icon and the label.
:::
:::
......@@ -228,7 +228,7 @@ margin between the icon and the label.
Checkboxes should be placed to the left of the item.
![List items with checkboxes for multi
selection.](/hig/Listview5.png){.border}
selection.](/hig/Listview5.png)
Add a `2 * Units.largeSpacing </layout/units>`{.interpreted-text
role="doc"} margin between the checkbox and the icon or the label.
......@@ -241,13 +241,13 @@ Kirigami.Theme.highlightColor to indicate an active item.
Place the button to add items to the bottom right of list.
![Add button at the bottom right of a
list](/hig/ListPicker.png){.border}
list](/hig/ListPicker.png)
For deselection you can either add a remove button for seleted icons
next to the add button or use an icon on the list item.
![Using an on-demand pattern to display a \"Remove\"
icon.](/hig/ListPickerRemoveItem.png){.border}
icon.](/hig/ListPickerRemoveItem.png)
Code
----
......
......@@ -37,7 +37,7 @@ instead.](/hig/Radiobutton_Many_Good.qml.png){.border .do}
- If there are only two options where one is the negation of the other
(e.g. \"apply\" vs. \"don\'t apply\"), consider replacing the radio
buttons by one `checkbox <checkbox>`{.interpreted-text role="doc"}.
buttons by one `checkbox <checkbox>`.
::: {.container .flex}
::: {.container}
......@@ -147,7 +147,7 @@ layout and spacing of your controls.
the checkbox.
- Label a group of radio buttons with a descriptive caption to the top
left of the group (cf.
`alignment </layout/alignment>`{.interpreted-text role="doc"}).
`alignment </layout/alignment>`).
- Create a buddy relation so access keys are assigned.
- Use
`sentence style capitalization </style/writing/capitalization>`{.interpreted-text
......
......@@ -29,7 +29,7 @@ Guidelines
- Use a slider when it is useful for the user to control the rate of
change of the value in real time.
- If the value is open-ended on one or both ends, consider using a
`Spin Box <spinbox>`{.interpreted-text role="doc"} instead.
`Spin Box <spinbox>` instead.
### Behavior
......
......@@ -3,7 +3,7 @@ title: Spin Box
---
========
![Control that accepts a range of values.](/hig/Spinbox1.png){.border}
![Control that accepts a range of values.](/hig/Spinbox1.png)
Purpose
-------
......@@ -27,11 +27,11 @@ Guidelines
iterations of some action, or a time-out value.
- If the range is fixed at both ends, or the numerical values are
arbitrary (for example, a volume control), use a
`Slider <slider>`{.interpreted-text role="doc"} control instead.
`Slider <slider>` control instead.
- For cases where the values are constrained at both ends and there
large ranges of integers (more than about 20) or floating-point
values that require precise control, consider providing both a
`Slider and Spin Box <slider>`{.interpreted-text role="doc"}. This
`Slider and Spin Box <slider>`. This
allows the user to quickly set or fine-tune the setting more easily
than they could with the slider control alone.
......
......@@ -30,8 +30,8 @@ Guidelines
- Use a table to arrange data in two dimensions.
- Use a table for a concise layout with inline editing feature.
- Don\'t use a table for read-only data. In this case use a simple
`list view <list>`{.interpreted-text role="doc"} or a
`tree view <tree>`{.interpreted-text role="doc"} with multiple
`list view <list>` or a
`tree view <tree>` with multiple
columns.
### Behavior
......@@ -50,7 +50,7 @@ Guidelines
controls.
- Use the appropriate control for constrained input. Show the
control's UI (e.g. arrow for
`drop-down list <dropdown>`{.interpreted-text role="doc"}) not until
`drop-down list <dropdown>`) not until
the cell is in edit mode.
- Distinguish editable cells from those that are read-only.
- Allow tables to be extended by users in both directions.
......@@ -62,5 +62,5 @@ Guidelines
- Avoid horizontal scrollbars. Size the table to a reasonable width.
- Use fixed column header.
- Label the table with a descriptive caption to the top left (cf.
`/layout/alignment`{.interpreted-text role="doc"}).
`/layout/alignment`).
- Create a buddy relation so access keys are assigned.
......@@ -3,7 +3,7 @@ title: Text Edit
---
=========
![Control to enter multiple lines of text.](/hig/Textedit1.png){.border}
![Control to enter multiple lines of text.](/hig/Textedit1.png)
Purpose
-------
......@@ -21,7 +21,7 @@ Guidelines
- Use text edits for input of unconstrained text with more than one
line.
- Don\'t use a text edit for input of a few words. Use a
`line edit <lineedit>`{.interpreted-text role="doc"} to enter single
`line edit <lineedit>` to enter single
lines of text.
### Behavior
......@@ -35,5 +35,5 @@ Guidelines
- When disabling the text edit, also disable any associated labels and
buttons.
- Label every text edit with a descriptive caption to the top left
(cf. `alignment </layout/alignment>`{.interpreted-text role="doc"}).
(cf. `alignment </layout/alignment>`).
- Create a buddy relation so access keys are assigned.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment