[Terra-Dropdown] VO does not announce Expanded state and Index of list items while navigating through arrow keys #3805

AH106586Harika · 2023-05-19T17:10:15Z

Summary

[Terra-Dropdown] VO does not announce Expand/Collapse state and Index of list items while navigating through arrow keys
What was changed:
Added screenreader support to announce index and Expanded state for dropdown list items by adding aria-label property.

Expand.collapse_VOL.mov

Untitled.2.mp4

Untitled.1.mp4

This PR resolves:

UXPLATFORM-9058

Thank you for contributing to Terra.
@cerner/terra

supreethmr · 2023-05-22T07:55:03Z

We can have this change on PR : #3798
since to validate index changes you would need to focus behavior also fixed !!

…6586/Dropdown-announce-index

packages/terra-dropdown-button/translations/de.json

sdadn · 2023-06-02T21:12:58Z

packages/terra-dropdown-button/src/_DropdownList.jsx

@@ -69,6 +78,7 @@ class DropdownList extends React.Component {
      event.preventDefault();
    } else if (keyCode === KeyCode.KEY_DOWN) {
      if (!this.pressed) {
+        this.expanded = '';


Can we add a unit test to see if this gets set?

Implemented.

supreethmr · 2023-06-05T05:17:03Z

packages/terra-dropdown-button/CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog

 ## Unreleased
+* Added


Suggested change

* Added

* Added

Looks like there are 2 Added headings and they can be combined together.

supreethmr · 2023-06-05T05:21:36Z

packages/terra-dropdown-button/src/_DropdownList.jsx

+      const ofText = this.props.intl.formatMessage({ id: 'Terra.dropdownButton.of' });
+      const totalItems = this.props.children.length;
+      let ariaLabel = null;
+      if (SharedUtil.isMac() && currentIndex === 1 && totalItems) {


since we will be removing aria-expanded on DropdownButton.jsx . we should remove this condition of MAC and make it consistent across all the screen readers and browsers.

Implemented and tested it is working as expected.

supreethmr · 2023-06-05T05:22:43Z

packages/terra-dropdown-button/src/_DropdownList.jsx

+      if (SharedUtil.isMac() && currentIndex === 1 && totalItems) {
+        ariaLabel = `${this.expanded} ${currentItemLabel} (${currentIndex} ${ofText} ${totalItems})`;
+      } else if (SharedUtil.isMac() && currentIndex !== 1 && totalItems) {
+        ariaLabel = `${currentItemLabel} (${currentIndex} ${ofText} ${totalItems})`;


Suggested change

ariaLabel = `${currentItemLabel} (${currentIndex} ${ofText} ${totalItems})`;

ariaLabel = `${currentItemLabel}, (${currentIndex} ${ofText} ${totalItems})`;

packages/terra-dropdown-button/src/_Dropdown.jsx

sdadn · 2023-07-13T14:04:19Z

packages/terra-dropdown-button/tests/jest/DropdownList.test.jsx

+
+  it('should set the aria-label property to empty on keydown on Mac', () => {
+    // Set the mock implementation for isMac
+    SharedUtil.isMac.mockReturnValue(true);


+1 on the mock

sdadn · 2023-07-13T14:07:36Z

packages/terra-dropdown-button/tests/jest/DropdownList.test.jsx

+    expect(firstListItemAriaLabelValue).toEqual(expectedAriaLabelValueInitial);
+
+    // Simulate keydown event
+    wrapper.instance().handleKeyDown(eventMock);
+    const updatedFirstListItemAriaLabelValue = wrapper.find('#firstItem').props()['aria-label'];
+    const expectedAriaLabelValue = '1st Option,(1 of 3)';
+    expect(updatedFirstListItemAriaLabelValue).toEqual(expectedAriaLabelValue);


Let's put all the expect statements at the bottom for better readability.

Suggested change

expect(firstListItemAriaLabelValue).toEqual(expectedAriaLabelValueInitial);

// Simulate keydown event

wrapper.instance().handleKeyDown(eventMock);

const updatedFirstListItemAriaLabelValue = wrapper.find('#firstItem').props()['aria-label'];

const expectedAriaLabelValue = '1st Option,(1 of 3)';

expect(updatedFirstListItemAriaLabelValue).toEqual(expectedAriaLabelValue);

// Simulate keydown event

wrapper.instance().handleKeyDown(eventMock);

const updatedFirstListItemAriaLabelValue = wrapper.find('#firstItem').props()['aria-label'];

const expectedAriaLabelValue = '1st Option,(1 of 3)';

expect(firstListItemAriaLabelValue).toEqual(expectedAriaLabelValueInitial);

expect(updatedFirstListItemAriaLabelValue).toEqual(expectedAriaLabelValue);

Implemented as suggested.

sdadn · 2023-07-13T14:10:10Z

packages/terra-dropdown-button/tests/jest/DropdownList.test.jsx

+    wrapper.instance().listRef = listRefMock;
+    const firstListItem = wrapper.find('#firstItem');
+    const firstListItemAriaLabelValue = firstListItem.props()['aria-label'];
+    const expectedAriaLabelValueInitial = `${translationsFile['Terra.dropdownButton.expanded']}1st Option,(1 of 3)`;


Let's rename this to expectedAriaLabelInitialValue

Suggested change

const expectedAriaLabelValueInitial = `${translationsFile['Terra.dropdownButton.expanded']}1st Option,(1 of 3)`;

const expectedAriaLabelInitialValue = `${translationsFile['Terra.dropdownButton.expanded']}1st Option,(1 of 3)`;

sdadn · 2023-07-13T14:14:24Z

packages/terra-dropdown-button/tests/jest/DropdownList.test.jsx

@@ -89,4 +115,58 @@ describe('Dropdown List', () => {
    );
    expect(wrapper).toMatchSnapshot();
  });
+
+  it('should set the aria-label property to empty on keydown on Mac', () => {
+    // Set the mock implementation for isMac


nit:

Suggested change

// Set the mock implementation for isMac

// Sets the mock return value for isMac()

…6586/Dropdown-announce-index

sdadn

Sorry, I was about to approve until I noticed this one last thing!!

sdadn · 2023-07-14T21:17:06Z

packages/terra-dropdown-button/translations/de.json

Since we don't have the translations at this time, we should only keep en.json and en-US.json. The remaining files will be provided by the translations team when they are ready.

We have received translations from translation team and I have added them in the translation files . TRANS-14545

AH106586Harika · 2023-07-17T05:27:52Z

Sorry, I was about to approve until I noticed this one last thing!!

AH106586Harika · 2023-07-17T05:34:42Z

Sorry, I was about to approve until I noticed this one last thing!!

supreethmr · 2023-07-17T10:50:33Z

packages/terra-dropdown-button/src/_DropdownList.jsx

+      let ariaLabel = null;
+      if (SharedUtil.isMac()) {
+        if (currentIndex === 1 && totalItems) {
+          ariaLabel = `${this.expanded}${activeOption}`;


nit:

Suggested change

ariaLabel = `${this.expanded}${activeOption}`;

ariaLabel = `${this.expanded}, ${activeOption}`;

Lets remove the special characters like dot and comma from translations and include it as part of strings.

supreethmr · 2023-07-17T10:57:02Z

packages/terra-dropdown-button/src/_DropdownList.jsx

+        ariaLabel = `${this.expanded}${currentItemLabel}`;
+      } else if (currentIndex !== 1 && totalItems) {
+        ariaLabel = `${currentItemLabel}`;
+      }


can we simplify this :

const activeOption = (SharedUtil.isMac()) ? this.props.intl.formatMessage({ id: 'Terra.dropdownButton.activeOption' }, { currentItemLabel, currentIndex, totalItems }) : currentItemLabel; let ariaLabel = ''; if (currentIndex === 1 && totalItems) { ariaLabel = `${this.expanded}, ${activeOption}`; } else if (currentIndex !== 1 && totalItems) { ariaLabel = activeOption; }

Modified for better readability.

supreethmr · 2023-07-17T11:05:16Z

packages/terra-dropdown-button/translations/fi-FI.json

@@ -1,4 +1,4 @@
 {
  "Terra.dropdownButton.moreOptions": "More Options",
-  "Terra.dropdownButton.selected": "Valittu."
+  "Terra.dropdownButton.selected": "Valittu"


we are missing translations here !! Please make sure translations are added from valid file it should be from fi-FI.json file provided by translation team.

I didn't received translations for fi-FI.json when I checked with the translation team she told it is not a supported locale.

Added aria-label to announce index of dropdown listitems

3c92a1a

AH106586Harika self-assigned this May 19, 2023

AH106586Harika requested a review from a team as a code owner May 19, 2023 17:10

github-actions bot temporarily deployed to preview-pr-3805 May 19, 2023 17:10 Destroyed

Resolved merge conflicts

68f588e

github-actions bot temporarily deployed to preview-pr-3805 May 23, 2023 14:22 Destroyed

clear aria-label while dropdown opens

bc7b3f2

github-actions bot temporarily deployed to preview-pr-3805 May 24, 2023 05:40 Destroyed

added aria-haspopup

43f300d

github-actions bot temporarily deployed to preview-pr-3805 May 24, 2023 13:24 Destroyed

updated jest testcases

22eeb9b

github-actions bot temporarily deployed to preview-pr-3805 May 26, 2023 13:12 Destroyed

Merge branch 'main' of https://github.com/cerner/terra-core into AH10…

6808c17

…6586/Dropdown-announce-index

github-actions bot temporarily deployed to preview-pr-3805 June 2, 2023 02:41 Destroyed

Added aria-label for expand/collapse state

6430ad4

github-actions bot temporarily deployed to preview-pr-3805 June 2, 2023 02:56 Destroyed

removes sticky focus from button on safari on VO mode.

1adf2f2

github-actions bot temporarily deployed to preview-pr-3805 June 2, 2023 05:10 Destroyed

sdadn suggested changes Jun 2, 2023

View reviewed changes

sdadn added the 📦 terra-dropdown-button label Jun 2, 2023

supreethmr reviewed Jun 5, 2023

View reviewed changes

Default Dropdown Button

2731c94

github-actions bot temporarily deployed to preview-pr-3805 June 6, 2023 00:41 Destroyed

Implemented review comments

452467c

github-actions bot temporarily deployed to preview-pr-3805 June 6, 2023 23:05 Destroyed

AH106586Harika changed the title ~~[Terra-Dropdown] VO does not announce Index of list items while navigating through arrow keys~~ [Terra-Dropdown] VO does not announce Expanded state and Index of list items while navigating through arrow keys Jun 6, 2023

sdadn reviewed Jun 7, 2023

View reviewed changes

packages/terra-dropdown-button/src/_Dropdown.jsx Outdated Show resolved Hide resolved

github-actions bot temporarily deployed to preview-pr-3805 July 13, 2023 08:06 Destroyed

sdadn reviewed Jul 13, 2023

View reviewed changes

modified as per review comments

8ef8326

github-actions bot temporarily deployed to preview-pr-3805 July 14, 2023 04:43 Destroyed

Merge branch 'main' of https://github.com/cerner/terra-core into AH10…

7430f42

…6586/Dropdown-announce-index

github-actions bot temporarily deployed to preview-pr-3805 July 14, 2023 05:24 Destroyed

Removed Dot

bb91545

github-actions bot temporarily deployed to preview-pr-3805 July 14, 2023 13:16 Destroyed

sdadn suggested changes Jul 14, 2023

View reviewed changes

Removed Dot for selected text and Added activeOption for de locale

275521f

github-actions bot temporarily deployed to preview-pr-3805 July 17, 2023 05:11 Destroyed

modified fi-fi locale

5b8ffd3

github-actions bot temporarily deployed to preview-pr-3805 July 17, 2023 05:20 Destroyed

AH106586Harika closed this Jul 17, 2023

AH106586Harika reopened this Jul 17, 2023

github-actions bot temporarily deployed to preview-pr-3805 July 17, 2023 05:33 Destroyed

supreethmr reviewed Jul 17, 2023

View reviewed changes

worked on review comments

3e7cc7e

github-actions bot temporarily deployed to preview-pr-3805 July 17, 2023 12:38 Destroyed

supreethmr approved these changes Jul 17, 2023

View reviewed changes

saket2403 approved these changes Jul 17, 2023

View reviewed changes

saket2403 merged commit c6b9a36 into main Jul 17, 2023
21 checks passed

saket2403 deleted the AH106586/Dropdown-announce-index branch July 17, 2023 16:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Terra-Dropdown] VO does not announce Expanded state and Index of list items while navigating through arrow keys #3805

[Terra-Dropdown] VO does not announce Expanded state and Index of list items while navigating through arrow keys #3805

AH106586Harika commented May 19, 2023 •

edited

Loading

supreethmr commented May 22, 2023 •

edited

Loading

sdadn Jun 2, 2023

AH106586Harika Jun 6, 2023

supreethmr Jun 5, 2023

AH106586Harika Jun 6, 2023

sdadn Jun 7, 2023

AH106586Harika Jun 15, 2023

supreethmr Jun 5, 2023

AH106586Harika Jun 6, 2023

supreethmr Jun 5, 2023

AH106586Harika Jun 15, 2023

sdadn Jul 13, 2023

sdadn Jul 13, 2023

AH106586Harika Jul 14, 2023

sdadn Jul 13, 2023

AH106586Harika Jul 14, 2023

sdadn Jul 13, 2023 •

edited

Loading

AH106586Harika Jul 14, 2023

sdadn left a comment

sdadn Jul 14, 2023

AH106586Harika Jul 17, 2023 •

edited

Loading

AH106586Harika commented Jul 17, 2023

AH106586Harika commented Jul 17, 2023 •

edited

Loading

supreethmr Jul 17, 2023

AH106586Harika Jul 17, 2023

supreethmr Jul 17, 2023

AH106586Harika Jul 17, 2023

supreethmr Jul 17, 2023 •

edited

Loading

AH106586Harika Jul 17, 2023

	ariaLabel = `${currentItemLabel} (${currentIndex} ${ofText} ${totalItems})`;
	ariaLabel = `${currentItemLabel}, (${currentIndex} ${ofText} ${totalItems})`;

	const expectedAriaLabelValueInitial = `${translationsFile['Terra.dropdownButton.expanded']}1st Option,(1 of 3)`;
	const expectedAriaLabelInitialValue = `${translationsFile['Terra.dropdownButton.expanded']}1st Option,(1 of 3)`;

	// Set the mock implementation for isMac
	// Sets the mock return value for isMac()

	ariaLabel = `${this.expanded}${activeOption}`;
	ariaLabel = `${this.expanded}, ${activeOption}`;

[Terra-Dropdown] VO does not announce Expanded state and Index of list items while navigating through arrow keys #3805

[Terra-Dropdown] VO does not announce Expanded state and Index of list items while navigating through arrow keys #3805

Conversation

AH106586Harika commented May 19, 2023 • edited Loading

Summary

supreethmr commented May 22, 2023 • edited Loading

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

Choose a reason for hiding this comment

sdadn Jul 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sdadn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AH106586Harika Jul 17, 2023 • edited Loading

Choose a reason for hiding this comment

AH106586Harika commented Jul 17, 2023

AH106586Harika commented Jul 17, 2023 • edited Loading

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

supreethmr Jul 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AH106586Harika commented May 19, 2023 •

edited

Loading

supreethmr commented May 22, 2023 •

edited

Loading

sdadn Jul 13, 2023 •

edited

Loading

AH106586Harika Jul 17, 2023 •

edited

Loading

AH106586Harika commented Jul 17, 2023 •

edited

Loading

supreethmr Jul 17, 2023 •

edited

Loading