feat(Toolbar): add a11yConfig prop (#4611)

Closes #4609

Author: Lukas742

packages/main/src/components/Toolbar/OverflowPopover.tsx

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import type { Dispatch, FC, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
 import React, { cloneElement, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { ButtonDesign, PopoverPlacementType } from '../../enums/index.js';
+import { ButtonDesign, PopoverPlacementType, PopupAccessibleRole } from '../../enums/index.js';
 import { OverflowPopoverContext } from '../../internal/OverflowPopoverContext.js';
 import { useCanRenderPortal } from '../../internal/ssr.js';
 import { stopPropagation } from '../../internal/stopPropagation.js';
@@ -16,6 +16,7 @@ import type {
   ToggleButtonPropTypes
 } from '../../webComponents/index.js';
 import { Popover, ToggleButton } from '../../webComponents/index.js';
+import type { ToolbarPropTypes } from './index.js';
 
 interface OverflowPopoverProps {
   lastVisibleIndex: number;
@@ -28,6 +29,7 @@ interface OverflowPopoverProps {
   overflowPopoverRef?: Ref<PopoverDomRef>;
   overflowButton?: ReactElement<ToggleButtonPropTypes> | ReactElement<ButtonPropTypes>;
   setIsMounted: Dispatch<SetStateAction<boolean>>;
+  a11yConfig?: ToolbarPropTypes['a11yConfig'];
 }
 
 const isPhone = Device.isPhone();
@@ -43,7 +45,8 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
     showMoreText,
     overflowButton,
     overflowPopoverRef,
-    setIsMounted
+    setIsMounted,
+    a11yConfig
   } = props;
   const [pressed, setPressed] = useState(false);
   const toggleBtnRef = useRef<ToggleButtonDomRef>(null);
@@ -106,6 +109,13 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
 
   const canRenderPortal = useCanRenderPortal();
 
+  const accessibleRole = (() => {
+    if (a11yConfig?.overflowPopover?.contentRole) {
+      return PopupAccessibleRole.None;
+    }
+    return a11yConfig?.overflowPopover?.role;
+  })();
+
   return (
     <OverflowPopoverContext.Provider value={{ inPopover: true }}>
       {overflowButton ? (
@@ -134,8 +144,14 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
             onBeforeOpen={handleBeforeOpen}
             onAfterOpen={handleAfterOpen}
             hideArrow
+            accessibleRole={accessibleRole}
           >
-            <div className={classes.popoverContent} ref={overflowContentRef}>
+            <div
+              className={classes.popoverContent}
+              ref={overflowContentRef}
+              role={a11yConfig?.overflowPopover?.contentRole}
+              data-component-name="ToolbarOverflowPopoverContent"
+            >
               {children.map((item, index) => {
                 if (index > lastVisibleIndex && index > numberOfAlwaysVisibleItems - 1) {
                   // @ts-expect-error: if props is not defined, it doesn't have an id (is not a ReactElement)

packages/main/src/components/Toolbar/Toolbar.cy.tsx

@@ -13,7 +13,8 @@ import {
   ToolbarSeparator,
   ToolbarSpacer,
   ToolbarStyle,
-  OverflowToolbarToggleButton
+  OverflowToolbarToggleButton,
+  PopupAccessibleRole
 } from '../..';
 import { ButtonDesign, ToolbarDesign } from '../../enums/index.js';
 import { cssVarToRgb, cypressPassThroughTestsFactory, mountWithCustomTagName } from '@/cypress/support/utils';
@@ -582,6 +583,38 @@ describe('Toolbar', () => {
     cy.get('#3-overflow').should('have.length', 1);
   });
 
+  it('a11y - role & contentRole', () => {
+    cy.viewport(100, 500);
+    cy.mount(
+      <Toolbar a11yConfig={{ overflowPopover: { role: PopupAccessibleRole.AlertDialog } }}>
+        <div>Text1</div>
+        <div>Text2</div>
+        <Button>Text4</Button>
+      </Toolbar>
+    );
+    cy.get('section[role="alertdialog"]').should('exist');
+
+    cy.mount(
+      <Toolbar a11yConfig={{ overflowPopover: { contentRole: 'menu' } }}>
+        <div>Text1</div>
+        <div>Text2</div>
+        <Button>Text4</Button>
+      </Toolbar>
+    );
+    cy.get('section').should('not.have.attr', 'role');
+    cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu');
+
+    cy.mount(
+      <Toolbar a11yConfig={{ overflowPopover: { role: PopupAccessibleRole.AlertDialog, contentRole: 'menu' } }}>
+        <div>Text1</div>
+        <div>Text2</div>
+        <Button>Text4</Button>
+      </Toolbar>
+    );
+    cy.get('section').should('not.have.attr', 'role');
+    cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu');
+  });
+
   mountWithCustomTagName(Toolbar);
   cypressPassThroughTestsFactory(Toolbar);
 });

packages/main/src/components/Toolbar/index.tsx

@@ -8,7 +8,7 @@ import {
   useSyncRef
 } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ElementType, ReactElement, ReactNode, Ref, RefObject } from 'react';
+import type { ElementType, HTMLAttributes, ReactElement, ReactNode, Ref, RefObject } from 'react';
 import React, {
   Children,
   cloneElement,
@@ -21,6 +21,7 @@ import React, {
   useState
 } from 'react';
 import { createUseStyles } from 'react-jss';
+import type { PopupAccessibleRole } from '../../enums/index.js';
 import { ToolbarDesign, ToolbarStyle } from '../../enums/index.js';
 import { SHOW_MORE } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../interfaces/index.js';
@@ -87,6 +88,25 @@ export interface ToolbarPropTypes extends Omit<CommonProps, 'onClick' | 'childre
    * This can be useful, for example, when wanting to close the popover on click or selection of a child element.
    */
   overflowPopoverRef?: Ref<PopoverDomRef>;
+  /**
+   * Defines internally used a11y properties.
+   *
+   * __Note:__ When setting `contentRole` of the `overflowPopover`, the `role` is set to `"None"`.
+   */
+  a11yConfig?: {
+    overflowPopover?: {
+      /**
+       * Defines the `accessibleRole` of the overflow `Popover`.
+       */
+      role?: PopupAccessibleRole | keyof typeof PopupAccessibleRole;
+      /**
+       * Defines the `role` of the content div inside the overflow `Popover`.
+       *
+       * __Note:__ When setting `contentRole`, the `role` is set to `"None"`.
+       */
+      contentRole?: HTMLAttributes<HTMLDivElement>['role'];
+    };
+  };
   /**
    * Fired if the `active` prop is set to true and the user clicks or presses Enter/Space on the `Toolbar`.
    */
@@ -127,6 +147,7 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
     onOverflowChange,
     overflowPopoverRef,
     overflowButton,
+    a11yConfig,
     ...rest
   } = props;
 
@@ -357,6 +378,7 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
             showMoreText={showMoreText}
             overflowButton={overflowButton}
             setIsMounted={setIsPopoverMounted}
+            a11yConfig={a11yConfig}
           >
             {flatChildren}
           </OverflowPopover>