fix(Dropdown): make ariaHaspopupValue opt-in, no aria-haspopup by default

Dropdown stamped aria-haspopup="true" on every trigger, advertising
menu semantics on disclosure-style popups. Allyant (HUB 366, WCAG
4.1.2) flagged this sitewide; QA rejected keeping the attribute with
value "menu" and only accepts removal. Consumers that implement a
complete ARIA popup pattern can still opt in by passing a value.

Author: agupta-eightfold

src/components/Dropdown/Dropdown.test.tsx

@@ -256,7 +256,11 @@ const ComplexDropdownWithoutAriaHaspopupComponent = (): JSX.Element => {
   return (
     <Dropdown {...dropdownProps} ariaRef={buttonRef} ariaHaspopupValue={null}>
       <div>
-        <Button ref={buttonRef} data-testid="test-button-id" text="Test button" />
+        <Button
+          ref={buttonRef}
+          data-testid="test-button-id"
+          text="Test button"
+        />
       </div>
     </Dropdown>
   );
@@ -269,7 +273,28 @@ const ComplexDropdownWithCustomAriaHaspopupComponent = (): JSX.Element => {
   return (
     <Dropdown {...dropdownProps} ariaRef={buttonRef} ariaHaspopupValue="dialog">
       <div>
-        <Button ref={buttonRef} data-testid="test-button-id" text="Test button" />
+        <Button
+          ref={buttonRef}
+          data-testid="test-button-id"
+          text="Test button"
+        />
+      </div>
+    </Dropdown>
+  );
+};
+
+const ComplexDropdownDefaultAriaHaspopupComponent = (): JSX.Element => {
+  const buttonRef: React.MutableRefObject<HTMLButtonElement> =
+    useRef<HTMLButtonElement>(null);
+
+  return (
+    <Dropdown {...dropdownProps} ariaRef={buttonRef}>
+      <div>
+        <Button
+          ref={buttonRef}
+          data-testid="test-button-id"
+          text="Test button"
+        />
       </div>
     </Dropdown>
   );
@@ -975,6 +1000,26 @@ describe('Dropdown', () => {
     expect(referenceElement.getAttribute('aria-haspopup')).toBe('dialog');
   });
 
+  test('Should not set aria-haspopup by default (opt-in only) on the cloned reference element', async () => {
+    const { getByTestId } = render(<DropdownComponent />);
+    const referenceElement = getByTestId('dropdown-reference');
+
+    expect(referenceElement.getAttribute('aria-expanded')).toBe('false');
+    expect(referenceElement.getAttribute('aria-controls')).toBeTruthy();
+    expect(referenceElement.hasAttribute('aria-haspopup')).toBe(false);
+  });
+
+  test('Should not set aria-haspopup by default (opt-in only) on the ariaRef reference element', async () => {
+    const { getByTestId } = render(
+      <ComplexDropdownDefaultAriaHaspopupComponent />
+    );
+    const referenceElement = getByTestId('test-button-id');
+
+    expect(referenceElement.getAttribute('aria-expanded')).toBe('false');
+    expect(referenceElement.getAttribute('aria-controls')).toBeTruthy();
+    expect(referenceElement.hasAttribute('aria-haspopup')).toBe(false);
+  });
+
   test('Should open normally with disableAutoFlip set', async () => {
     const { container, getByTestId } = render(
       <Dropdown {...dropdownProps} disableAutoFlip>

src/components/Dropdown/Dropdown.tsx

@@ -48,7 +48,7 @@ export const Dropdown: FC<DropdownProps> = React.memo(
     (
       {
         ariaRef,
-        ariaHaspopupValue = 'true',
+        ariaHaspopupValue,
         children,
         classNames,
         closeOnDropdownClick = true,
@@ -498,7 +498,11 @@ export const Dropdown: FC<DropdownProps> = React.memo(
           const currentRole = ariaRef.current.getAttribute('role');
           const currentAriaHaspopup =
             ariaRef.current.getAttribute('aria-haspopup');
-          if (currentRole !== 'combobox' && !currentAriaHaspopup && ariaHaspopupValue) {
+          if (
+            currentRole !== 'combobox' &&
+            !currentAriaHaspopup &&
+            ariaHaspopupValue
+          ) {
             ariaRef.current.setAttribute('aria-haspopup', ariaHaspopupValue);
           }
 

src/components/Dropdown/Dropdown.types.ts

@@ -19,10 +19,13 @@ export interface DropdownProps {
   /**
    * The value of the aria-haspopup attribute to be applied to the reference element, if not already set
    * and the role of the reference element is not 'combobox'.
-   * Pass `null` to omit the attribute entirely — the intended way to suppress it for
-   * disclosure-style triggers whose popup is not a menu/listbox/etc. (An empty string also
-   * omits it, but that is incidental; the type intentionally does not permit `false`.)
-   * @default 'true'
+   * aria-haspopup is opt-in: when omitted, the attribute is not rendered — the correct
+   * default for disclosure-style triggers (aria-expanded/aria-controls only).
+   * Only pass a value ('menu', 'listbox', 'tree', 'grid', 'dialog', or 'true') when the
+   * popup genuinely implements that ARIA pattern, including its full keyboard contract
+   * (for 'menu' this means e.g. `shouldCloseOnTab` and a popup whose container role
+   * matches the announced value).
+   * @default undefined
    */
   ariaHaspopupValue?: string | null;
   /**

src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`Dropdown Should render a dropdown button 1`] = `
       aria-controls="dropdown-"
       aria-disabled="false"
       aria-expanded="false"
-      aria-haspopup="true"
       class="button button-default button-medium pill-shape icon-right"
       data-testid="dropdown-reference"
       id="test-button-id"

src/components/Menu/__snapshots__/Menu.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`Menu Menu is large 1`] = `
       aria-controls="dropdown-"
       aria-disabled="false"
       aria-expanded="true"
-      aria-haspopup="true"
       class="button button-default button-medium pill-shape"
       id="dropdown-reference"
       role="button"
@@ -253,7 +252,6 @@ exports[`Menu Menu is medium 1`] = `
       aria-controls="dropdown-"
       aria-disabled="false"
       aria-expanded="true"
-      aria-haspopup="true"
       class="button button-default button-medium pill-shape"
       id="dropdown-reference"
       role="button"
@@ -497,7 +495,6 @@ exports[`Menu Menu is small 1`] = `
       aria-controls="dropdown-"
       aria-disabled="false"
       aria-expanded="true"
-      aria-haspopup="true"
       class="button button-default button-medium pill-shape"
       id="dropdown-reference"
       role="button"
@@ -741,7 +738,6 @@ exports[`Menu Should render a menu button 1`] = `
       aria-controls="dropdown-"
       aria-disabled="false"
       aria-expanded="false"
-      aria-haspopup="true"
       class="button button-default button-medium pill-shape"
       id="dropdown-reference"
       role="button"

src/components/Navbar/__snapshots__/Navbar.test.tsx.snap

@@ -30,7 +30,6 @@ exports[`Navbar Navbar matches custom theme 1`] = `
         <div
           aria-controls="dropdown-"
           aria-expanded="false"
-          aria-haspopup="true"
           class="reference-wrapper"
           id="dropdown-reference"
           role="button"
@@ -102,7 +101,6 @@ exports[`Navbar Renders without crashing 1`] = `
           <div
             aria-controls="dropdown-"
             aria-expanded="false"
-            aria-haspopup="true"
             class="reference-wrapper"
             id="dropdown-reference"
             role="button"

src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -335,7 +335,6 @@ exports[`Pagination Pagination should render with all elements 1`] = `
           aria-controls="dropdown-"
           aria-disabled="false"
           aria-expanded="false"
-          aria-haspopup="true"
           aria-label="Selected page size"
           class="pagination-button button button-neutral button-medium icon-right"
           id="dropdown-reference"

src/components/Skill/Tests/__snapshots__/SkillBlock.test.tsx.snap

@@ -4256,7 +4256,6 @@ exports[`SkillBlock Skill overflow item menu 1`] = `
                 aria-controls="dropdown-"
                 aria-disabled="false"
                 aria-expanded="true"
-                aria-haspopup="true"
                 class="button button button-neutral button-small round-shape icon-left"
                 data-testid="test-item-menu"
                 id="dropdown-reference"

src/components/Skill/Tests/__snapshots__/SkillTag.test.tsx.snap

@@ -1287,7 +1287,6 @@ exports[`SkillTag Skill tag has a dropdown 1`] = `
       aria-controls="dropdown-"
       aria-disabled="false"
       aria-expanded="true"
-      aria-haspopup="true"
       class="reference-wrapper skill tag bordered clickable white medium dropdown"
       data-testid="skill-tag-2"
       id="testSkill"