From 7e3fdbb7772a06a48852fd16d712268db87a0798 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 4 Aug 2023 14:11:03 -0700 Subject: [PATCH 01/10] Update accessibility.mdx First draft of new accessibility content (without images) --- .../contained-list/accessibility.mdx | 83 ++++++++++++++++++- 1 file changed, 82 insertions(+), 1 deletion(-) diff --git a/src/pages/components/contained-list/accessibility.mdx b/src/pages/components/contained-list/accessibility.mdx index 7fc2e6635fd..8a36338caa5 100644 --- a/src/pages/components/contained-list/accessibility.mdx +++ b/src/pages/components/contained-list/accessibility.mdx @@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] Design annotations are needed for specific instances shown below, but for the -standard accordion component, Carbon already incorporates accessibility. +standard contained list component, Carbon already incorporates accessibility. @@ -24,3 +24,84 @@ This page is underdevelopment. Please check back later for updates. Design recommendations Development considerations + +## What Carbon provides + +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via the keyboard. Carbon incorporates many +other accessibility considerations, some of which are described below. + +### Keyboard interactions + +The default contained list is not interactive, but a number of its variants +include keyboard operation. In all interactive variants, the `Tab` key is used +for navigation, and `Space` or `Enter` are used to activate components. + +Users tab between any actionable items in the list, whether each item is itself +clickable or contains an action button (such as ‘delete’). It is possible for +multiple tab stops to exist for each list item. + + + + +![A user tabs to the content switcher then changes the selection with left and right arrow keys. Pressing tab again moves focus to a link inside the section's content.](images/content-switcher-accessibility-1.png) + + + Manual and automatic content switchers have the same basic keyboard + interaction. + + + + + +There are two kinds of filterable contained lists: persistent or expandable. +Both follow the standard Carbon +[search input interaction](https://carbondesignsystem.com/components/search/accessibility/), +the difference being that a Filter button hides the input until it is activated +with `Enter` or `Space`. + + + + +![Two variants of a content switcher with tabs called All, Read and Unread. In the first, the Read tab is selected and focused. In the second the All tab is selected and the Read tab has a focus indicator](images/content-switcher-accessibility-2.png) + + + Arrows keys alone update the selected tab in an automatic content switcher. + The Space and Enter keys are used to select a content tab after arrowing to it + in a manual variant. + + + + + +## Design recommendations + +### Indicate when the contained list is clickable + +There is no persistent visual indicator that the list items in a contained list +are clickable. To help developers distinguish them from the default contained +list in your designs, annotate where the rows in a list are intended to be +clickable. + + + + +![Two content switchers, one with a pink annotation reading "auto", the other with an annotation "manual"](images/content-switcher-accessibility-3.png) + + + Annotate whether the switcher should be implemented as automatic or manual. + + + + + +## Development considerations + +Keep these considerations in mind if you are modifying Carbon or creating a +custom component. + +- The contained list is implemented as a list (usually a `