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

Update accessibility.mdx #4184

Merged
merged 11 commits into from
Aug 29, 2024
4 changes: 2 additions & 2 deletions src/pages/components/UI-shell-header/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ standard UI shell header component, Carbon already incorporates accessibility.

</AnchorLinks>

<A11yStatus layout="table" components="UI shell" />

## What Carbon provides

The Carbon header bakes in keyboard interaction, including a
Expand Down Expand Up @@ -148,3 +146,5 @@ custom component.
the region.
- Carbon includes the "Skip to main content" link as the first item on the page
with a `tabindex="0"`, but hides it through CSS until it receives focus.

<A11yStatus layout="table" components="UI shell" />
4 changes: 2 additions & 2 deletions src/pages/components/UI-shell-left-panel/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ component.

</AnchorLinks>

<A11yStatus layout="table" components="UI shell" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -111,3 +109,5 @@ custom component.
additional information to assistive technologies.
- Each 'sub-menu' is implemented as a `<button>` with `aria-expanded`.
- Activated links receive an `aria-current="page"` attribute.

<A11yStatus layout="table" components="UI shell" />
4 changes: 2 additions & 2 deletions src/pages/components/UI-shell-right-panel/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@ component.

</AnchorLinks>

<A11yStatus layout="table" components="UI shell" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -106,3 +104,5 @@ 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.

<A11yStatus layout="table" components="UI shell" />
4 changes: 2 additions & 2 deletions src/pages/components/accordion/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ standard accordion component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Accordion" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -125,3 +123,5 @@ custom component:
- See the
[ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion)
for more guidance.

<A11yStatus layout="table" components="Accordion" />
4 changes: 2 additions & 2 deletions src/pages/components/breadcrumb/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ component.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Breadcrumb" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -80,3 +78,5 @@ custom component:
screen readers provide more context.
- The visual / separators do not need to be text (Carbon uses CSS) and are not
intended to be navigable.

<A11yStatus layout="table" components="Breadcrumb" />
4 changes: 2 additions & 2 deletions src/pages/components/button/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ standard button component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Button" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -107,3 +105,5 @@ custom component:
- See the
[ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#button)
for more considerations.

<A11yStatus layout="table" components="Button" />
4 changes: 2 additions & 2 deletions src/pages/components/checkbox/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ standard checkbox component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Checkbox" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -95,3 +93,5 @@ custom component:
- See the
[ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox)
for more considerations.

<A11yStatus layout="table" components="Checkbox" />
4 changes: 2 additions & 2 deletions src/pages/components/code-snippet/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ component.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Code snippet" />

## What Carbon provides

Carbon bakes keyboard operation into its components, as well as many other
Expand Down Expand Up @@ -109,3 +107,5 @@ Keep this in mind if you are 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

<A11yStatus layout="table" components="Code snippet" />
4 changes: 2 additions & 2 deletions src/pages/components/contained-list/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ standard contained list component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Contained list" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -111,3 +109,5 @@ custom component.
`aria-labelledby`.
- Any operable variant, whether a clickable list or a list with action items, is
a `<button>` implemented as a child of the `<li>`.

<A11yStatus layout="table" components="Contained list" />
4 changes: 2 additions & 2 deletions src/pages/components/content-switcher/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ standard content switcher component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Content switcher" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -125,3 +123,5 @@ custom component.
for more considerations.
- For accessibility considerations for manual content switchers, see
[Deciding when to make selection automatically follow focus](https://w3c.github.io/aria-practices/#kbd_selection_follows_focus).

<A11yStatus layout="table" components="Content switcher" />
4 changes: 2 additions & 2 deletions src/pages/components/data-table/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ standard data table component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Data table" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -108,3 +106,5 @@ Keep this in mind if you are modifying Carbon or creating a custom component:
- See the
[ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#table)
for more considerations

<A11yStatus layout="table" components="Data table" />
42 changes: 1 addition & 41 deletions src/pages/components/date-picker/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ be updated when these accessibility issues are resolved.
<AnchorLink>Accessibility testing</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components={['Date picker', 'Fluid date picker']} />

## Accessibility considerations

1. The date picker labels should clearly describe the dates that the user needs
Expand Down Expand Up @@ -75,42 +73,4 @@ be updated when these accessibility issues are resolved.

## Accessibility testing

Automated, manual and screen reader accessibility verification test has been
performed on the date picker 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.

### Automated test

<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.2 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 />- No violations
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</Column>
</Row>
<A11yStatus layout="table" components={['Date picker', 'Fluid date picker']} />
24 changes: 12 additions & 12 deletions src/pages/components/dropdown/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,6 @@ component.

</AnchorLinks>

<A11yStatus
layout="table"
components={[
'Dropdown',
'Multiselect',
'Combo box',
'Fluid dropdown',
'Fluid multiselect',
'Fluid combo box',
]}
/>

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -144,3 +132,15 @@ custom component.
- See the
[ARIA authoring practices for combo box](https://w3c.github.io/aria-practices/#combbox)
for more considerations.

<A11yStatus
layout="table"
components={[
'Dropdown',
'Multiselect',
'Combo box',
'Fluid dropdown',
'Fluid multiselect',
'Fluid combo box',
]}
/>
4 changes: 2 additions & 2 deletions src/pages/components/file-uploader/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ component.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="File uploader" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -82,3 +80,5 @@ custom component:
- Error messages about file uploads must be exposed to assistive technology.
- The Delete button needs to have the uploaded file name associated with it
programmatically, so the user understands which file will be removed.

<A11yStatus layout="table" components="File uploader" />
10 changes: 5 additions & 5 deletions src/pages/components/form/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,6 @@ considerations.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus
layout="table"
components={['Form', 'Form group', 'Form label', 'Fluid form']}
/>

## What Carbon provides

Carbon bakes keyboard operation into the components that make up a form,
Expand Down Expand Up @@ -131,3 +126,8 @@ creating a custom form or input component.
[forms](https://w3c.github.io/aria-practices/#aria_lh_form) and
[labels](https://w3c.github.io/aria-practices/#naming_with_labels) for more
considerations.

<A11yStatus
layout="table"
components={['Form', 'Form group', 'Form label', 'Fluid form']}
/>
4 changes: 2 additions & 2 deletions src/pages/components/inline-loading/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ component.

</AnchorLinks>

<A11yStatus layout="table" components="Inline loading" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -89,3 +87,5 @@ custom component.
- Where no text is displayed for inline loading, Carbon uses the SVG title of
the status icon to surface the status (“active”, “finished”, “error”) to
assistive technologies.

<A11yStatus layout="table" components="Inline loading" />
4 changes: 2 additions & 2 deletions src/pages/components/link/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ standard link component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components="Link" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -125,3 +123,5 @@ custom component.
for more details.
- See the [ARIA authoring practices](https://w3c.github.io/aria-practices/#link)
for more considerations.

<A11yStatus layout="table" components="Link" />
13 changes: 10 additions & 3 deletions src/pages/components/list/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,18 @@ import {
ListItem,
} from '@carbon/react';

<PageDescription>

No accessibility annotations are needed for lists, but keep these considerations
in mind if you are modifying Carbon or creating a custom component.

</PageDescription>

<AnchorLinks>
<AnchorLink>What Carbon provides</AnchorLink>
<AnchorLink>Developer considerations</AnchorLink>
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components={['Ordered list', 'Unordered list']} />

## What Carbon provides

Carbon incorporates many accessibility considerations, some of which are
Expand All @@ -49,3 +54,5 @@ Keep this in mind if you’re modifying Carbon or creating a custom component:
- Carbon uses `::before` and `::marker` CSS pseudo-elements for the numbering
and bulleting of lists, which are properly read by assistive technologies such
as [screen readers](https://www.ibm.com/able/toolkit/verify/screen-reader/).

<A11yStatus layout="table" components={['Ordered list', 'Unordered list']} />
4 changes: 2 additions & 2 deletions src/pages/components/loading/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ standard loading component, Carbon already incorporates accessibility.

</AnchorLinks>

<A11yStatus layout="table" components="Loading" />

## What Carbon provides

The loading component has no keyboard accessibility considerations since it is
Expand Down Expand Up @@ -120,3 +118,5 @@ custom component.
Alternatively, focus could be set to an appropriate element.
- See the Equal Access Toolkit information on
[status messages](https://www.ibm.com/able/toolkit/develop/dynamic-updates/#role-status).

<A11yStatus layout="table" components="Loading" />
4 changes: 2 additions & 2 deletions src/pages/components/menu-buttons/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ button is going to be updated soon.

</AnchorLinks>

<A11yStatus layout="table" components="Menu buttons" />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -84,3 +82,5 @@ custom component.
See the
[ARIA authoring practices on menubutton](https://w3c.github.io/aria-practices/#menubutton)
for more considerations.

<A11yStatus layout="table" components="Menu buttons" />
4 changes: 2 additions & 2 deletions src/pages/components/modal/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ standard modal dialog component, Carbon already incorporates accessibility.
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

<A11yStatus layout="table" components={['Modal', 'Composed modal']} />

## What Carbon provides

Carbon bakes keyboard operation into its components, improving the experience of
Expand Down Expand Up @@ -127,3 +125,5 @@ custom component.
- See the modal pattern in the
[ARIA authoring practices](https://w3c.github.io/aria-practices/#dialog_modal)
for more considerations.

<A11yStatus layout="table" components={['Modal', 'Composed modal']} />
Loading
Loading