Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility changes #2737

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 66 additions & 61 deletions src/pages/components/code-snippet/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,79 +19,84 @@ import {

<PageDescription>

The code snippet React Carbon component has been tested against the latest
[W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/)
and violations have been identified as high priority issues. This document will
be updated when these accessibility issues are resolved.
No accessibility annotations are needed for code snippets, but keep these considerations in mind if you’re modifying Carbon or creating a custom component.

</PageDescription>

<AnchorLinks>
<AnchorLink>How it works</AnchorLink>
<AnchorLink>Accessibility considerations</AnchorLink>
<AnchorLink>Resources</AnchorLink>
<AnchorLink>Accessibility testing</AnchorLink>
<AnchorLink>What Carbon provides</AnchorLink>
<AnchorLink>Developer considerations</AnchorLink>
</AnchorLinks>

## Accessibility considerations
## What Carbon provides

1. The code snippet copy button can be activated using both the `Space` or
`Enter` key.
2. The code snippet copy button label accurately describes what the button does.
3. After the button is activated the focus remains on the button since there is
no change in context.
Carbon bakes keyboard operation into its components, as well as many other
accessibility considerations.

## Resources
### Keyboard interaction

- [W3C WAI-ARIA Authoring Practices Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#buttonn)
covers the usage of ARIA names, state and roles, as well as the expected
keyboard interactions.
- [IBM Accessibility Requirements:](https://www.ibm.com/able/requirements/requirements/)
- [2.4.7 Focus Visible](https://www.ibm.com/able/requirements/requirements/#2_4_7)
(WCAG Success Criteria
[2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))
- [3.2.2 On Input](https://www.ibm.com/able/requirements/requirements/#3_2_2)
(WCAG Success Criteria
[3.2.2](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior-unpredictable-change.html))
For all three variants, the code snippet can be copied with `Space` or `Enter`. Arrow
keys can operate scroll bars.

## Accessibility testing
<Row>
<Column colLg={8}>

![inline code snippet keyboard interaction](images/code-snippet-accessibility-1.png)

Automated, manual and screen reader accessibility verification test has been
performed on the code snippet React Carbon component.
[WCAG 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) issues
have been identified and the list of open accessibility violations is available
in the Carbon Component GitHub repository.
</Column>
</Row>

### Automated test
By default, each inline code snippet is reachable by `Tab` and copied with `Space` or `Enter`.

<Row>
<Column noGutterSm>
<StructuredListWrapper>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>
Automated test environment
</StructuredListCell>
<StructuredListCell head>Results</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
- macOS Mojave version 10.14.6 with VoiceOver
<br />
- Chrome version 77.0.3865.90
<br />
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM
Accessibility WCAG 2.1 Sept. 2019 Ruleset
<br />- Carbon React version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>DAP test:</strong>
<br />- Violations
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</Column>
<Column colLg={8}>

![single line code snippet interaction, with 2 tab stops](images/code-snippet-accessibility-2.png)

</Column>
</Row>

The single line code snippet tabstop supports left and right arrow key scrolling.

<Row>
<Column colLg={8}>

![multi-line code snippet keyboard interaction](images/code-snippet-accessibility-3.png)

</Column>
</Row>

The multi-line’s buttons are reachable by `Tab` and activated with `Space` or `Enter`.

### Labeling and updates

Carbon provides the copy button's default label and tooltip behavior. Carbon
handles notices about the success of the copy function, as well as updates to the
Show more mechanism.

<Row>
<Column colLg={8}>

![hovering on the button exposes ‘copy to clipboard’ tooltip](images/code-snippet-accessibility-4.png)

</Column>
</Row>

The code snippet’s buttons expose their labels on hover or focus.

<Row>
<Column colLg={8}>

![the activated button shows a ‘copied!’ message](images/code-snippet-accessibility-5.png)

</Column>
</Row>

The results of activating buttons are provided in text.

## Developer considerations

Keep this in mind if you’re modifying Carbon or creating a custom component:

* the inline code text is implemented as a button so its text can be copied
* single line snippets take an additional tabstop to support arrow key scrolling
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 3 additions & 9 deletions src/pages/components/code-snippet/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -259,14 +259,8 @@ manually highlighting the text and right clicking "copy".
- Show more or less code by pressing `Space` or `Enter` while the ghost button
is in focus.

#### Screen readers

- VoiceOver: Users can copy code by pressing `Space` while the copy button has
screen reader focus.
- JAWS: Users can copy code by pressing `Space` while the copy button has screen
reader focus.
- NVDA: Users can copy code by pressing `Space` while the copy button has screen
reader focus.
For additional keyboard interactions, see the
[accessibility tab](/components/code-snippet/accessibility#keyboard-interaction).

## Inline

Expand Down Expand Up @@ -325,7 +319,7 @@ Use multi-line code snippets for displaying multiple lines of code.

#### Show more button

A ghost button can be added to a multi-line code snippet to show more or fewer
A Show more ghost button can be added to a multi-line code snippet to show more or fewer
lines of code. Use this functionality if your layout is tight on space.

<Row>
Expand Down