[terra-dropdown]Added aria-haspoup and aria-controls attribute

packages/terra-core-docs/CHANGELOG.md

@@ -21,6 +21,7 @@
 
 * Updated
   * Updated `terra-alert` documentation for custom titles.
+  * Updated `terra-dropdown-button` documentation for testing uuid details.
   * Updated exisiting examples upto a11y standards
 
 * Fixed

packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/About.1.doc.mdx

@@ -37,6 +37,11 @@ This component requires the following peer dependencies be installed in your app
 
 <!-- AUTO-GENERATED-CONTENT:END -->
 
+## Implementation Notes:
+The Form-Field component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.
+
+[1]: https://engineering.cerner.com/terra-ui/application/terra-application/components/application-base
+
 ## Usage
 
 ```jsx
@@ -62,3 +67,26 @@ import DropdownButton, { Item } from 'terra-dropdown-button';
 
 ## Item Props
 <ItemPropsTable />
+
+## Testing
+
+Terra Dropdown button uses `uuid` which changes the component's description id dynamically. To mock the return value with the Jest testing library, `jest.spyOn` can be used.
+
+If Enzyme `shallow` is being used for the tests then the mock may not be required depending on the depth of the returned wrapper. However, if `mount` is used then `uuid` should be mocked as shown below:
+
+```js
+import { v4 as uuidv4 } from 'uuid';
+
+let mockSpyUuid;
+
+// using a variable may result in failures. For best results, mock return value.
+beforeAll(() => {
+  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
+});
+
+// restore the mock
+afterAll(() => {
+  mockSpyUuid.mockRestore();
+});
+
+```

packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/SplitButton.2.doc.mdx

@@ -25,7 +25,7 @@ Children must be the `Item` subcomponent for proper functionality and appearance
 ## Implementation Notes:
 The SplitButton component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.
 
-[1]: https://engineering.cerner.com/terra-core/components/terra-base/base/base
+[1]: https://engineering.cerner.com/terra-ui/application/terra-application/components/application-base
 
 ## Usage
 
@@ -51,4 +51,27 @@ import { Item, SplitButton } from 'terra-dropdown-button';
 <SplitButtonPropsTable />
 
 ## Item Props
-<ItemPropsTable />
+<ItemPropsTable />
+
+## Testing
+
+Terra Split Button uses `uuid` which changes the component's description id dynamically. To mock the return value with the Jest testing library, `jest.spyOn` can be used.
+
+If Enzyme `shallow` is being used for the tests then the mock may not be required depending on the depth of the returned wrapper. However, if `mount` is used then `uuid` should be mocked as shown below:
+
+```js
+import { v4 as uuidv4 } from 'uuid';
+
+let mockSpyUuid;
+
+// using a variable may result in failures. For best results, mock return value.
+beforeAll(() => {
+  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
+});
+
+// restore the mock
+afterAll(() => {
+  mockSpyUuid.mockRestore();
+});
+
+```

packages/terra-dropdown-button/CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
 ## Unreleased
+* Added
+  * Added 'aria-haspoup' and 'aria-controls' attributes for dropdown button.
 
 ## 1.36.0 - (August 8, 2023)
 

packages/terra-dropdown-button/package.json

@@ -33,7 +33,8 @@
     "prop-types": "^15.5.8",
     "terra-hookshot": "^5.0.0",
     "terra-mixins": "^1.40.0",
-    "terra-theme-context": "^1.0.0"
+    "terra-theme-context": "^1.0.0",
+    "uuid": "3.4.0"
   },
   "scripts": {
     "compile": "babel --root-mode upward src --out-dir lib --copy-files",

packages/terra-dropdown-button/src/DropdownButton.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 './DropdownButton.module.scss';
@@ -185,6 +187,14 @@ class DropdownButton extends React.Component {
     const customLabel = (selectText) ? `${selectText}, ${selectedLabel}, ${label}` : label;
     buttonAriaLabel = `${customLabel}${buttonAriaLabel ? `, ${buttonAriaLabel}` : ''}`;
 
+    const dropDownMenuId = uuidv4();
+    const dropDownMenuListId = `dropdown-menu-list-${dropDownMenuId}`;
+    let dropDownMenuButtonId = `dropdown-menu-button-${dropDownMenuId}`;
+    if (modifiedButtonAttrs && modifiedButtonAttrs.id) {
+      dropDownMenuButtonId = modifiedButtonAttrs.id;
+      delete modifiedButtonAttrs.id;
+    }
+
     return (
       <DropdownButtonBase
         {...customProps}
@@ -197,6 +207,8 @@ class DropdownButton extends React.Component {
         refCallback={this.setListNode}
         buttonRef={this.getButtonNode}
         getSelectedOptionText={this.getSelectedOptionText}
+        menuId={dropDownMenuListId}
+        buttonId={dropDownMenuButtonId}
       >
         <button
           {...modifiedButtonAttrs}
@@ -211,6 +223,9 @@ class DropdownButton extends React.Component {
           ref={this.setButtonNode}
           aria-expanded={isOpen}
           aria-label={buttonAriaLabel}
+          aria-haspopup="true"
+          id={dropDownMenuButtonId}
+          aria-controls={dropDownMenuListId}
           onBlur={this.handleBlur}
         >
           <span className={cx('dropdown-button-text')}>{label}</span>

packages/terra-dropdown-button/src/_Dropdown.jsx

@@ -41,9 +41,10 @@ const propTypes = {
 };
 
 const Dropdown = ({
-  requestClose, isOpen, targetRef, children, width, refCallback, buttonRef, getSelectedOptionText,
+  requestClose, isOpen, targetRef, children, width, refCallback, buttonRef, getSelectedOptionText, ...customProps
 }) => {
   const buttonFocused = useRef(false);
+  const { menuId, buttonId } = customProps;
   useEffect(() => {
     // added this change to bring focus back to button when dropdown list is closed.
     if (buttonFocused.current && buttonRef) {
@@ -76,6 +77,8 @@ const Dropdown = ({
             width={width}
             refCallback={refCallback}
             getSelectedOptionText={getSelectedOptionText}
+            menuId={menuId}
+            buttonId={buttonId}
           >
             {children}
           </DropdownList>

packages/terra-dropdown-button/src/_DropdownButtonBase.jsx

@@ -123,6 +123,8 @@ class DropdownButtonBase extends React.Component {
           buttonRef={buttonRef}
           refCallback={refCallback}
           getSelectedOptionText={getSelectedOptionText}
+          menuId={customProps.menuId}
+          buttonId={customProps.buttonId}
         >
           {items}
         </Dropdown>

packages/terra-dropdown-button/src/_DropdownList.jsx

@@ -206,6 +206,7 @@ class DropdownList extends React.Component {
     const {
       width,
       refCallback,
+      ...customProps
     } = this.props;
 
     const theme = this.context;
@@ -225,6 +226,8 @@ class DropdownList extends React.Component {
         onKeyDown={this.handleKeyDown}
         onKeyUp={this.handleKeyUp}
         role="menu"
+        id={customProps.menuId}
+        aria-labelledby={customProps.buttonId}
       >
         {this.cloneChildren()}
       </ul>

packages/terra-dropdown-button/tests/jest/DropdownButton.test.jsx

@@ -3,10 +3,21 @@ import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 import { IntlProvider } from 'react-intl';
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import { shallowWithIntl, mountWithIntl } from 'terra-enzyme-intl';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { v4 as uuidv4 } from 'uuid';
 import translationsFile from '../../translations/en.json';
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import DropdownButton, { Item, Variants } from '../../src/DropdownButton';
 
+let mockSpyUuid;
+beforeAll(() => {
+  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
+});
+
+afterAll(() => {
+  mockSpyUuid.mockRestore();
+});
+
 describe('Dropdown Button', () => {
   it('should render a default dropdown type', () => {
     const wrapper = shallowWithIntl(
@@ -87,11 +98,13 @@ describe('Dropdown Button', () => {
   it('correctly applies the theme context className', () => {
     const wrapper = mountWithIntl(
       <ThemeContextProvider theme={{ className: 'orion-fusion-theme' }}>
-        <DropdownButton label="Primary Option">
+        <DropdownButton label="Primary Option" id="dropDown">
           <Item label="1st Option" onSelect={() => {}} />
         </DropdownButton>
       </ThemeContextProvider>,
     );
+    const dropDownButtonId = wrapper.find('#dropDown');
+    expect(dropDownButtonId.exists()).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });
 

packages/terra-dropdown-button/tests/jest/__snapshots__/DropdownButton.test.jsx.snap

@@ -36,10 +36,12 @@ exports[`Dropdown Button correctly applies the theme context className 1`] = `
   }
 >
   <InjectIntl(DropdownButton)
+    id="dropDown"
     label="Primary Option"
   >
     <DropdownButton
       buttonAttrs={Object {}}
+      id="dropDown"
       intl={
         Object {
           "defaultFormats": Object {},
@@ -74,8 +76,10 @@ exports[`Dropdown Button correctly applies the theme context className 1`] = `
       variant="neutral"
     >
       <DropdownButtonBase
+        buttonId="dropdown-menu-button-00000000-0000-0000-0000-000000000000"
         buttonRef={[Function]}
         getSelectedOptionText={[Function]}
+        id="dropDown"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -86,18 +90,25 @@ exports[`Dropdown Button correctly applies the theme context className 1`] = `
             onSelect={[Function]}
           />
         }
+        menuId="dropdown-menu-list-00000000-0000-0000-0000-000000000000"
         refCallback={[Function]}
         requestClose={[Function]}
       >
         <div
+          buttonId="dropdown-menu-button-00000000-0000-0000-0000-000000000000"
           className="dropdown-button-base orion-fusion-theme"
+          id="dropDown"
+          menuId="dropdown-menu-list-00000000-0000-0000-0000-000000000000"
         >
           <button
+            aria-controls="dropdown-menu-list-00000000-0000-0000-0000-000000000000"
             aria-disabled={false}
             aria-expanded={false}
+            aria-haspopup="true"
             aria-label="Primary Option"
             className="dropdown-button neutral orion-fusion-theme"
             disabled={false}
+            id="dropdown-menu-button-00000000-0000-0000-0000-000000000000"
             onBlur={[Function]}
             onClick={[Function]}
             onKeyDown={[Function]}
@@ -114,9 +125,11 @@ exports[`Dropdown Button correctly applies the theme context className 1`] = `
             />
           </button>
           <Dropdown
+            buttonId="dropdown-menu-button-00000000-0000-0000-0000-000000000000"
             buttonRef={[Function]}
             getSelectedOptionText={[Function]}
             isOpen={false}
+            menuId="dropdown-menu-list-00000000-0000-0000-0000-000000000000"
             refCallback={[Function]}
             requestClose={[Function]}
             targetRef={[Function]}