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

[patrickhlauke]

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.

[bitwarden-bot]

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

[patrickhlauke]

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>

[SergeantConfused]

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,