updated as per review comments

cerner · Oct 26, 2023 · 3768685 · 3768685
1 parent 7cb2fd3
commit 3768685
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/terra-dropdown-button/src/SplitButton.jsx b/packages/terra-dropdown-button/src/SplitButton.jsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import classNamesBind from 'classnames/bind';
 import ThemeContext from 'terra-theme-context';
 import * as KeyCode from 'keycode-js';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { v4 as uuidv4 } from 'uuid';
 import { injectIntl } from 'react-intl';
 import DropdownButtonBase from './_DropdownButtonBase';
 import styles from './SplitButton.module.scss';
@@ -242,6 +244,9 @@ class SplitButton extends React.Component {
     const customLabel = (selectText) ? `${selectText}, ${selectedLabel}, ${caretLabel}` : caretLabel;
     buttonAriaLabel = `${customLabel}${buttonAriaLabel ? `, ${buttonAriaLabel}` : ''}`;
 
+    const dropDownMenuId = uuidv4();
+    const dropDownMenuListId = `dropdown-menu-list-${dropDownMenuId}`;
+
     return (
       <DropdownButtonBase
         {...customProps}
@@ -254,6 +259,7 @@ class SplitButton extends React.Component {
         buttonRef={this.getButtonNode}
         refCallback={this.setListNode}
         getSelectedOptionText={this.getSelectedOptionText}
+        menuId={dropDownMenuListId}
       >
         <button
           type="button"
@@ -282,6 +288,7 @@ class SplitButton extends React.Component {
           aria-label={buttonAriaLabel}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
+          aria-controls={dropDownMenuListId}
           ref={this.setButtonNode}
         >
           <span className={cx('caret-icon')} />

diff --git a/packages/terra-dropdown-button/tests/jest/__snapshots__/SplitButton.test.jsx.snap b/packages/terra-dropdown-button/tests/jest/__snapshots__/SplitButton.test.jsx.snap
@@ -88,11 +88,13 @@ exports[`Dropdown Button correctly applies the theme context className 1`] = `
             onSelect={[Function]}
           />
         }
+        menuId="dropdown-menu-list-a26b0cae-a1f1-4f50-8298-e13941b7725e"
         refCallback={[Function]}
         requestClose={[Function]}
       >
         <div
           className="dropdown-button-base orion-fusion-theme"
+          menuId="dropdown-menu-list-a26b0cae-a1f1-4f50-8298-e13941b7725e"
         >
           <button
             aria-disabled={false}
@@ -106,6 +108,7 @@ exports[`Dropdown Button correctly applies the theme context className 1`] = `
             Primary Option
           </button>
           <button
+            aria-controls="dropdown-menu-list-a26b0cae-a1f1-4f50-8298-e13941b7725e"
             aria-disabled={false}
             aria-expanded={false}
             aria-haspopup="menu"
@@ -126,6 +129,7 @@ exports[`Dropdown Button correctly applies the theme context className 1`] = `
             buttonRef={[Function]}
             getSelectedOptionText={[Function]}
             isOpen={false}
+            menuId="dropdown-menu-list-a26b0cae-a1f1-4f50-8298-e13941b7725e"
             refCallback={[Function]}
             requestClose={[Function]}
             targetRef={[Function]}
@@ -183,6 +187,7 @@ exports[`Dropdown Button should render a block split type 1`] = `
       onSelect={[Function]}
     />
   }
+  menuId="dropdown-menu-list-0bd925ed-5833-4b26-a588-86005020f01c"
   refCallback={[Function]}
   requestClose={[Function]}
 >
@@ -198,6 +203,7 @@ exports[`Dropdown Button should render a block split type 1`] = `
     Primary Option
   </button>
   <button
+    aria-controls="dropdown-menu-list-0bd925ed-5833-4b26-a588-86005020f01c"
     aria-disabled={false}
     aria-expanded={false}
     aria-haspopup="menu"
@@ -231,6 +237,7 @@ exports[`Dropdown Button should render a compact split type 1`] = `
       onSelect={[Function]}
     />
   }
+  menuId="dropdown-menu-list-15cbe940-a9d1-4723-9eb2-efeb2e3d1549"
   refCallback={[Function]}
   requestClose={[Function]}
 >
@@ -246,6 +253,7 @@ exports[`Dropdown Button should render a compact split type 1`] = `
     Primary Option
   </button>
   <button
+    aria-controls="dropdown-menu-list-15cbe940-a9d1-4723-9eb2-efeb2e3d1549"
     aria-disabled={false}
     aria-expanded={false}
     aria-haspopup="menu"
@@ -279,6 +287,7 @@ exports[`Dropdown Button should render a default split type 1`] = `
       onSelect={[Function]}
     />
   }
+  menuId="dropdown-menu-list-6ffa3bd9-259e-4b37-8796-f301bde30fde"
   refCallback={[Function]}
   requestClose={[Function]}
 >
@@ -294,6 +303,7 @@ exports[`Dropdown Button should render a default split type 1`] = `
     Primary Option
   </button>
   <button
+    aria-controls="dropdown-menu-list-6ffa3bd9-259e-4b37-8796-f301bde30fde"
     aria-disabled={false}
     aria-expanded={false}
     aria-haspopup="menu"
@@ -328,6 +338,7 @@ exports[`Dropdown Button should render a disabled split type 1`] = `
       onSelect={[Function]}
     />
   }
+  menuId="dropdown-menu-list-913a9a8d-da5b-4128-b212-dc2c1a13fe8b"
   refCallback={[Function]}
   requestClose={[Function]}
 >
@@ -343,6 +354,7 @@ exports[`Dropdown Button should render a disabled split type 1`] = `
     Primary Option
   </button>
   <button
+    aria-controls="dropdown-menu-list-913a9a8d-da5b-4128-b212-dc2c1a13fe8b"
     aria-disabled={false}
     aria-expanded={false}
     aria-haspopup="menu"
@@ -376,6 +388,7 @@ exports[`Dropdown Button should render a split type with custom attributes 1`] =
       onSelect={[Function]}
     />
   }
+  menuId="dropdown-menu-list-764ccb15-2cd4-42e0-8b7b-9bc97a14d481"
   other-custom-attribute="purple"
   refCallback={[Function]}
   requestClose={[Function]}
@@ -393,6 +406,7 @@ exports[`Dropdown Button should render a split type with custom attributes 1`] =
     Primary Option
   </button>
   <button
+    aria-controls="dropdown-menu-list-764ccb15-2cd4-42e0-8b7b-9bc97a14d481"
     aria-disabled={false}
     aria-expanded={false}
     aria-haspopup="menu"
@@ -436,6 +450,7 @@ exports[`Dropdown Button should render a split type with multiple children 1`] =
       />,
     ]
   }
+  menuId="dropdown-menu-list-5fe01b2e-4304-47ad-8f50-350cabf62ad9"
   refCallback={[Function]}
   requestClose={[Function]}
 >
@@ -451,6 +466,7 @@ exports[`Dropdown Button should render a split type with multiple children 1`] =
     Primary Option
   </button>
   <button
+    aria-controls="dropdown-menu-list-5fe01b2e-4304-47ad-8f50-350cabf62ad9"
     aria-disabled={false}
     aria-expanded={false}
     aria-haspopup="menu"
@@ -484,6 +500,7 @@ exports[`Dropdown Button should render an open split type 1`] = `
       onSelect={[Function]}
     />
   }
+  menuId="dropdown-menu-list-c040f777-2d96-4b92-ba29-5449900cb4ef"
   refCallback={[Function]}
   requestClose={[Function]}
 >
@@ -499,6 +516,7 @@ exports[`Dropdown Button should render an open split type 1`] = `
     Primary Option
   </button>
   <button
+    aria-controls="dropdown-menu-list-c040f777-2d96-4b92-ba29-5449900cb4ef"
     aria-disabled={false}
     aria-expanded={false}
     aria-haspopup="menu"