[terra-collapsible-menu-view] Removes dialog role for menu and sets aria-haspopup

packages/terra-collapsible-menu-view/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Set aria-haspopup value to boolean.
+
 ## 6.97.0 - (April 4, 2024)
 
 * Changed

packages/terra-collapsible-menu-view/src/CollapsibleMenuViewItem.jsx

@@ -149,7 +149,7 @@ class CollapsibleMenuViewItem extends React.Component {
           button={(
             <Button
               {...attributes}
-              aria-haspopup="dialog"
+              aria-haspopup
               icon={icon}
               text={text}
               isReversed={isReversed}

packages/terra-collapsible-menu-view/tests/jest/CollapsibleMenuViewItem.test.jsx

@@ -65,7 +65,7 @@ describe('CollapsibleMenuViewItem', () => {
         <CollapsibleMenuViewItem text="Default Item 2" key="defaultItem2" />,
       ]}
     />);
-    expect(wrapper.find('Button').prop('aria-haspopup')).toEqual('dialog');
+    expect(wrapper.find('Button').prop('aria-haspopup')).toBe(true);
   });
 
   it('should render a disabled button when isDisabled is set', () => {

packages/terra-collapsible-menu-view/tests/jest/__snapshots__/CollapsibleMenuViewItem.test.jsx.snap

@@ -680,7 +680,7 @@ exports[`CollapsibleMenuViewItem should render a menu when subMenuItems are give
 <CollapsibleMenu
   button={
     <Button
-      aria-haspopup="dialog"
+      aria-haspopup={true}
       intl={
         Object {
           "defaultFormats": Object {},

packages/terra-menu/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Removed dialog role to fix axe a11y violation.
+
 ## 6.91.0 - (April 4, 2024)
 
 * Changed

packages/terra-menu/src/Menu.jsx

@@ -199,6 +199,7 @@ class Menu extends React.Component {
         hookshotPostionFixed
         isHeaderDisabled
         isContentFocusDisabled
+        popupContentRole={null}
       >
         {slides}
       </Popup>

packages/terra-menu/src/_MenuContent.jsx

@@ -451,13 +451,12 @@ class MenuContent extends React.Component {
     const contentWidth = this.props.isWidthBounded ? undefined : this.props.fixedWidth;
     /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, react/forbid-dom-props */
     return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         ref={this.handleContainerRef}
         className={contentClass}
         style={{ height: menuHeight, width: contentWidth, position: contentPosition }}
         tabIndex="-1"
-        aria-modal="true"
-        role="dialog"
         onKeyDown={this.onKeyDown}
         // stop event propagation in case Menu oppened inside the layout component that has its own event handler for that event.
         // added for Menu Button support in terra-compact-interactive-list.

packages/terra-menu/tests/jest/__snapshots__/Menu.test.jsx.snap

@@ -82,7 +82,7 @@ exports[`Menu correctly applies the theme context className 1`] = `
       isHeaderDisabled={true}
       isOpen={true}
       onRequestClose={[MockFunction]}
-      popupContentRole="dialog"
+      popupContentRole={null}
       targetRef={
         [MockFunction] {
           "calls": Array [
@@ -203,17 +203,14 @@ exports[`Menu correctly applies the theme context className 1`] = `
                   <div
                     class="content content orion-fusion-theme fixed-position"
                     data-terra-popup-content="true"
-                    role="dialog"
                   >
                     <div
                       class="inner"
                       data-terra-popup-automatic-height="true"
                       style="width: 240px;"
                     >
                       <div
-                        aria-modal="true"
                         class="content orion-fusion-theme"
-                        role="dialog"
                         style="position: static;"
                         tabindex="-1"
                       >
@@ -295,7 +292,7 @@ exports[`Menu correctly applies the theme context className 1`] = `
               onContentResize={[Function]}
               onRequestClose={[Function]}
               onResize={[Function]}
-              popupContentRole="dialog"
+              popupContentRole={null}
               refCallback={[Function]}
             >
               <FocusTrap
@@ -328,7 +325,7 @@ exports[`Menu correctly applies the theme context className 1`] = `
                     outsideClickIgnoreClass="ignore-react-onclickoutside"
                     preventDefault={false}
                     refCallback={[Function]}
-                    role="dialog"
+                    role={null}
                     stopPropagation={false}
                     tabIndex={null}
                   >
@@ -350,14 +347,14 @@ exports[`Menu correctly applies the theme context className 1`] = `
                       outsideClickIgnoreClass="ignore-react-onclickoutside"
                       preventDefault={false}
                       refCallback={[Function]}
-                      role="dialog"
+                      role={null}
                       stopPropagation={false}
                       tabIndex={null}
                     >
                       <div
                         className="content content orion-fusion-theme fixed-position"
                         data-terra-popup-content={true}
-                        role="dialog"
+                        role={null}
                         tabIndex={null}
                       >
                         <div
@@ -426,11 +423,9 @@ exports[`Menu correctly applies the theme context className 1`] = `
                               title=""
                             >
                               <div
-                                aria-modal="true"
                                 className="content orion-fusion-theme"
                                 onFocus={[Function]}
                                 onKeyDown={[Function]}
-                                role="dialog"
                                 style={
                                   Object {
                                     "height": undefined,