Added-accessibility-content

src/pages/components/ai-label/accessibility.mdx

@@ -4,8 +4,69 @@ description: The AI label indicates an instance of AI in the UI.
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
-<InlineNotification>
+<PageDescription>
 
-This page is currently under developement. Check back later for updates.
+The AI label display and hide explainability information upon the click of the
+UI trigger element and can contain interactive elements.
 
-</InlineNotification>
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>What Carbon provides</AnchorLink>
+<AnchorLink>Development considerations</AnchorLink>
+
+</AnchorLinks>
+
+## What Carbon provides
+
+Carbon already incorporates accessibility into the AI label component.
+
+### Keyboard interactions
+
+AI labels use the AI icon for the trigger button. These buttons are in the tab
+order an d are activated by pressing `Enter` or `Space`. The activation toggles
+the popover open and closed, and focus remains on the trigger.
+
+When the popover contains interactive elements, pressing `Tab` will move focus
+to the first component in the popover. When the popover only has non-interactive
+text, or when the focus is on the last component in the popover, pressing `Tab`
+will close the popover and move focus to the next tab stop on the page. Pressing
+`Esc` also closes an open popover and returns focus to the trigger if the focus
+is inside the popover.
+
+<Row>
+<Column colLg={12}>
+
+![Diagram of AI label keyboard interaction](images/ai-label-accessibility-1.png)
+
+<Caption>
+  The AI label icon button that triggers the popover is in the page tab order,
+  as are interactive elements inside an open popover.
+</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={12}>
+
+![Diagram of AI label keyboard interaction](images/ai-label-accessibility-2.png)
+
+<Caption>
+  AI explainability popovers appear when the AI label icon button is activated
+  and disappears by activating the icon again, pressing Esc, or tabbing away
+  from the popover.
+</Caption>
+
+</Column>
+</Row>
+
+## Development considerations
+
+Keep these considerations in mind if you are modifying Carbon or creating a
+custom component.
+
+- The icon button has `aria-label="AI - Show information"`.
+- The button uses `aria-expanded` to set toggletip visibility and
+  `aria-controls` to handle navigation to the content.

src/pages/components/ai-label/style.mdx

@@ -111,10 +111,11 @@ structure, and sizes.
 
 ### Default structure
 
-| Element | Property | Value    | Spacing token |
-| ------- | -------- | -------- | ------------- |
-| Button  | border   | 1px      | –             |
-| Text    | padding  | centered | –             |
+| Element | Property | Value                                                 | Spacing token |
+| ------- | -------- | ----------------------------------------------------- | ------------- |
+| Button  | border   | 1px                                                   | –             |
+|         | height   | See [sizes](/components/ai-label/style#default-sizes) | –             |
+| Text    | padding  | centered                                              | –             |
 
 <div className="image--fixed">
 
@@ -128,17 +129,24 @@ structure, and sizes.
 
 ### Inline structure
 
-| Element     | Property                    | px/rem | Spacing token |
-| ----------- | --------------------------- | ------ | ------------- |
-| Text        | padding-left                | 4px    | `$spacing-02` |
-| Button      | border                      | 1px    | –             |
-|             | padding-left, padding-right | 4px    | `$spacing-02` |
-| Button (sm) | height                      | 16px   | –             |
-|             | dot                         | 4px    | –             |
-| Button (md) | height                      | 18px   | –             |
-|             | dot                         | 4px    | –             |
-| Button (lg) | height                      | 22px   | –             |
-|             | dot                         | 8px    | –             |
+| Element     | Property                    | px/rem                                               | Spacing token |
+| ----------- | --------------------------- | ---------------------------------------------------- | ------------- |
+| Text        | padding-left                | 4px                                                  | `$spacing-02` |
+| Button      | border                      | 1px                                                  | –             |
+|             | padding-left, padding-right | 4px                                                  | `$spacing-02` |
+|             | height                      | See [sizes](/components/ai-label/style#inline-sizes) | –             |
+| Dot (sm-md) | height, width               | 4px                                                  | –             |
+| Dot (lg)    | height, width               | 8px                                                  | –             |
+
+<div className="image--fixed">
+
+![Structure of inline AI labels](images/style-ai-label-structure-inline.png)
+
+</div>
+
+<Caption>
+  Recommended structure and spacing measurements for inline AI label | px / rem
+</Caption>
 
 ### Explainability popover structure
 
@@ -149,12 +157,13 @@ structure, and sizes.
 
 <div className="image--fixed">
 
-![Structure measurements for default accordion alignment](images/accordion-style-4.png)
+![Structure of the explainability popover](images/style-ai-label-explainability-structure.png)
 
 </div>
 
 <Caption>
-  Structure measurements for default accordion alignment. | px / rem
+  Recommended structure and spacing measurements for the explainability popover
+  | px / rem
 </Caption>
 
 ## Sizes
@@ -175,6 +184,6 @@ structure, and sizes.
 
 | Inline size | Height (px/rem) |
 | ----------- | --------------- |
-| Small (sm)  | 12 / 0.75       |
-| Medium (md) | 14 / 0.875      |
-| Large (lg)  | 16 / 1          |
+| Small (sm)  | 16 / 1          |
+| Medium (md) | 18 / 1.125      |
+| Large (lg)  | 22 / 1.375      |

src/pages/components/ai-label/usage.mdx

@@ -174,9 +174,9 @@ also has a 14px font.
 
 | Inline size | Height (px/rem) | Use case              |
 | ----------- | --------------- | --------------------- |
-| Small (sm)  | 12 / 0.75       | Paired with 12px type |
-| Medium (md) | 14 / 0.875      | Paired with 14px type |
-| Large (lg)  | 16 / 1          | Paired with 16px type |
+| Small (sm)  | 16 / 1          | Paired with 12px type |
+| Medium (md) | 18 / 1.125      | Paired with 14px type |
+| Large (lg)  | 22 / 1.375      | Paired with 16px type |
 
 <Row>
 <Column colLg={8}>
@@ -399,7 +399,7 @@ pattern on Design for AI.
 
 AI label has three interactive states: **enabled**, **hover**, and **focus**.
 The AI label should never be disabled as part of a disabled or read-only state.
-Learn more about states on the [Style](/components/ai-label/style) tab.
+Learn more about states on the [style](/components/ai-label/style) tab.
 
 <Row>
 <Column colLg={8}>
@@ -425,12 +425,6 @@ without any additional external coverage, such as in a ghost button.
 </Column>
 </Row>
 
-### Keyboard navigation
-
-The AI label is reachable by `Tab` and opens the explainability popover with
-`Enter`. Press `Esc` or `Tab` away to close the popover. When AI is present in
-the input an additional tab stop is added to reach the AI label.
-
 ### Explainability popover
 
 The popover is the first layer of explainability that is accessed by clicking
@@ -450,7 +444,9 @@ AI needs to be explained in your experience.
 
 The AI label is the trigger that opens explainability popover. The interaction
 works like a toggletip where the popover remains open until the user clicks or
-tabs away from the AI label.
+tabs away from the AI label. For a details on the keyboard interactions of the
+explainability popover, see the
+[accessibility](/components/ai-label/accessibility#keyboard-interactions) tab.
 
 #### Popover orientation