diff --git a/src/pages/components/popover/accessibility.mdx b/src/pages/components/popover/accessibility.mdx new file mode 100644 index 00000000000..dc332089098 --- /dev/null +++ b/src/pages/components/popover/accessibility.mdx @@ -0,0 +1,80 @@ +--- +title: Popover +description: + No accessibility annotations are needed for popover, but keep these + considerations in mind if you are modifying Carbon or creating a custom + component. +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] +--- + +import A11yStatus from 'components/A11yStatus'; + +import { Popover } from '@carbon/react'; + + + +No accessibility annotations are needed for popover, but keep these +considerations in mind if you are modifying Carbon or creating a custom +component. + + + + + What Carbon provides + Development considerations + + + + +## What Carbon provides + +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via the keyboard. Carbon incorporates many +other accessibility considerations, some of which are described below. + +### Keyboard interactions + +Popovers use an icon button for the trigger. These buttons are in the tab order +and 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. + + + + +![The icon button trigger and interactive elements inside of the popover are in the page tab order.](images/popover-a11y-1.png) + + + The icon button trigger and interactive elements inside of the popover are in + the page tab order. + + + + + + + + +![Use Space or Enter to open and close the popover, and use Esc or Tab on the last component to dismiss it.](images/popover-a11y-2.png) + + + Use Space or Enter to open and close the popover, and use Esc or Tab on the + last component to dismiss it. + + + + + +## Development considerations + +Keep these considerations in mind if you are modifying Carbon or creating a +custom component. + +- The icon button has an `aria-label` that defines or describes what the icon + is. +- The button uses `aria-expanded` to set popover visibility and `aria-controls` + to handle navigation to the content. diff --git a/src/pages/components/popover/code.mdx b/src/pages/components/popover/code.mdx index 3e48451b1fa..2dfd9540cbd 100644 --- a/src/pages/components/popover/code.mdx +++ b/src/pages/components/popover/code.mdx @@ -2,7 +2,7 @@ title: Popover description: A popover is a layer that pops up over all other elements on a page. -tabs: ['Usage', 'Style', 'Code'] +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- diff --git a/src/pages/components/popover/images/popover-a11y-1.png b/src/pages/components/popover/images/popover-a11y-1.png new file mode 100644 index 00000000000..0b52f88d074 Binary files /dev/null and b/src/pages/components/popover/images/popover-a11y-1.png differ diff --git a/src/pages/components/popover/images/popover-a11y-2.png b/src/pages/components/popover/images/popover-a11y-2.png new file mode 100644 index 00000000000..052927a1e29 Binary files /dev/null and b/src/pages/components/popover/images/popover-a11y-2.png differ diff --git a/src/pages/components/popover/style.mdx b/src/pages/components/popover/style.mdx index e4821f2411e..5167b0339e1 100644 --- a/src/pages/components/popover/style.mdx +++ b/src/pages/components/popover/style.mdx @@ -2,7 +2,7 @@ title: Popover description: A popover is a layer that pops up over all other elements on a page. -tabs: ['Usage', 'Style', 'Code'] +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- ## Color diff --git a/src/pages/components/popover/usage.mdx b/src/pages/components/popover/usage.mdx index 8fc90cde263..bfc277ba9b5 100644 --- a/src/pages/components/popover/usage.mdx +++ b/src/pages/components/popover/usage.mdx @@ -2,7 +2,7 @@ title: Popover description: A popover is a layer that pops up over all other elements on a page. -tabs: ['Usage', 'Style', 'Code'] +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- import A11yStatus from 'components/A11yStatus';