[terra-menu] - Fixed SR not announcing menu group name information. #1841

PK106552 · 2023-10-18T10:09:53Z

Summary

Screen Reader not fetching group name information because we are wrapping group role items within menu role

What was changed:
If additional group information text is used, provide a string containing the IDs for html elements that help describe the intent of the group of menu. so added aria-describedby attribute in menu items and passing group id to aria-describedby

Why it was changed:
Screen Reader not fetching group name information

Testing

This change was tested using:

Reviews

In addition to engineering reviews, this PR needs:

UX review
Accessibility review
Functional review

Additional Details

This PR resolves:

UXPLATFORM-9744

Thank you for contributing to Terra.
@cerner/terra

Before fix

Screen.Recording.2023-10-18.at.3.22.52.PM.mov

After fix

Screen.Recording.2023-10-18.at.3.31.07.PM.mov

JAWS response for collapsible-menu and terra-menu

supreethmr · 2023-10-18T11:32:29Z

packages/terra-framework-docs/CHANGELOG.md

@@ -2,11 +2,14 @@

 ## Unreleased

+* Added
+  * Added aria-label custom prop and ariaDescribedBy first class prop for `terra-collapsible-menu-view` and `terra-menu` to help describe the intent of the group information.


Suggested change

* Added aria-label custom prop and ariaDescribedBy first class prop for `terra-collapsible-menu-view` and `terra-menu` to help describe the intent of the group information.

* Added `aria-label` and `ariaDescribedBy` for `terra-collapsible-menu-view` and `terra-menu` to help describe the intent of the group information.

Updated - 4cf4469

Update it to

Added aria-label and ariaDescribedBy props

and it looks good!

Updated - 3d48277

supreethmr · 2023-10-18T11:38:29Z

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

-  /**
-   * String that labels the group for accessibility.
-   */
-  ariaLabel: PropTypes.string,


I think we still need this prop along with this prop we need to create a prop for GroupId so that it can be used in menu item for aria-describedby attribute.

Updated - 4cf4469

supreethmr · 2023-10-18T11:41:05Z

packages/terra-menu/CHANGELOG.md

@@ -2,6 +2,9 @@

 ## Unreleased

+* Added
+  * Added ariaDescribedBy first class prop to announce group information.


Suggested change

* Added ariaDescribedBy first class prop to announce group information.

* Added `ariaDescribedBy` prop for `menu-item` to announce group information.

Updated - 4cf4469

supreethmr · 2023-10-20T09:05:02Z

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

+  /**
+   * String that used in menu item for aria-describedby that labels the group for accessibility.
+   */
+  GroupId: PropTypes.string,


Suggested change

GroupId: PropTypes.string,

groupId: PropTypes.string,

Updated -f8e50c8

supreethmr · 2023-10-20T09:08:08Z

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

@@ -120,7 +125,7 @@ class CollapsibleMenuViewItemGroup extends React.Component {
    ]);

    return (
-      <ButtonGroup {...customProps} isMultiSelect={isMultiSelect} onChange={onChange} className={buttonGroupClassNames} selectedKeys={selectedKeys} aria-label={ariaLabel}>


why did we removed ariaLabel ..? it is first class prop so we can still use them here correct..??

Still consumer can able to pass aria-label as custom props in collapsible-menu that's why i have removed first class props, if required i can include first class props

Updated - f8e50c8

supreethmr · 2023-10-24T07:44:38Z

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

@@ -612,7 +611,6 @@ exports[`Menu correctly applies the theme context className 1`] = `
                                                    totalItems={1}
                                                  >
                                                    <li
-                                                      aria-describedby="terra-menu-headertitle-00000000-0000-0000-0000-000000000000"


I think you need to update the menu content to use the new prop aria-describedBy of menu-item. to get these ID's back . There as been change made on showHeader prop in menu with this PR : #1649
We might need a to re-test the scenarios of the above PR as well to ensure features added on PR-1649 are still working as expected.

Updated - a99b426

I have verified with both menuitem as well as group item

VC ON :

VC OFF :

supreethmr · 2023-10-30T17:41:29Z

packages/terra-menu/src/_MenuContent.jsx

+    }
+    if (!MenuUtils.isMac()) {
+      if (!this.props.index && this.props.showHeader && index === 0 && value.props.ariaDescribedBy) {
+        ariaDescribedByValue = `${this.menuTopHeaderId} ${value.props.ariaDescribedBy}`;


IDs should be comma separated values

Suggested change

ariaDescribedByValue = `${this.menuTopHeaderId} ${value.props.ariaDescribedBy}`;

ariaDescribedByValue = `${this.menuTopHeaderId}, ${value.props.ariaDescribedBy}`;

JAWS SR skipping menuHeaderId information If we add comma separated between ID's, SR been reading only second ID information.

supreethmr · 2023-10-30T18:05:05Z

packages/terra-menu/src/_MenuContent.jsx

@@ -342,6 +343,23 @@ class MenuContent extends React.Component {
    );
  }

+  ariaDescribedByHandle(value, index) {


This function can be simplified to

ariaDescribedByHandle(value, index) { if (!MenuUtils.isMac() && !this.props.index && this.props.showHeader && index === 0) { let ariaDescribedByValue = (value.props.ariaDescribedBy) ? `, ${value.props.ariaDescribedBy}` : ''; return `${this.menuTopHeaderId}${ariaDescribedByValue}`; } return value.props.ariaDescribedBy; }

Updated - 37d673e

rahulkumar8cs · 2023-10-31T12:05:28Z

+1

…1841)

PK106552 added 📦 terra-menu Accessibility Review Required labels Oct 18, 2023

PK106552 requested review from supreethmr, sugan2416 and saket2403 October 18, 2023 10:09

PK106552 self-assigned this Oct 18, 2023

github-actions bot temporarily deployed to preview-pr-1841 October 18, 2023 10:10 Destroyed

supreethmr reviewed Oct 18, 2023

View reviewed changes

github-actions bot temporarily deployed to preview-pr-1841 October 18, 2023 15:05 Destroyed

github-actions bot temporarily deployed to preview-pr-1841 October 18, 2023 15:21 Destroyed

github-actions bot temporarily deployed to preview-pr-1841 October 19, 2023 05:32 Destroyed

PK106552 requested review from supreethmr and sdadn October 19, 2023 07:44

supreethmr reviewed Oct 20, 2023

View reviewed changes

PK106552 force-pushed the menu_group_SR_issue branch from 3584b90 to f8e50c8 Compare October 20, 2023 11:12

github-actions bot temporarily deployed to preview-pr-1841 October 20, 2023 11:13 Destroyed

supreethmr reviewed Oct 24, 2023

View reviewed changes

PK106552 force-pushed the menu_group_SR_issue branch from fc7b04a to a99b426 Compare October 26, 2023 06:40

github-actions bot temporarily deployed to preview-pr-1841 October 26, 2023 06:41 Destroyed

PK106552 requested a review from supreethmr October 26, 2023 06:44

PK106552 added 6 commits October 30, 2023 19:12

Fixed SR not announcing group information

4e78ac7

Updated review comments

f6dfab4

Fixed lint error

bae1255

Updated doc file

38e33c4

Updated review comments

e1446e9

fixed review comment

af27824

PK106552 force-pushed the menu_group_SR_issue branch from 2882a7b to af27824 Compare October 30, 2023 13:44

github-actions bot temporarily deployed to preview-pr-1841 October 30, 2023 14:40 Destroyed

github-actions bot temporarily deployed to preview-pr-1841 October 30, 2023 15:03 Destroyed

github-actions bot temporarily deployed to preview-pr-1841 October 30, 2023 15:11 Destroyed

github-actions bot temporarily deployed to preview-pr-1841 October 30, 2023 16:00 Destroyed

supreethmr reviewed Oct 30, 2023

View reviewed changes

Updated review comments

37d673e

github-actions bot temporarily deployed to preview-pr-1841 October 31, 2023 04:42 Destroyed

lint error

bd61f5c

github-actions bot temporarily deployed to preview-pr-1841 October 31, 2023 04:52 Destroyed

PK106552 requested a review from supreethmr October 31, 2023 06:36

supreethmr approved these changes Oct 31, 2023

View reviewed changes

supreethmr added ⭐ Accessibility Reviewed and removed Accessibility Review Required labels Oct 31, 2023

sugan2416 approved these changes Oct 31, 2023

View reviewed changes

sdadn approved these changes Oct 31, 2023

View reviewed changes

supreethmr merged commit 4559333 into main Oct 31, 2023
21 checks passed

supreethmr deleted the menu_group_SR_issue branch October 31, 2023 17:41

kenk2 pushed a commit that referenced this pull request Nov 1, 2023

[terra-menu] - Fixed SR not announcing menu group name information. (#…

c3091c8

…1841)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[terra-menu] - Fixed SR not announcing menu group name information. #1841

[terra-menu] - Fixed SR not announcing menu group name information. #1841

PK106552 commented Oct 18, 2023 •

edited

Loading

supreethmr Oct 18, 2023

PK106552 Oct 18, 2023

sdadn Oct 18, 2023

PK106552 Oct 19, 2023

supreethmr Oct 18, 2023

PK106552 Oct 18, 2023

supreethmr Oct 18, 2023

PK106552 Oct 18, 2023

supreethmr Oct 20, 2023

PK106552 Oct 20, 2023

supreethmr Oct 20, 2023

PK106552 Oct 20, 2023

PK106552 Oct 20, 2023

supreethmr Oct 24, 2023

PK106552 Oct 26, 2023 •

edited

Loading

supreethmr Oct 30, 2023

PK106552 Oct 31, 2023

supreethmr Oct 30, 2023 •

edited

Loading

PK106552 Oct 31, 2023

rahulkumar8cs commented Oct 31, 2023

	* Added aria-label custom prop and ariaDescribedBy first class prop for `terra-collapsible-menu-view` and `terra-menu` to help describe the intent of the group information.
	* Added `aria-label` and `ariaDescribedBy` for `terra-collapsible-menu-view` and `terra-menu` to help describe the intent of the group information.

	* Added ariaDescribedBy first class prop to announce group information.
	* Added `ariaDescribedBy` prop for `menu-item` to announce group information.

	ariaDescribedByValue = `${this.menuTopHeaderId} ${value.props.ariaDescribedBy}`;
	ariaDescribedByValue = `${this.menuTopHeaderId}, ${value.props.ariaDescribedBy}`;

[terra-menu] - Fixed SR not announcing menu group name information. #1841

[terra-menu] - Fixed SR not announcing menu group name information. #1841

Conversation

PK106552 commented Oct 18, 2023 • edited Loading

Summary

Testing

Reviews

Additional Details

Before fix

After fix

JAWS response for collapsible-menu and terra-menu

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PK106552 Oct 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

supreethmr Oct 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rahulkumar8cs commented Oct 31, 2023

PK106552 commented Oct 18, 2023 •

edited

Loading

PK106552 Oct 26, 2023 •

edited

Loading

supreethmr Oct 30, 2023 •

edited

Loading