[terra-navigation-side-menu] Accessibility Changes #2018

MadanKumarGovindaswamy · 2024-02-07T08:28:46Z

Summary

What was changed:

Audit Report Issues:

Terra must provide a prop allowing consuming teams to provide a label that accurately describes the purpose of the navigation. Add an aria-label to the NAV element and apply consumer provided string.
Add dashed border for focused item.
Terra Navigation Side Menu that has a caret icon in its sub menu of contrast ratio 1.8:1 that does not meet the non text contrast ratio of 3:1. Implementing team(s) must ensure that any non-text content that conveys meaning to the user meet the 3:1 contrast ratio.
Support Keyboard Navigation(Up and Down Arrow key)

Why it was changed:

This component does not commit accessibility criteria.

VO.mov

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-10196

Thank you for contributing to Terra.
@cerner/terra

saket2403 · 2024-02-14T06:01:58Z

packages/terra-navigation-side-menu/src/MenuItem.module.scss

@@ -107,7 +107,7 @@
      }

      .chevron {
-        color: var(--terra-navigation-side-menu-item-selected-chevron-color, #909496);
+        color: var(--terra-navigation-side-menu-item-selected-chevron-color, #1C1F21);


Was this color provided by the design team?

color contrast change reverted. Thanks
f257333

saket2403 · 2024-02-14T06:02:19Z

packages/terra-navigation-side-menu/src/MenuItem.module.scss

-        /* stylelint-disable-next-line max-nesting-depth */
-        .chevron {
-          color: var(--terra-navigation-side-menu-item-selected-focus-chevron-color, #909496);
+          color: var(--terra-navigation-side-menu-item-selected-hover-chevron-color, #1C1F21);


Was this color provided by the design team?

color contrast change reverted. Thanks
f257333

saket2403 · 2024-02-14T06:19:45Z

Please add a wdio test to verify the up and down arrow key navigation and also update the test files with the new ariaLabel prop.

saket2403 · 2024-02-15T07:09:22Z

packages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss

@@ -36,16 +36,19 @@
    --terra-navigation-side-menu-item-selected-before-background-image: none;
    --terra-navigation-side-menu-item-selected-background-size: auto;
    --terra-navigation-side-menu-item-selected-border-left: 0.5rem solid #007cc3;
-    --terra-navigation-side-menu-item-selected-chevron-color: #909496;
+    --terra-navigation-side-menu-item-selected-chevron-color: #1C1F21;


I think you forgot to revert this

yeah. this variable is not used any more. Removed . Thanks
3017b29

saket2403 · 2024-02-15T07:09:33Z

packages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss

    --terra-navigation-side-menu-item-selected-color: #1c1f21;
    --terra-navigation-side-menu-item-selected-focus-background-color: #f4f4f4;
-    --terra-navigation-side-menu-item-selected-focus-chevron-color: #909496;
+    --terra-navigation-side-menu-item-selected-focus-chevron-color: #1C1F21;


I think you forgot to revert this

yeah. this variable is not used any more. Removed . Thanks
3017b29

This reverts commit 3017b29.

packages/terra-navigation-side-menu/CHANGELOG.md

Co-authored-by: Sugan G <[email protected]>

sugan2416 · 2024-02-20T13:08:40Z

packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx

+    // To add focus to the first sub menu item
+    if (node && this.needsFocus) {
+      const subMenuNodes = node.querySelectorAll('[data-menu-item]');
+      if (subMenuNodes) {


Suggested change

if (subMenuNodes) {

if (subMenuNodes && subMenuNodes.length) {

Done. Thanks
5382cb3

sugan2416 · 2024-02-20T13:27:17Z

With VO, unable to navigate items with arrow keys, tab works.
aria-label added in this example: https://github.com/cerner/terra-framework/pull/2018/files#diff-645e1bb824a065f0d02a73ac27b999151d5d51c76124df924b1d19553766de95R63 is not announced.
Can you verify this in both SR

rahulkumar8cs · 2024-02-21T08:01:35Z

+1 for the current a11y changes.
We need to fix the focus behaviour navigation side menu of back button in new jira which you created. Thank you

Update: A11y changes

18c07b9

MadanKumarGovindaswamy self-assigned this Feb 7, 2024

github-actions bot temporarily deployed to preview-pr-2018 February 7, 2024 08:29 Destroyed

Update changelog file

9fdb6c9

github-actions bot temporarily deployed to preview-pr-2018 February 7, 2024 08:43 Destroyed

MadanKumarGovindaswamy added 📦 terra-navigation-side-menu Accessibility Review Required labels Feb 7, 2024

MadanKumarGovindaswamy changed the title ~~Update: A11y changes~~ [terra-navigation-side-menu] Audit report Issues Feb 7, 2024

MadanKumarGovindaswamy changed the title ~~[terra-navigation-side-menu] Audit report Issues~~ [terra-navigation-side-menu] Accessibility Changes Feb 7, 2024

MadanKumarGovindaswamy requested review from supreethmr, sugan2416 and saket2403 February 7, 2024 08:53

update: wdio

d1e1475

github-actions bot temporarily deployed to preview-pr-2018 February 7, 2024 09:01 Destroyed

Merge branch 'main' into UXPLATFORM-10196-NavigationSideMenu

b09104f

github-actions bot temporarily deployed to preview-pr-2018 February 8, 2024 06:46 Destroyed

MadanKumarGovindaswamy marked this pull request as ready for review February 8, 2024 06:58

Merge branch 'main' into UXPLATFORM-10196-NavigationSideMenu

c0c5f50

github-actions bot temporarily deployed to preview-pr-2018 February 9, 2024 15:04 Destroyed

saket2403 reviewed Feb 14, 2024

View reviewed changes

Merge branch 'main' into UXPLATFORM-10196-NavigationSideMenu

4c70c61

github-actions bot temporarily deployed to preview-pr-2018 February 14, 2024 06:20 Destroyed

update: jest and wdio

f257333

github-actions bot temporarily deployed to preview-pr-2018 February 14, 2024 12:57 Destroyed

MadanKumarGovindaswamy requested a review from saket2403 February 14, 2024 13:03

saket2403 reviewed Feb 15, 2024

View reviewed changes

update: refactor

3017b29

MadanKumarGovindaswamy requested a review from saket2403 February 15, 2024 07:12

github-actions bot temporarily deployed to preview-pr-2018 February 15, 2024 07:12 Destroyed

Revert "update: refactor"

381656a

This reverts commit 3017b29.

github-actions bot temporarily deployed to preview-pr-2018 February 15, 2024 07:48 Destroyed

Update MenuItem.module.scss

a5955af

github-actions bot temporarily deployed to preview-pr-2018 February 15, 2024 07:55 Destroyed

Update NavigationSideMenuItem.module.scss

5d87747

github-actions bot temporarily deployed to preview-pr-2018 February 15, 2024 08:04 Destroyed

Update MenuItem.module.scss

36c8e1f

github-actions bot temporarily deployed to preview-pr-2018 February 15, 2024 08:28 Destroyed

saket2403 approved these changes Feb 15, 2024

View reviewed changes

sugan2416 reviewed Feb 15, 2024

View reviewed changes

packages/terra-navigation-side-menu/CHANGELOG.md Outdated Show resolved Hide resolved

Update packages/terra-navigation-side-menu/CHANGELOG.md

bbd8f85

Co-authored-by: Sugan G <[email protected]>

github-actions bot temporarily deployed to preview-pr-2018 February 15, 2024 12:00 Destroyed

MadanKumarGovindaswamy requested a review from sugan2416 February 15, 2024 12:00

sugan2416 reviewed Feb 20, 2024

View reviewed changes

Merge branch 'main' into UXPLATFORM-10196-NavigationSideMenu

0dd5b40

github-actions bot temporarily deployed to preview-pr-2018 February 20, 2024 13:44 Destroyed

Update NavigationSideMenu.jsx

5382cb3

github-actions bot temporarily deployed to preview-pr-2018 February 20, 2024 13:53 Destroyed

MadanKumarGovindaswamy requested a review from sugan2416 February 20, 2024 13:57

sugan2416 approved these changes Feb 20, 2024

View reviewed changes

saket2403 merged commit c44f6ee into main Feb 21, 2024
22 checks passed

saket2403 deleted the UXPLATFORM-10196-NavigationSideMenu branch February 21, 2024 09:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[terra-navigation-side-menu] Accessibility Changes #2018

[terra-navigation-side-menu] Accessibility Changes #2018

MadanKumarGovindaswamy commented Feb 7, 2024 •

edited

Loading

saket2403 Feb 14, 2024

MadanKumarGovindaswamy Feb 14, 2024

saket2403 Feb 14, 2024

MadanKumarGovindaswamy Feb 14, 2024

saket2403 commented Feb 14, 2024

saket2403 Feb 15, 2024

MadanKumarGovindaswamy Feb 15, 2024

saket2403 Feb 15, 2024

MadanKumarGovindaswamy Feb 15, 2024

sugan2416 Feb 20, 2024

MadanKumarGovindaswamy Feb 20, 2024

sugan2416 commented Feb 20, 2024

rahulkumar8cs commented Feb 21, 2024

	if (subMenuNodes) {
	if (subMenuNodes && subMenuNodes.length) {

[terra-navigation-side-menu] Accessibility Changes #2018

[terra-navigation-side-menu] Accessibility Changes #2018

Conversation

MadanKumarGovindaswamy commented Feb 7, 2024 • edited Loading

Summary

Testing

Reviews

Additional Details

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

saket2403 commented Feb 14, 2024

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

sugan2416 commented Feb 20, 2024

rahulkumar8cs commented Feb 21, 2024

MadanKumarGovindaswamy commented Feb 7, 2024 •

edited

Loading