-
Notifications
You must be signed in to change notification settings - Fork 784
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
accessibilty content for right panel (#3223)
* accessibilty content for right panel added content and images for ui shell right panel * Update accessibility.mdx removed an orphan subheading from file copy * update accessibility content and an image * Update accessibility.mdx adjusted some text for design annotation considerations * chore(format): fix format error Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
1 parent
1692f45
commit 3192186
Showing
7 changed files
with
107 additions
and
3 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
src/pages/components/UI-shell-right-panel/accessibility.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
--- | ||
title: UI shell right panel | ||
description: | ||
This right 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'; | ||
|
||
<PageDescription> | ||
|
||
No accessibility annotations are needed for the UI shell right panel, but keep | ||
these considerations in mind if you are modifying Carbon or creating a custom | ||
component. | ||
|
||
</PageDescription> | ||
|
||
<AnchorLinks> | ||
|
||
<AnchorLink>What Carbon provides</AnchorLink> | ||
<AnchorLink>Design recommendations</AnchorLink> | ||
<AnchorLink>Development considerations</AnchorLink> | ||
|
||
</AnchorLinks> | ||
|
||
## 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 switcher button is the last item in the UI shell header. Activating the | ||
button (with `Space` or `Enter`) opens the right panel over the main content | ||
area. All actionable links in the panel can be reached by `Tab`. Activating any | ||
of the links (with `Enter`) loads new content and closes the right panel. The | ||
panel can also be closed by pressing `Esc` or by re-activating the switcher | ||
button (which received an X icon on activation). | ||
|
||
<Row> | ||
<Column colLg={8}> | ||
|
||
![example of right panel keyboard activation](images/right-panel-accessibility-1.png) | ||
|
||
<Caption> | ||
Activating the switch button with Enter or Space toggles the display of the | ||
right panel. | ||
</Caption> | ||
|
||
</Column> | ||
</Row> | ||
|
||
<Row> | ||
<Column colLg={8}> | ||
|
||
![example of right panel keyboard interaction](images/right-panel-accessibility-2.png) | ||
|
||
<Caption> | ||
Links are reached by Tab and activated by Enter key. Activating links or | ||
pressing Esc key closes panel. | ||
</Caption> | ||
|
||
</Column> | ||
</Row> | ||
|
||
## Design recommendations | ||
|
||
### Annotate name for switcher button, where necessary | ||
|
||
Designers may need to change the icon-only switcher button's name to match the | ||
right panel's scope. Depending on the context of the design, common button names | ||
include "Switch site" or "App switcher". | ||
|
||
<Row> | ||
<Column colLg={8}> | ||
|
||
![the switcher button is annotated as "app switcher"](images/right-panel-accessibility-3.png) | ||
|
||
<Caption> | ||
Annotate a name change to the switcher button if needed in your design. | ||
</Caption> | ||
|
||
</Column> | ||
</Row> | ||
|
||
## Development considerations | ||
|
||
Keep these considerations in mind if you are modifying Carbon or creating a | ||
custom component. | ||
|
||
- The right panel is in a `<nav>` section. | ||
- All links in the right panel are in a `<ul>` structure, which provides | ||
additional information to assistive technologies. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+39.2 KB
src/pages/components/UI-shell-right-panel/images/right-panel-accessibility-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+49.7 KB
src/pages/components/UI-shell-right-panel/images/right-panel-accessibility-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+22.6 KB
src/pages/components/UI-shell-right-panel/images/right-panel-accessibility-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3192186
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
carbondesignsystem – ./
carbondesignsystem-git-main-carbon-design-system.vercel.app
carbondesignsystem.vercel.app
carbondesignsystem-carbon-design-system.vercel.app