[terra-search-field] Remove redundant search group #4019

KV106606Viswanath · 2024-01-24T06:55:12Z

Summary

When the search field input gets focussed, screen reader reads the unnecessary search group such as "Search, Search region, Search group, Search edit field". With this fix redundant announcement of search group has been removed.

What was changed:
Redundant announcement of search group has been removed.

Why it was changed:

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

Thank you for contributing to Terra.
@cerner/terra

ShettyAkarsh · 2024-01-29T06:26:36Z

@KV106606Viswanath please add the before and after evidence.

saket2403 · 2024-01-29T08:56:02Z

packages/terra-search-field/src/SearchField.jsx

@@ -268,7 +268,6 @@ class SearchField extends React.Component {
    );

    const inputAriaLabelText = inputAttributes && Object.prototype.hasOwnProperty.call(inputAttributes, 'aria-label') ? inputAttributes['aria-label'] : intl.formatMessage({ id: 'Terra.searchField.search' });
-    const groupNameValue = groupName === 'Search' ? intl.formatMessage({ id: 'Terra.searchField.search' }) : groupName;


This line allows users to set custom aria-label via groupName prop. Removing this breaks that functionality. Pls test this example on SR https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/search-field/examples/search-field-with-no-label. Before and after your change. It should announce the custom aria label

Passing "groupName" prop to input field that should announce the custom visual label.

saket2403 · 2024-01-29T09:05:10Z

packages/terra-search-field/src/SearchField.jsx

            <div className={cx('input-group')}>
              <input
                {...additionalInputAttributes}
                className={inputClass}
-                type="search"


I feel even this should not be removed . See Here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search. It should announce like this. Changing default aria label (groupName default value) should be the way to go.

saket2403 · 2024-01-31T06:23:49Z

packages/terra-search-field/src/SearchField.jsx

@@ -104,7 +104,7 @@ const propTypes = {
 const defaultProps = {
  defaultValue: undefined,
  disableAutoSearch: false,
-  groupName: 'Search',
+  groupName: 'Search a clinic',


Did someone from UX ask to change this value to search a clinic?

I think we need to discuss with UX regarding this default value and add translations also for whatever text is finalised.

Reverted default groupName to "Search".

saket2403 · 2024-01-31T06:28:41Z

packages/terra-search-field/tests/wdio/search-field-spec.js

@@ -21,7 +21,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
    });

    it('should display Search Field with scrolled text', () => {
-      expect($('input[type="search"]').isFocused()).toBeTruthy();
+      expect($('input').isFocused()).toBeTruthy();


Since type=search has been added back these wdio spec changes can be reverted

saket2403 · 2024-01-31T06:30:16Z

packages/terra-search-field/CHANGELOG.md

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

 ## Unreleased

+* Fixed
+  * Removed unnecessary aria labels and roles to fix redundant announcement of serach group issue.


Suggested change

* Removed unnecessary aria labels and roles to fix redundant announcement of serach group issue.

* Removed unnecessary aria labels and roles to fix redundant announcement of search group issue.

saket2403 · 2024-01-31T11:17:33Z

packages/terra-search-field/tests/wdio/search-field-spec.js

Please add back type=search for all the tests. You just reverted for one of them

saket2403 · 2024-02-01T13:23:26Z

Can you update the tests also with a visible label?

KV106606Viswanath · 2024-02-02T06:01:00Z

Can you update the tests also with a visible label?

Updated.

supreethmr · 2024-02-05T11:24:54Z

packages/terra-search-field/src/SearchField.jsx

-        <div role="search" className={cx('search-role-container')} aria-label={intl.formatMessage({ id: 'Terra.searchField.search' })}>
-          <div role="group" aria-label={groupNameValue} {...customProps} className={searchFieldClassNames}>
+        <div className={cx('search-role-container')}>
+          <div role="group" aria-label={intl.formatMessage({ id: 'Terra.searchField.search' })} {...customProps} className={searchFieldClassNames}>


what will be the screen reader response when groupName is Search. ( since this div and input will have same value for aria-label attribute will it result in redundant response

Yes, it's causing redundant response of "Search".

then we should remove the default value of search from input aria-label to avoid the redundant response

supreethmr · 2024-02-05T11:28:23Z

@KV106606Viswanath groupName prop of terra-search-field has a non-internationalised string Search as default value which is incorrect. Is there different Jira to make default value of groupName prop to be internationalised string ?

KV106606Viswanath · 2024-02-05T14:00:06Z

@KV106606Viswanath groupName prop of terra-search-field has a non-internationalised string Search as default value which is incorrect. Is there different Jira to make default value of groupName prop to be internationalised string ?

No, we don't have any separate jira for this, we already have internationalised string for "Search" as "Terra.searchField.search": "Search".

rbsree · 2024-02-05T14:24:49Z

+1, as recommended a contextual and practical label is provided to the Search Edit field and the Search field along with the button is grouped.

supreethmr · 2024-02-06T06:02:14Z

@KV106606Viswanath groupName prop of terra-search-field has a non-internationalised string Search as default value which is incorrect. Is there different Jira to make default value of groupName prop to be internationalised string ?

No, we don't have any separate jira for this, we already have internationalised string for "Search" as "Terra.searchField.search": "Search".

Can update the prop description of groupName to indicate default value Search is being used when no value is provided.

supreethmr

Jest snapshots are not updated for recent code changes, needs update !!

Removed unnecessary aria labels and roles

ec3565c

KV106606Viswanath requested a review from a team as a code owner January 24, 2024 06:55

KV106606Viswanath self-assigned this Jan 24, 2024

github-actions bot temporarily deployed to preview-pr-4019 January 24, 2024 06:55 Destroyed

Updated changelog file

56ead92

github-actions bot temporarily deployed to preview-pr-4019 January 24, 2024 08:57 Destroyed

Updated test cases

39e5ae1

github-actions bot temporarily deployed to preview-pr-4019 January 24, 2024 09:38 Destroyed

KV106606Viswanath added the Accessibility Review Required label Jan 29, 2024

ShettyAkarsh approved these changes Jan 29, 2024

View reviewed changes

saket2403 reviewed Jan 29, 2024

View reviewed changes

Added visual labels

93a0a9d

github-actions bot temporarily deployed to preview-pr-4019 January 31, 2024 04:23 Destroyed

Updated changelog file and wdio snapshots

6acb545

github-actions bot temporarily deployed to preview-pr-4019 January 31, 2024 05:11 Destroyed

KV106606Viswanath requested a review from saket2403 January 31, 2024 06:23

saket2403 reviewed Jan 31, 2024

View reviewed changes

Test case change reverted

d8512a7

github-actions bot temporarily deployed to preview-pr-4019 January 31, 2024 06:51 Destroyed

KV106606Viswanath requested a review from saket2403 January 31, 2024 07:28

saket2403 reviewed Jan 31, 2024

View reviewed changes

Updated wdio test cases

470cc16

github-actions bot temporarily deployed to preview-pr-4019 January 31, 2024 11:49 Destroyed

Viusal label updated

d1b279c

github-actions bot temporarily deployed to preview-pr-4019 February 1, 2024 09:57 Destroyed

KV106606Viswanath requested a review from saket2403 February 1, 2024 10:40

Updated wdio snapshots with visual label

ab51bb3

github-actions bot temporarily deployed to preview-pr-4019 February 2, 2024 05:36 Destroyed

KV106606Viswanath requested a review from saket2403 February 2, 2024 06:01

saket2403 approved these changes Feb 5, 2024

View reviewed changes

supreethmr reviewed Feb 5, 2024

View reviewed changes

KV106606Viswanath requested a review from supreethmr February 5, 2024 14:00

Updated input aria-label

7be885a

github-actions bot temporarily deployed to preview-pr-4019 February 6, 2024 15:05 Destroyed

supreethmr approved these changes Feb 7, 2024

View reviewed changes

Updated jest snapshots

52cc7f9

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

Resolved accessibility violation issue

c90f1b8

github-actions bot temporarily deployed to preview-pr-4019 February 7, 2024 13:04 Destroyed

Updated wdio snapshots

868d379

github-actions bot temporarily deployed to preview-pr-4019 February 7, 2024 15:57 Destroyed

Jest snapshots updated

a1229e6

github-actions bot temporarily deployed to preview-pr-4019 February 7, 2024 16:48 Destroyed

Jest snapshots updated

0af4de1

github-actions bot temporarily deployed to preview-pr-4019 February 8, 2024 04:25 Destroyed

saket2403 approved these changes Feb 8, 2024

View reviewed changes

saket2403 merged commit c55faac into main Feb 8, 2024
22 checks passed

saket2403 deleted the KV106606-Remove-redundant-search-group branch February 8, 2024 04:50

KV106606Viswanath added the ⭐ Accessibility Reviewed Accessibility has been reviewed and approved. label Feb 8, 2024

sdadn removed the Accessibility Review Required label Feb 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[terra-search-field] Remove redundant search group #4019

[terra-search-field] Remove redundant search group #4019

KV106606Viswanath commented Jan 24, 2024

ShettyAkarsh commented Jan 29, 2024

saket2403 Jan 29, 2024 •

edited

Loading

KV106606Viswanath Jan 31, 2024

saket2403 Jan 29, 2024

KV106606Viswanath Jan 31, 2024

saket2403 Jan 31, 2024

KV106606Viswanath Jan 31, 2024

saket2403 Jan 31, 2024

KV106606Viswanath Feb 1, 2024

saket2403 Jan 31, 2024

KV106606Viswanath Jan 31, 2024

saket2403 Jan 31, 2024

KV106606Viswanath Jan 31, 2024

saket2403 Jan 31, 2024 •

edited

Loading

KV106606Viswanath Jan 31, 2024

saket2403 commented Feb 1, 2024

KV106606Viswanath commented Feb 2, 2024

supreethmr Feb 5, 2024

KV106606Viswanath Feb 5, 2024

supreethmr Feb 6, 2024 •

edited

Loading

supreethmr commented Feb 5, 2024

KV106606Viswanath commented Feb 5, 2024

rbsree commented Feb 5, 2024

supreethmr commented Feb 6, 2024

supreethmr left a comment

	* Removed unnecessary aria labels and roles to fix redundant announcement of serach group issue.
	* Removed unnecessary aria labels and roles to fix redundant announcement of search group issue.

[terra-search-field] Remove redundant search group #4019

[terra-search-field] Remove redundant search group #4019

Conversation

KV106606Viswanath commented Jan 24, 2024

Summary

Testing

Reviews

Additional Details

ShettyAkarsh commented Jan 29, 2024

saket2403 Jan 29, 2024 • 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

saket2403 Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saket2403 commented Feb 1, 2024

KV106606Viswanath commented Feb 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

supreethmr Feb 6, 2024 • edited Loading

Choose a reason for hiding this comment

supreethmr commented Feb 5, 2024

KV106606Viswanath commented Feb 5, 2024

rbsree commented Feb 5, 2024

supreethmr commented Feb 6, 2024

supreethmr left a comment

Choose a reason for hiding this comment

saket2403 Jan 29, 2024 •

edited

Loading

saket2403 Jan 31, 2024 •

edited

Loading

supreethmr Feb 6, 2024 •

edited

Loading