Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(a11y): clr-password-container show/hide Icon does not have unique label #1179

Merged
merged 4 commits into from
Feb 5, 2024

Conversation

andyfeds
Copy link
Contributor

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)
  • If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

What is the current behavior?

Clarity uses constants/static text to label the show/ hide icon corresponding to the password input field, this is not unique for each clr-password-container input. It currently only ever reads as Show password / Hide password when using a screen reader.

Issue Number: CDE-1179

What is the new behavior?

Each individual show/hide icon button corresponding to a password field will now announce the unique label name (associated to that field) in addition to Show password / Hide password when using a screen reader.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Copy link
Contributor

github-actions bot commented Jan 31, 2024

👋 @andyfeds,

  • 🙏 The Clarity team thanks you for opening a pull request
  • 🎉 The build for this PR has succeeded
  • 🔍 The PR is now ready for review
  • 🍿 In the meantime, view a preview of this PR
  • 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal #clarity-support Slack channel

Thank you,

🤖 Clarity Release Bot

Andrea Fernandes added 4 commits February 5, 2024 12:59
… label

- adds a unique label for each password show/hide icon specifically for screen readers.

Close: #CDE-1179

Signed-off-by: Andrea Fernandes <[email protected]>
…ls for screen readers

Signed-off-by: Andrea Fernandes <[email protected]>
@andyfeds andyfeds merged commit cabb89d into vmware-clarity:main Feb 5, 2024
4 checks passed
github-actions bot pushed a commit that referenced this pull request Feb 5, 2024
… label (#1179)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Clarity uses constants/static text to label the show/ hide icon
corresponding to the password input field, this is not unique for each
clr-password-container input. It currently only ever reads as Show
password / Hide password when using a screen reader.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1179

## What is the new behavior?
Each individual show/hide icon button corresponding to a password field
will now announce the unique label name (associated to that field) in
addition to Show password / Hide password when using a screen reader.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Signed-off-by: Andrea Fernandes <[email protected]>
Co-authored-by: Andrea Fernandes <[email protected]>
(cherry picked from commit cabb89d)
github-actions bot pushed a commit that referenced this pull request Feb 5, 2024
… label (#1179)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Clarity uses constants/static text to label the show/ hide icon
corresponding to the password input field, this is not unique for each
clr-password-container input. It currently only ever reads as Show
password / Hide password when using a screen reader.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1179

## What is the new behavior?
Each individual show/hide icon button corresponding to a password field
will now announce the unique label name (associated to that field) in
addition to Show password / Hide password when using a screen reader.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Signed-off-by: Andrea Fernandes <[email protected]>
Co-authored-by: Andrea Fernandes <[email protected]>
(cherry picked from commit cabb89d)
andyfeds added a commit that referenced this pull request Feb 6, 2024
… label (backport to 15.x) (#1195)

Backport cabb89d from #1179. <br> ## PR
Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Clarity uses constants/static text to label the show/ hide icon
corresponding to the password input field, this is not unique for each
clr-password-container input. It currently only ever reads as Show
password / Hide password when using a screen reader.

&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;

Issue Number: CDE-1179

## What is the new behavior?
Each individual show/hide icon button corresponding to a password field
will now announce the unique label name (associated to that field) in
addition to Show password / Hide password when using a screen reader.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information

Co-authored-by: Andrea A Fernandes <[email protected]>
andyfeds added a commit that referenced this pull request Feb 6, 2024
… label (#1179)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Clarity uses constants/static text to label the show/ hide icon
corresponding to the password input field, this is not unique for each
clr-password-container input. It currently only ever reads as Show
password / Hide password when using a screen reader.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1179

## What is the new behavior?
Each individual show/hide icon button corresponding to a password field
will now announce the unique label name (associated to that field) in
addition to Show password / Hide password when using a screen reader.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Signed-off-by: Andrea Fernandes <[email protected]>
Co-authored-by: Andrea Fernandes <[email protected]>
(cherry picked from commit cabb89d)
andyfeds added a commit that referenced this pull request Feb 6, 2024
… label (backport to next) (#1196)

Backport cabb89d from #1179. <br> ## PR
Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Clarity uses constants/static text to label the show/ hide icon
corresponding to the password input field, this is not unique for each
clr-password-container input. It currently only ever reads as Show
password / Hide password when using a screen reader.

&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;

Issue Number: CDE-1179

## What is the new behavior?
Each individual show/hide icon button corresponding to a password field
will now announce the unique label name (associated to that field) in
addition to Show password / Hide password when using a screen reader.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information

Co-authored-by: Andrea A Fernandes <[email protected]>
dtsanevmw pushed a commit that referenced this pull request Feb 8, 2024
… label (#1179)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Clarity uses constants/static text to label the show/ hide icon
corresponding to the password input field, this is not unique for each
clr-password-container input. It currently only ever reads as Show
password / Hide password when using a screen reader.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1179

## What is the new behavior?
Each individual show/hide icon button corresponding to a password field
will now announce the unique label name (associated to that field) in
addition to Show password / Hide password when using a screen reader.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Signed-off-by: Andrea Fernandes <[email protected]>
Co-authored-by: Andrea Fernandes <[email protected]>
Copy link
Contributor

github-actions bot commented Feb 9, 2024

🎉 This PR is included in version 16.3.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Copy link
Contributor

🎉 This PR is included in version 16.3.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Copy link
Contributor

github-actions bot commented Mar 1, 2024

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed PRs after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.

@github-actions github-actions bot locked and limited conversation to collaborators Mar 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants