[terra-form-select] - Fixed SR issues #3985

PK106552 · 2023-11-22T11:04:41Z

Summary

What was changed:

Fixed ScreenReader reading undefined selected while adding new item in list
Fixed ScreenReader reading left parent index value and right parent while traverse between item.
Fixed SR is reading in top to bottom format. Currently the SR is reading no results message followed by add text.

Why it was changed:

JAWS reads the index value of the listbox items as left parent 4 of 5 right parent while the expected way of reading is to not specify left / right parent rather read only the index values as 4 of 5.
After adding the free text, screen readers read it as " Undefined selected" Can add a live region aria-live="polite" to update the state when an new option is added to the list of options of combobox element.
For add text, SR is not reading in top to bottom format. Currently the SR is reading the the add text followed by no results message

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

Thank you for contributing to Terra.
@cerner/terra

Before fix:

After fix:

Screen.Recording.2023-11-23.at.7.08.31.PM.mp4

supreethmr · 2023-11-22T16:53:43Z

packages/terra-form-select/src/search/Frame.jsx

@@ -265,7 +265,7 @@ class Frame extends React.Component {
      this.hasEscPressed = true;
      event.stopPropagation();
      this.closeDropdown();
-    } else if (!this.state.isOpen && keyCode === KeyCode.KEY_ESCAPE && this.hasEscPressed) {


why hasEscPressed is removed

hasEscPressed check will be preventing to clear selected item when dropdown Collapsed state and when pressing ESC key

I think that is an expected behavior of. not clearing selected value on esc Key press. selected value should only be cleared only when allowClear prop is set to true

Updated - 52f4495

I have made changes as per your suggestions.
1 => Added condition that selected value should be cleared onEsc when allowClear is set to true.
2 => Fixed VO it reads as select a color selected when value is cleared with esc key.

Attached screen record for your references.

Screen.Recording.2023-11-27.at.7.09.02.PM.mov

supreethmr · 2023-11-22T16:56:51Z

packages/terra-form-select/CHANGELOG.md

+* Fixed
+  * Fixed ScreenReader reading undefined selected and left and parent extra information in `terra-form-select-combobox`.


Move this entry to unreleased section

Suggested change

* Fixed

* Fixed ScreenReader reading undefined selected and left and parent extra information in `terra-form-select-combobox`.

* Fixed

* Fixed screen reader response for `terra-form-select-combobox`.

Updated - 3f70c69

packages/terra-form-select/CHANGELOG.md

…core into combobox-SR-issues

supreethmr · 2023-11-23T11:02:48Z

packages/terra-form-select/src/combobox/Menu.jsx

-        visuallyHiddenComponent.current.innerText = '';
-      }
+      const noMatchingResultText = intl.formatMessage({ id: 'Terra.form.select.noResults' }, { text: searchValue });
+      visuallyHiddenComponent.current.innerText = `${noMatchingResultText}, ${freeTextValue}`;


Can you attach JAWS speech history as well similar to VO screenshots as a evidence

Done. Thanks

supreethmr · 2023-11-23T11:04:53Z

packages/terra-form-select/src/combobox/Menu.jsx

@@ -104,7 +103,9 @@ class Menu extends React.Component {
  constructor(props) {
    super(props);

-    this.state = {};
+    this.state = {
+      closedViaKeyEvent: false,


Can you provide link of code line where we are changing the value of this state from its initial value

terra-core/packages/terra-form-select/src/combobox/Menu.jsx

Line 221 in 35a6252

this.setState({ closedViaKeyEvent: true });

rahulkumar8cs · 2023-11-30T10:59:21Z

+1

Fixed SR issues

deadf59

PK106552 added 📦 terra-form-select Accessibility Review Required labels Nov 22, 2023

PK106552 self-assigned this Nov 22, 2023

PK106552 requested a review from a team as a code owner November 22, 2023 11:04

github-actions bot temporarily deployed to preview-pr-3985 November 22, 2023 11:05 Destroyed

PK106552 requested review from supreethmr, sugan2416 and saket2403 November 22, 2023 11:06

supreethmr reviewed Nov 22, 2023

View reviewed changes

packages/terra-form-select/CHANGELOG.md Outdated Show resolved Hide resolved

Updated CHANGELOG file

8635737

github-actions bot temporarily deployed to preview-pr-3985 November 23, 2023 04:58 Destroyed

Updated CHANGELOG file

3f70c69

github-actions bot temporarily deployed to preview-pr-3985 November 23, 2023 05:04 Destroyed

MadanKumarGovindaswamy added 2 commits November 23, 2023 10:36

Update: SR issue

779cc3d

Merge branch 'combobox-SR-issues' of https://github.com/cerner/terra-…

fbbca1d

…core into combobox-SR-issues

github-actions bot temporarily deployed to preview-pr-3985 November 23, 2023 05:22 Destroyed

MadanKumarGovindaswamy requested a review from supreethmr November 23, 2023 08:07

Update packages/terra-form-select/CHANGELOG.md

35a6252

github-actions bot temporarily deployed to preview-pr-3985 November 23, 2023 08:18 Destroyed

supreethmr reviewed Nov 23, 2023

View reviewed changes

MadanKumarGovindaswamy requested a review from supreethmr November 23, 2023 14:09

MadanKumarGovindaswamy self-assigned this Nov 23, 2023

Updated review comment

52f4495

github-actions bot temporarily deployed to preview-pr-3985 November 27, 2023 12:18 Destroyed

Updated review comments

3b8ae35

github-actions bot temporarily deployed to preview-pr-3985 November 27, 2023 13:33 Destroyed

Updated JEST

c672549

github-actions bot temporarily deployed to preview-pr-3985 November 27, 2023 13:48 Destroyed

supreethmr approved these changes Nov 29, 2023

View reviewed changes

Fixed Ability to Clear Selection example SR issue

17c82c0

github-actions bot temporarily deployed to preview-pr-3985 November 30, 2023 08:14 Destroyed

saket2403 approved these changes Nov 30, 2023

View reviewed changes

PK106552 added Accessibility Review Ready ⭐ Accessibility Reviewed Accessibility has been reviewed and approved. and removed Accessibility Review Required Accessibility Review Ready labels Nov 30, 2023

supreethmr merged commit bb1c3b7 into main Nov 30, 2023
21 checks passed

supreethmr deleted the combobox-SR-issues branch November 30, 2023 15:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[terra-form-select] - Fixed SR issues #3985

[terra-form-select] - Fixed SR issues #3985

PK106552 commented Nov 22, 2023 •

edited by AH106586Harika

Loading

supreethmr Nov 22, 2023

PK106552 Nov 23, 2023

supreethmr Nov 27, 2023

PK106552 Nov 27, 2023

PK106552 Nov 27, 2023

supreethmr Nov 22, 2023

PK106552 Nov 23, 2023

supreethmr Nov 23, 2023

MadanKumarGovindaswamy Nov 23, 2023

supreethmr Nov 23, 2023

MadanKumarGovindaswamy Nov 23, 2023

MadanKumarGovindaswamy Nov 23, 2023

rahulkumar8cs commented Nov 30, 2023

		* Fixed
		* Fixed ScreenReader reading undefined selected and left and parent extra information in `terra-form-select-combobox`.

[terra-form-select] - Fixed SR issues #3985

[terra-form-select] - Fixed SR issues #3985

Conversation

PK106552 commented Nov 22, 2023 • edited by AH106586Harika 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

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

rahulkumar8cs commented Nov 30, 2023

PK106552 commented Nov 22, 2023 •

edited by AH106586Harika

Loading