Update accessibility.mdx (#4184)

* Update accessibility.mdx Tried moving the accessibility status to the bottom of the page, as per #3960 Since the H3 is generated in code, I'm just leaving it as is. Expectation is that this will be a subsection of Development considerations, which works fine. Not showing up in preview. * Move accessibility testing to bottom of tabbed content Changed 28 components that were previously revised to the standard accessibility tab layout * Relocate testing on non-standard pages Move the accessibility testing to the bottom of pages that have not been updated to the current accessibility tab template * Corrections from manual check A number of pages had the A11yStatus formed with indented code, so my GSR failed to locate. As well, a manual check of each page (which I did by navigating to the Accessibility tab and clicking the Development considerations on-page link), showed that a few of the on-page links were malformed. * Update accessibility.mdx Missed popover testing section * Removed old testing information These five components had not had their Accessibility tab info updated due to various reasons. We elected to strip out the old testing results. I left the H2 for Testing in place. * Update accessibility.mdx Adding top description to list component.
carbon-design-system · Aug 29, 2024 · fababc6 · fababc6
1 parent e71ad45
commit fababc6
Show file tree

Hide file tree

Showing 40 changed files with 108 additions and 442 deletions.
diff --git a/src/pages/components/UI-shell-header/accessibility.mdx b/src/pages/components/UI-shell-header/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/UI-shell-left-panel/accessibility.mdx b/src/pages/components/UI-shell-left-panel/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/UI-shell-right-panel/accessibility.mdx b/src/pages/components/UI-shell-right-panel/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/accordion/accessibility.mdx b/src/pages/components/accordion/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/breadcrumb/accessibility.mdx b/src/pages/components/breadcrumb/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/button/accessibility.mdx b/src/pages/components/button/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/checkbox/accessibility.mdx b/src/pages/components/checkbox/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/code-snippet/accessibility.mdx b/src/pages/components/code-snippet/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/contained-list/accessibility.mdx b/src/pages/components/contained-list/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/content-switcher/accessibility.mdx b/src/pages/components/content-switcher/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/data-table/accessibility.mdx b/src/pages/components/data-table/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/date-picker/accessibility.mdx b/src/pages/components/date-picker/accessibility.mdx
@@ -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
@@ -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']} />
diff --git a/src/pages/components/dropdown/accessibility.mdx b/src/pages/components/dropdown/accessibility.mdx
@@ -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
@@ -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',
+  ]}
+/>
diff --git a/src/pages/components/file-uploader/accessibility.mdx b/src/pages/components/file-uploader/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/form/accessibility.mdx b/src/pages/components/form/accessibility.mdx
@@ -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,
@@ -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']}
+/>
diff --git a/src/pages/components/inline-loading/accessibility.mdx b/src/pages/components/inline-loading/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/link/accessibility.mdx b/src/pages/components/link/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/list/accessibility.mdx b/src/pages/components/list/accessibility.mdx
@@ -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
@@ -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']} />
diff --git a/src/pages/components/loading/accessibility.mdx b/src/pages/components/loading/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/menu-buttons/accessibility.mdx b/src/pages/components/menu-buttons/accessibility.mdx
@@ -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
@@ -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" />
diff --git a/src/pages/components/modal/accessibility.mdx b/src/pages/components/modal/accessibility.mdx
@@ -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
@@ -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']} />