From c31cd7e884e754413d2efb2a0e7b7d206984d697 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 28 Oct 2022 09:32:12 -0700 Subject: [PATCH] content for accessibility tab (#3212) * content for accessibility tab images and content * chore(formatting): output of yarn format Co-authored-by: Taylor Jones Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../UI-shell-left-panel/accessibility.mdx | 109 ++++++++++++++++++ .../components/UI-shell-left-panel/code.mdx | 2 +- .../images/left-nav-accessibility-1.png | Bin 0 -> 57292 bytes .../images/left-nav-accessibility-2.png | Bin 0 -> 47111 bytes .../images/left-nav-accessibility-3.png | Bin 0 -> 46182 bytes .../components/UI-shell-left-panel/style.mdx | 2 +- .../components/UI-shell-left-panel/usage.mdx | 2 +- 7 files changed, 112 insertions(+), 3 deletions(-) create mode 100644 src/pages/components/UI-shell-left-panel/accessibility.mdx create mode 100644 src/pages/components/UI-shell-left-panel/images/left-nav-accessibility-1.png create mode 100644 src/pages/components/UI-shell-left-panel/images/left-nav-accessibility-2.png create mode 100644 src/pages/components/UI-shell-left-panel/images/left-nav-accessibility-3.png diff --git a/src/pages/components/UI-shell-left-panel/accessibility.mdx b/src/pages/components/UI-shell-left-panel/accessibility.mdx new file mode 100644 index 00000000000..f8ffa5da749 --- /dev/null +++ b/src/pages/components/UI-shell-left-panel/accessibility.mdx @@ -0,0 +1,109 @@ +--- +title: UI shell left panel +description: + This left panel is part of the Carbon UI shell. A shell is a collection of + components shared by all products within a platform. +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] +--- + +import { + StructuredListWrapper, + StructuredListHead, + StructuredListBody, + StructuredListRow, + StructuredListInput, + StructuredListCell, + OrderedList, + ListItem, +} from '@carbon/react'; + + + +No accessibility annotations are needed for UI shell left panels, but keep these +considerations in mind if you are modifying Carbon or creating a custom +component. + + + + + +What Carbon provides +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 interaction + +The left panel is comprised of both expandable sections (often called +"sub-menus") and links to content. All items can be reached by `Tab`. Toggling a +collapsed section with `Space` or `Enter` expands it, which reveals additional +links. Activating any of the links (with `Enter`) updates the main content area +and puts focus back at the top of the page. The link becomes bold to show it is +the current page. (It remains in the tab order, but can no longer be activated.) + + + + +![example of UI shell left panel keyboard interaction](images/left-nav-accessibility-1.png) + + + Sub-menus and links are reached by Tab. Space and Enter keys expand/collapse + sub-menus, and the Enter key is used to activate links. + + + + + +### Non-persistent left panel + +On smaller screens, or if content is zoomed up to approximately 175% +magnification, Carbon responsively hides the left panel behind a 'hamburger' +button, which appears at the start of the UI shell header. Activating the button +(with `Space` or `Enter`) causes the left panel to appear. It overlays the main +content area, which often becomes dimmed. The hamburger button's icon becomes an +X, and must be activated to close the left panel. + + + + +![hamburger button keyboard interaction](images/left-nav-accessibility-2.png) + +The hamburger button expands and collapses the left panel. + + + + +The left panel can also be implemented as a "Side rail" variant, which slides +into view from the left side when reached by keyboard or hovered by mouse. +Keyboard interaction within the revealed left panel does not change. When users +tab out of the left panel, the side rail slides out of view. + + + + +![the side rail is shown expanding as the user tabs to the left panel location](images/left-nav-accessibility-3.png) + + + The side rail expands on hover or focus, and collapses when not hovered or + focused. + + + + + +## Development considerations + +Keep these considerations in mind if you are modifying Carbon or creating a +custom component. + +- the left panel is in a `