cloudscape-design / components

React components for Cloudscape Design System
https://cloudscape.design/
Apache License 2.0
2.34k stars 152 forks source link

fix: Hide resize handler icon SVG from screen readers #2285

Closed avinashbot closed 4 months ago

avinashbot commented 4 months ago

Description

Hide the SVG from being treated as a graphic by screen readers so that they don't call this out as an unlabeled image. In every context that it's used, it's wrapped by a role="slider" with a label, so a label on the icon itself is irrelevant. But if we don't remove from the accessibility tree, it's treated as an unlabeled image by automated testing tools.

We do this in the icon component by default but we're not using the icon component here, so it was missed.

Related links, issue #, if available: AWSUI-42858

How has this been tested?

No new tests here. Adding a test for checking a fixed property feels silly.

Review checklist _The following items are to be evaluated by the author(s) and the reviewer(s)._ #### Correctness - _Changes include appropriate documentation updates._ - _Changes are backward-compatible if not indicated, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - _Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - _Changes were manually tested for accessibility, see [accessibility guidelines](https://cloudscape.design/foundation/core-principles/accessibility/)._ #### Security - _If the code handles URLs: all URLs are validated through [the `checkSafeUrl` function](https://github.com/cloudscape-design/components/blob/main/src/internal/utils/check-safe-url.ts)._ #### Testing - _Changes are covered with new/existing unit tests?_ - _Changes are covered with new/existing integration tests?_

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov[bot] commented 4 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.43%. Comparing base (8b62025) to head (ba1d62d).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2285 +/- ## ========================================== - Coverage 95.44% 95.43% -0.01% ========================================== Files 707 707 Lines 18802 18802 Branches 6307 6316 +9 ========================================== - Hits 17945 17944 -1 + Misses 849 804 -45 - Partials 8 54 +46 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.