[EuiContextMenuItem] Added an example aria-current attribute and do…

…cumentation for a11y (#7153) Co-authored-by: Cee Chen <[email protected]>
elastic · Sep 11, 2023 · 7cf33bd · 7cf33bd
1 parent 7bda32c
commit 7cf33bd
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { GuideSectionTypes } from '../../components';
 
 import {
+  EuiCallOut,
   EuiCode,
   EuiContextMenu,
   EuiContextMenuItem,
@@ -122,11 +123,24 @@ export const ContextMenuExample = {
         },
       ],
       text: (
-        <p>
-          Use <strong>EuiContextMenuPanel</strong> for simple, non-nested
-          context menus. The below pagination example has no nesting and no
-          title.
-        </p>
+        <>
+          <p>
+            Use <strong>EuiContextMenuPanel</strong> for simple, non-nested
+            context menus. The below pagination example has no nesting and no
+            title.
+          </p>
+          <EuiCallOut
+            iconType="accessibility"
+            title="The selected context menu item should have an aria-current attribute"
+          >
+            <p>
+              <strong>aria-current</strong> tells screen readers which item is
+              selected. Add an <EuiCode>aria-current="true"</EuiCode> attribute
+              to <EuiCode>EuiContextMenuItem</EuiCode> when a context menu item
+              is clicked or receives a keypress.
+            </p>
+          </EuiCallOut>
+        </>
       ),
       snippet: singlePanelSnippet,
       demo: <SinglePanel />,

diff --git a/src-docs/src/views/context_menu/single_panel.js b/src-docs/src/views/context_menu/single_panel.js
@@ -24,8 +24,10 @@ export default () => {
     setPopover(false);
   };
 
-  const getIconType = (size) => {
-    return size === rowSize ? 'check' : 'empty';
+  const isSelectedProps = (size: number) => {
+    return size === rowSize
+      ? { icon: 'check', 'aria-current': 'true' }
+      : { icon: 'empty', 'aria-current': undefined };
   };
 
   const button = (
@@ -41,8 +43,8 @@ export default () => {
 
   const items = [
     <EuiContextMenuItem
+      {...isSelectedProps(10)}
       key="10 rows"
-      icon={getIconType(10)}
       onClick={() => {
         closePopover();
         setRowSize(10);
@@ -51,8 +53,8 @@ export default () => {
       10 rows
     </EuiContextMenuItem>,
     <EuiContextMenuItem
+      {...isSelectedProps(20)}
       key="20 rows"
-      icon={getIconType(20)}
       onClick={() => {
         closePopover();
         setRowSize(20);
@@ -61,8 +63,8 @@ export default () => {
       20 rows
     </EuiContextMenuItem>,
     <EuiContextMenuItem
+      {...isSelectedProps(50)}
       key="50 rows"
-      icon={getIconType(50)}
       onClick={() => {
         closePopover();
         setRowSize(50);
@@ -71,8 +73,8 @@ export default () => {
       50 rows
     </EuiContextMenuItem>,
     <EuiContextMenuItem
+      {...isSelectedProps(100)}
       key="100 rows"
-      icon={getIconType(100)}
       onClick={() => {
         closePopover();
         setRowSize(100);