Move accessibility testing to bottom of tabbed content

Changed 28 components that were previously revised to the standard accessibility tab layout
carbon-design-system · Aug 26, 2024 · 486df46 · 486df46
1 parent ed9746a
commit 486df46
Show file tree

Hide file tree

Showing 28 changed files with 56 additions and 56 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/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/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/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
@@ -23,8 +23,6 @@ import {
   <AnchorLink>Developer 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 +47,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']} />
diff --git a/src/pages/components/pagination/accessibility.mdx b/src/pages/components/pagination/accessibility.mdx
@@ -34,8 +34,6 @@ component.
 
 </AnchorLinks>
 
-<A11yStatus layout="table" components={['Pagination', 'Pagination nav']} />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -110,3 +108,5 @@ custom component.
 - Consult the
   [ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
   for more considerations.
+
+<A11yStatus layout="table" components={['Pagination', 'Pagination nav']} />
diff --git a/src/pages/components/progress-bar/accessibility.mdx b/src/pages/components/progress-bar/accessibility.mdx
@@ -23,8 +23,6 @@ standard progress bar component, Carbon already incorporates accessibility.
 
 </AnchorLinks>
 
-<A11yStatus layout="table" components="Progress bar" />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -106,3 +104,5 @@ Keep this in mind if you’re modifying Carbon or creating a custom component:
   and helper text with the component.
 - The red error and green success SVG icons have `aria-hidden="true"` set, since
   the helper text and aria attributes provide the same information.
+
+<A11yStatus layout="table" components="Progress bar" />
diff --git a/src/pages/components/radio-button/accessibility.mdx b/src/pages/components/radio-button/accessibility.mdx
@@ -34,8 +34,6 @@ component.
 
 </AnchorLinks>
 
-<A11yStatus layout="table" components="Radio button" />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -93,3 +91,5 @@ Keep this in mind if you’re modifying Carbon or creating a custom component.
 - See the
   [ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/)
   for more considerations.
+
+<A11yStatus layout="table" components="Radio button" />
diff --git a/src/pages/components/search/accessibility.mdx b/src/pages/components/search/accessibility.mdx
@@ -32,8 +32,6 @@ annotations are needed to make the search messaging and results accessible.
 
 </AnchorLinks>
 
-<A11yStatus layout="table" components={['Search', 'Fluid search']} />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -153,3 +151,5 @@ custom component.
 - See the
   [Mozilla search input documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)
   for more considerations.
+
+<A11yStatus layout="table" components={['Search', 'Fluid search']} />
diff --git a/src/pages/components/slider/accessibility.mdx b/src/pages/components/slider/accessibility.mdx
@@ -27,8 +27,6 @@ component.
   <AnchorLink>Development considerations</AnchorLink>
 </AnchorLinks>
 
-<A11yStatus layout="table" components="Slider" />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -163,3 +161,5 @@ In the range slider, if the inputted value is not logically correct (for
 example, if a minimum value is greater than the maximum value), a warning
 message will be generated that informs the user that a value was autocorrected
 to the nearest allowed digit.
+
+<A11yStatus layout="table" components="Slider" />
diff --git a/src/pages/components/tabs/accessibility.mdx b/src/pages/components/tabs/accessibility.mdx
@@ -32,8 +32,6 @@ accessibility.
   <AnchorLink>Development considerations</AnchorLink>
 </AnchorLinks>
 
-<A11yStatus layout="table" components="Tabs" />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -155,3 +153,5 @@ custom component.
   for more considerations.
 - For accessibility considerations for manual tabs, see
   [Deciding when to make selection automatically follow focus](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_selection_follows_focus).
+
+<A11yStatus layout="table" components="Tabs" />
diff --git a/src/pages/components/tag/accessibility.mdx b/src/pages/components/tag/accessibility.mdx
@@ -32,8 +32,6 @@ in mind if you are modifying Carbon or creating a custom component.
   <AnchorLink>Development considerations</AnchorLink>
 </AnchorLinks>
 
-<A11yStatus layout="table" components="Tag" />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -110,3 +108,5 @@ Keep this in mind if you’re modifying Carbon or creating a custom component.
   interactions for the close icon in the tag.
 - Do not nest buttons within the operational tag. Consider using the `as` prop
   to change an element tag to avoid nesting buttons.
+
+<A11yStatus layout="table" components="Tag" />
diff --git a/src/pages/components/toggle/accessibility.mdx b/src/pages/components/toggle/accessibility.mdx
@@ -35,8 +35,6 @@ component.
 
 </AnchorLinks>
 
-<A11yStatus layout="table" components="Toggle" />
-
 ## What Carbon provides
 
 Carbon bakes keyboard operation into its components, improving the experience of
@@ -116,3 +114,5 @@ Keep this in mind if you’re modifying Carbon or creating a custom component.
 - See the
   [ARIA authoring practices guidance on switch](https://w3c.github.io/aria-practices/#switch)
   for more considerations.
+
+<A11yStatus layout="table" components="Toggle" />
diff --git a/src/pages/components/toggletip/accessibility.mdx b/src/pages/components/toggletip/accessibility.mdx
@@ -23,8 +23,6 @@ trigger element and can contain interactive elements.
   <AnchorLink>Development considerations</AnchorLink>
 </AnchorLinks>
 
-<A11yStatus layout="table" components="Toggletip" />
-
 ## What Carbon provides
 
 Carbon already incorporates accessibility into the toggletip component.
@@ -78,3 +76,5 @@ custom component.
 - The icon button has `aria-label="Show information"`.
 - The button uses `aria-expanded` to set toggletip visibility and
   `aria-controls` to handle navigation to the content.
+
+<A11yStatus layout="table" components="Toggletip" />