Accessibility: "Filter - Radio" is not be wrapped in <fieldset>

Bugs
1

Browser : Chrome 136
OS : macOS

Current implementation of “filter - radio” is not accessible according to WCAG 4.1.2. It must be wrapped in <fieldset></fieldset>. Also arrow keys are not working because of <ul> and <li>.

We are testing this with “Mode: button” setting.

Here is example of correct implementation.

<fieldset>
  <legend>
    Choose your favorite NATO letter
  </legend>

  <input type="radio" name="nato" id="alphaRadio">
  <label for="alphaRadio">Alpha</label>

  <input type="radio" name="nato" id="bravoRadio">
  <label for="bravoRadio">Bravo</label>

  <input type="radio" name="nato" id="charlieRadio" aria-describedby="hint-charlie" checked>
  <label for="charlieRadio">Charlie</label>
</fieldset>
1 Like