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.

Sign up for GitHub

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

Jump to bottom

[Accessibility] Settings > Notifications > Excluded domains - domain inputs lack accessible name #12535

Open
1 task done
patrickhlauke opened this issue Dec 21, 2024 · 3 comments · May be fixed by #12536
Open
1 task done

[Accessibility] Settings > Notifications > Excluded domains - domain inputs lack accessible name #12535

patrickhlauke opened this issue Dec 21, 2024 · 3 comments · May be fixed by #12536
Labels
browser Browser Extension bug

Comments

@patrickhlauke
Copy link
Contributor

Steps To Reproduce

  1. Use a screen reader
  2. Go to "Settings > Notifications > Excluded domains"
  3. Choose "Add domain"
  4. Set focus to the new domain input that appears

Expected Result

The input should be announced as "Website 1 (URI)", "Website 2 (URI)", etc.

Actual Result

The inputs lack an accessible name, and are just announced as unlabelled "Edit" fields.

Screenshots or Videos

bitwarden-settings-notifications-excluded-domains-inputs.mp4

Video: Chrome/NVDA - using "Add domain", then focusing on the input.

Additional Context

Current generated markup (elided) for one of these label/input pairs:

<bit-label title="Website 1 (URI)" id="bit-label-37" class="...">
  ...
  <span class="tw-truncate">Website 1 (URI) ...</span>
  ...
</bit-label>
...
<input appinputverbatim="" bitinput="" inputmode="url" type="text" autocomplete="off" autocapitalize="none" autocorrect="none" id="excludedDomain0" class="...">

The simplest solution is to add an aria-labelledby to the input, pointing back to the id of the preceding <bit-label>.

<bit-label title="Website 1 (URI)" id="bit-label-37" class="...">
  ...
  <span class="tw-truncate">Website 1 (URI) ...</span>
  ...
</bit-label>
...
<input ... aria-labelledby="bit-label-37">

Operating System

Windows

Operating System Version

11

Web Browser

Chrome

Browser Version

131.0.6778.205 (Official Build) (64-bit)

Build Version

2024.12.2

Issue Tracking Info

  • I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.
@patrickhlauke patrickhlauke added browser Browser Extension bug labels Dec 21, 2024
@bitwarden-bot
Copy link

Thank you for reporting this issue! We've added this to our internal tracking system.
ID: PM-16304

@patrickhlauke
Copy link
Contributor Author

If using aria-labelledby proves too complex (squinting over the codebase, it seems <bit-label> does its own internal working out of what the id should be, which is not immediately available in the code that puts this view together), an alternative is to duplicate the visible label text as an aria-label on the <input>

patrickhlauke added a commit to patrickhlauke/bitwarden that referenced this issue Dec 22, 2024
@patrickhlauke
Add explicit aria-label to "Excluded domains" input
280732d 
Closes bitwarden#12535
@patrickhlauke patrickhlauke linked a pull request Dec 22, 2024 that will close this issue
Open
@SergeantConfused
Copy link

Hello @patrickhlauke,

Thank you for your report. I have flagged this to the Engineering department; please feel free to post additional information, such as screenshots or a screen video recordings, if you wish.

Thank you again,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser Browser Extension bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[PM-16305] Add explicit aria-label to "Excluded domains" input patrickhlauke/bitwarden
3 participants
@patrickhlauke @bitwarden-bot @SergeantConfused