feat(ObjectPage): extend accessibilityAttributes with expandButton (#7405)

Closes #7365

Author: Lukas742

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

@@ -1358,6 +1358,70 @@ describe('ObjectPage', () => {
     });
   });
 
+  it('accessibilityAttributes', () => {
+    cy.mount(
+      <ObjectPage data-testid="op" titleArea={DPTitle} headerArea={DPContent} footerArea={Footer}>
+        {OPContent}
+      </ObjectPage>,
+    );
+
+    cy.get('header').should('not.have.attr', 'role');
+    cy.get('header').should('have.attr', 'aria-roledescription', 'Object Page header');
+    cy.get('[data-component-name="ObjectPageAnchorBarExpandBtn"]').should(($el) => {
+      expect($el[0].accessibilityAttributes.expanded).to.equal(true);
+    });
+    cy.get('[data-component-name="ObjectPageAnchorBarExpandBtn"]').should(
+      'have.attr',
+      'accessible-name',
+      'Collapse Header',
+    );
+    cy.get('section[data-component-name="ObjectPageAnchorBar"]').should('not.have.attr', 'role');
+    cy.get('footer').should('not.have.attr', 'role');
+
+    const accessibilityAttributes = {
+      objectPageTopHeader: {
+        role: 'banner',
+        ariaRoledescription: 'ariaRoledescription',
+      },
+      objectPageAnchorBar: {
+        expandButton: {
+          expanded: undefined,
+          accessibleName: '',
+        },
+        role: 'not-a-real-role',
+      },
+      objectPageFooterArea: {
+        role: 'contentinfo',
+      },
+    };
+
+    cy.mount(
+      <ObjectPage
+        data-testid="op"
+        titleArea={DPTitle}
+        headerArea={DPContent}
+        footerArea={Footer}
+        accessibilityAttributes={accessibilityAttributes}
+      >
+        {OPContent}
+      </ObjectPage>,
+    );
+
+    cy.get('header').should('have.attr', 'role', 'banner');
+    cy.get('header').should('have.attr', 'aria-roledescription', 'ariaRoledescription');
+    cy.get('[data-component-name="ObjectPageAnchorBarExpandBtn"]').should(($el) => {
+      const attrs = $el[0].accessibilityAttributes;
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      expect(attrs).to.exist;
+      expect(attrs).to.haveOwnProperty('expanded');
+      expect(attrs.expanded).to.equal(undefined);
+    });
+    cy.get('[data-component-name="ObjectPageAnchorBarExpandBtn"]').should('have.attr', 'accessible-name', '');
+    cy.get('section[data-component-name="ObjectPageAnchorBar"]').should('have.attr', 'role', 'not-a-real-role');
+    cy.get('footer').should('have.attr', 'role', 'contentinfo');
+  });
+
   cypressPassThroughTestsFactory(ObjectPage);
 });
 

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

@@ -650,7 +650,7 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
             headerContentVisible={headerArea && headerCollapsed !== true}
             hidePinButton={!!hidePinButton}
             headerPinned={headerPinned}
-            accessibilityAttributes={accessibilityAttributes}
+            accessibilityAttributes={accessibilityAttributes?.objectPageAnchorBar}
             onToggleHeaderContentVisibility={onToggleHeaderContentVisibility}
             setHeaderPinned={setHeaderPinned}
             onHoverToggleButton={onHoverToggleButton}

packages/main/src/components/ObjectPage/types/index.ts

@@ -3,6 +3,7 @@ import type { CommonProps, Ui5CustomEvent } from '@ui5/webcomponents-react-base'
 import type { ReactElement, ReactNode } from 'react';
 import type { ObjectPageMode } from '../../../enums/ObjectPageMode.js';
 import type { AvatarPropTypes } from '../../../webComponents/Avatar/index.js';
+import type { ButtonPropTypes } from '../../../webComponents/Button/index.js';
 import type { TabContainerDomRef } from '../../../webComponents/TabContainer/index.js';
 import type { ObjectPageHeaderPropTypes } from '../../ObjectPageHeader/index.js';
 import type { ObjectPageSectionPropTypes } from '../../ObjectPageSection/index.js';
@@ -106,7 +107,12 @@ export interface ObjectPagePropTypes extends Omit<CommonProps, 'placeholder'> {
       role?: string;
       ariaRoledescription?: string;
     };
+    //todo: rename in next major version to better reflect what part of the ObjectPage it describes
     objectPageAnchorBar?: {
+      expandButton?: {
+        expanded?: ButtonPropTypes['accessibilityAttributes']['expanded'] | undefined;
+        accessibleName?: ButtonPropTypes['accessibleName'];
+      };
       role?: string;
     };
     objectPageFooterArea?: {

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

@@ -15,6 +15,7 @@ import type { ButtonDomRef } from '../../webComponents/Button/index.js';
 import { Button } from '../../webComponents/Button/index.js';
 import type { ToggleButtonDomRef, ToggleButtonPropTypes } from '../../webComponents/ToggleButton/index.js';
 import { ToggleButton } from '../../webComponents/ToggleButton/index.js';
+import type { ObjectPagePropTypes } from '../ObjectPage/types/index.js';
 import { classNames, styleData } from './ObjectPageAnchorBar.module.css.js';
 
 const _buttonBaseMinWidth = `${cssVarVersionInfoPrefix}button_base_min_width`;
@@ -53,11 +54,7 @@ interface ObjectPageAnchorBarPropTypes extends CommonProps {
   /**
    * Defines internally used accessibility properties/attributes.
    */
-  accessibilityAttributes?: {
-    objectPageAnchorBar?: {
-      role?: string;
-    };
-  };
+  accessibilityAttributes?: ObjectPagePropTypes['accessibilityAttributes']['objectPageAnchorBar'];
   /**
    * Fired when the `headerContent` changes its pinned state.
    */
@@ -114,14 +111,18 @@ const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes
     const showHideHeaderBtn = showHideHeaderBtnRef.current;
     void customElements.whenDefined(tagName).then(() => {
       if (showHideHeaderBtn) {
+        const expanded =
+          accessibilityAttributes?.expandButton && Object.hasOwn(accessibilityAttributes.expandButton, 'expanded')
+            ? accessibilityAttributes.expandButton.expanded
+            : !!headerContentVisible;
         showHideHeaderBtn.accessibilityAttributes = {
-          expanded: !!headerContentVisible,
+          expanded,
           hasPopup: undefined,
           controls: undefined,
         };
       }
     });
-  }, [!!headerContentVisible]);
+  }, [accessibilityAttributes?.expandButton?.expanded, !!headerContentVisible]);
 
   const onToggleHeaderButtonClick = (e) => {
     onToggleHeaderContentVisibility(enrichEventWithDetails(e, { visible: !headerContentVisible }));
@@ -131,7 +132,7 @@ const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes
     <section
       data-component-name="ObjectPageAnchorBar"
       style={style}
-      role={accessibilityAttributes?.objectPageAnchorBar?.role}
+      role={accessibilityAttributes?.role}
       className={!hidePinButton ? classNames.container : null}
       ref={ref}
     >
@@ -149,7 +150,10 @@ const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes
         onMouseOver={onHoverToggleButton}
         onMouseLeave={onHoverToggleButton}
         tooltip={i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER)}
-        accessibleName={i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER)}
+        accessibleName={
+          accessibilityAttributes?.expandButton?.accessibleName ??
+          i18nBundle.getText(!headerContentVisible ? EXPAND_HEADER : COLLAPSE_HEADER)
+        }
         data-component-name="ObjectPageAnchorBarExpandBtn"
       />
       {shouldRenderHeaderPinnableButton && (

tsconfig.spec.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2021",
     "lib": ["es2022", "dom"],
-    "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"],
+    "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events", "chai"],
     "moduleResolution": "Node",
     "jsx": "react-jsx",
     "composite": true