[Accessibility] Comboboxes don't announce their current value

[patrickhlauke]

Steps To Reproduce

1. Run a screen reader
2. Go to a screen/page with comboboxes
3. Set focus to the combobox

Expected Result

Beyond announcing the combobox and its label, screen readers should also announce the current value that the combobox is set to.

Actual Result

The current value is not announced / is not part of the accessible name of the custom combobox control.

Screenshots or Videos

bitwarden-appearance-combobox-current-value-not-announced.mp4

Video: Chrome/NVDA, setting focus to the "Theme" and "Extension width" comboboxes in Settings > Appearance

Additional Context

Current markup for one of the comboboxes:

<div class="ng-select-container ng-has-value">
  <div class="ng-value-container">
    <div class="ng-placeholder">-- Select --</div>
    <div class="ng-value ng-star-inserted" style="">
      <!---->
      <span aria-hidden="true" class="ng-value-icon left ng-star-inserted">×</span>
      <span class="ng-value-label ng-star-inserted">Dark</span>
      <!---->
    </div>
    <!---->
    <!---->
    <!---->
    <!---->
    <div role="combobox" aria-haspopup="listbox" class="ng-input" aria-expanded="true" aria-owns="acd325ca0578">
      <input aria-autocomplete="list" type="text" autocorrect="off" autocapitalize="off" autocomplete="off" id="bit-select-search-input-0" aria-describedby="undefined" aria-activedescendant="acd325ca0578-2" aria-controls="acd325ca0578">
    </div>
  </div>
  <!---->
  <!---->
  <span class="ng-arrow-wrapper">
    <span class="ng-arrow"></span>
  </span>
</div>

Note the aria-describedby="undefined" aria-activedescendant="acd325ca0578-2" on the input. When the combobox is not open, that aria-activedescendant likely doesn't do anything as the combobox is hidden. And the aria-describedby is doing nothing.

Suggest reviewing https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

However, an even simpler solution: since these comboboxes only provide a handful of options, it would make more sense - and be a lot more straightforward - to simply make these <select> elements? If you have to keep them as comboboxes, perhaps consider using https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ at least, as the editing/filtering behaviour in this case is really unnecessary.

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

[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,