A11y documentation updates december 23

.styleguidist/accessibility.md

@@ -1,4 +1,4 @@
-Our goal is to be WCAG 2.1 (and eventually WCAG 2.2) compliant at an AA level for all components. Additionally, components are tested in commonly used user agents and with common assistive technology. We also aim to support Windows High Contrast mode. Based on our testing, almost all components fulfill these goals, with a few [outstanding issues](./#Accessibility?=known-issues).
+Our goal is to be WCAG 2.2 compliant at an AA level for all components. Additionally, components are tested in commonly used user agents and with common assistive technology. We also aim to support Windows High Contrast mode. Based on our testing, almost all components fulfill these goals, with a few [outstanding issues](./#Accessibility?=known-issues).
 
 Using the Suomi.fi component library does not automatically make your project accessible, but it will hopefully significantly reduce the amount of work you need to do to provice an accessible user experience. It is important to read the documentation for each component carefully.
 
@@ -18,12 +18,13 @@ Using the Suomi.fi component library does not automatically make your project ac
 
 ## Known issues
 
-* **MultiSelect** and **SingleSelect**: Options are not read out by VoiceOver on macOS when using Safari.
-* **MultiSelect** and **SingleSelect**: The selected state of an option is not read out by JAWS.
-* **Textarea** and **TextInput**: Success/error states are not distinguishable without colour.
-* **Breadcrumb**: Line-height does not adjust when only text is resized 200%.
-* **Dropdown**: Line-height does not adjust when only text is resized 200%.
-* **DateInput**: Disabled dates are not distuinguishable from non-disabled ones in Windows High Contrast mode.
+- **MultiSelect** and **SingleSelect**: Options are not read out by VoiceOver on macOS when using Safari and when navigating options using up/down arrow keys. Options remain accessible using regular VO+arrow key combinations.
+- **MultiSelect** and **SingleSelect**: The selected state of an option is not read out by JAWS with either Chrome or Firefox or macOS VoiceOver with Safari.
+- **MultiSelect**, **SingleSelect** and **DropDown**: Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation.
+- **Textarea** and **TextInput**: Success/error states are not distinguishable without colour.
+- **Breadcrumb**: Height does not adjust when text wraps, e.g. when text is resized 200%.
+- **Dropdown**: Height does not adjust when only text is resized 200%.
+- **DateInput**: Disabled dates are not distuinguishable from non-disabled ones in Windows High Contrast mode.
 
 ## Our accessibility checklist
 
@@ -45,6 +46,7 @@ This checklist reflects the current features of the component library. It is not
 
 * All functionality can be accessed with keyboard
 * Keyboard focus is clearly visible
+* The element in focus is visible when it receives keyboard focus.
 * The keyboard focus order within a component is logical
 * Focusing a component or its sub-component does not cause a change of context.
 * Component has no single-character shortcuts.
@@ -53,11 +55,13 @@ This checklist reflects the current features of the component library. It is not
 
 * Focusing or hovering a component or its sub-component does not cause a change of context.
 * No actions are performed using the pointer down-event, unless it is native functionality defined by the user-agent.
+* Any actions that use a dragging movement can also be performed using a single pointer without dragging.
+* Target sizes fulfill WCAG 2.5.8 Target Size (Minimum) requirement 24 x 24 px.
 
 ### Adaptability
 
 * Text resizing to 200% does not cause loss of information or overlapping content. **Must** support full-page zoom. **Should** support text-only zoom. 
-* Changing text settings according to WCAG *4.12 does not cause loss of information or overlap.
+* Changing text settings according to WCAG 1.4.12 does not cause loss of information or overlap.
 * Zooming to 400% in a 1280px wide window does not cause horizontal scrolling, loss or overlap of information.
 * Content is not limited to a specific device orientation.
 

src/core/Breadcrumb/Breadcrumb/Breadcrumb.md

@@ -1,5 +1,9 @@
 The `<Breadcrumb>` component is used to let the user know their current location in a web service. It is rendered as an HTML `nav` element.
 
+### Accessibility Notes
+
+- Height does not adjust when text wraps, e.g. when text is resized 200%.
+
 Examples:
 
 - [Basic use](./#/Components/Breadcrumb?id=basic-use)

src/core/Dropdown/Dropdown/Dropdown.md

@@ -4,6 +4,11 @@ If there are a lot of options in the list, consider using the filterable <a href
 
 If there are only 2-3 options, consider using the <a href="./#/Components/RadioButton">RadioButton</a> component instead.
 
+### Accessibility notes
+
+- Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation.
+- Height does not adjust when only text is resized 200%.
+
 Examples:
 
 - [Basic use](./#/Components/Dropdown?id=basic-use)

src/core/Form/DateInput/DateInput.md

@@ -181,7 +181,7 @@ import { DateInput } from 'suomifi-ui-components';
 
 ### Disabled dates in date picker
 
-Use the `shouldDisableDate()` prop to disable certain dates from the date picker. Disabled dates can still be accessed through keyboard navigation but they are not selectable.
+Use the `shouldDisableDate()` prop to disable certain dates from the date picker. Disabled dates can still be accessed through keyboard navigation but they are not selectable. Accessibility note: disabled dates are not currently distuinguishable from non-disabled ones in Windows High Contrast mode.
 
 ```js
 import { DateInput } from 'suomifi-ui-components';

src/core/Form/Select/MultiSelect/MultiSelect/MultiSelect.md

@@ -2,6 +2,12 @@ The `<MultiSelect>` component is used to select multiple items from a list of op
 
 If you need to select only one option, use the [SingleSelect](./#/Components/SingleSelect) component instead.
 
+### Accessibility notes
+
+- Options are not read out by VoiceOver on macOS when using Safari and when navigating options using up/down arrow keys. Options remain accessible using regular VO+arrow key combinations.
+- The selected state of an option is not read out by JAWS with either Chrome or Firefox or macOS VoiceOver with Safari.
+- Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation.
+
 Examples:
 
 - [Basic use](./#/Components/MultiSelect?id=basic-use)

src/core/Form/Select/SingleSelect/SingleSelect.md

@@ -4,6 +4,12 @@ If you need to select multiple options, use the [MultiSelect](./#/Components/Mul
 
 If your list only contains a few options (user does not need filtering to find the correct option), use the [Dropdown](./#/Components/Dropdown) component instead.
 
+### Accessibility notes
+
+- Options are not read out by VoiceOver on macOS when using Safari and when navigating options using up/down arrow keys. Options remain accessible using regular VO+arrow key combinations.
+- The selected state of an option is not read out by JAWS with either Chrome or Firefox or macOS VoiceOver with Safari.
+- Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation.
+
 Examples:
 
 - [Basic use](./#/Components/SingleSelect?id=basic-use)

src/core/Form/TextInput/TextInput.md

@@ -2,6 +2,10 @@
 
 The component's width should match the preferred length of the user input.
 
+### Accessibility Notes
+
+- Success/error states are not distinguishable without colour.
+
 Examples:
 
 - [Basic use](./#/Components/TextInput?id=basic-use)

src/core/Form/Textarea/Textarea.md

@@ -1,5 +1,9 @@
 The `<Textarea>` component is suitable for longer user inputs.
 
+### Accessibility Notes
+
+- Success/error states are not distinguishable without colour.
+
 Examples:
 
 - [Basic use](./#/Components/Textarea?id=basic-use)