Closed
Description
Describe the bug
The label for a b-form-group containing a b-form-radio-group is not accessible to the ChromeVox screen reader. Instead of reading the label, ChromeVox reads "Radio button group".
Steps to reproduce the bug
- Activate ChromeVox (Ctrl+Alt+Z)
- Go to https://bootstrap-vue.org/docs/components/form-radio#grouped-radios
- Use the tab key to select the radio button group
- ChromeVox reads "Toggle this custom radio, radio button selected; 1 of 4; Radio button group"
Expected behavior
ChromeVox should have read "Toggle this custom radio, radio button selected; 1 of 4; Radios using options"
Versions
Libraries:
Live bootstrap-vue.org website
Environment:
- Device: Laptop
- OS: ChromeOS
- Browser: Chrome
- Version: 85
Demo link
https://bootstrap-vue.org/docs/components/form-radio#grouped-radios
Additional context
Here's the relevant HTML of the bootstrap-vue website:
<fieldset class="form-group" id="__BVID__753">
<legend
tabindex="-1"
class="bv-no-focus-ring col-form-label pt-0"
id="__BVID__753__BV_label_"
>
Radios using options
</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div
id="radio-group-1"
role="radiogroup"
tabindex="-1"
class="bv-no-focus-ring"
>
<div class="custom-control custom-control-inline custom-radio">
<input
id="radio-group-1_BV_option_0"
type="radio"
name="radio-options"
class="custom-control-input"
value="first"
/><label for="radio-group-1_BV_option_0" class="custom-control-label"
><span>Toggle this custom radio</span></label
>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input
id="radio-group-1_BV_option_1"
type="radio"
name="radio-options"
class="custom-control-input"
value="second"
/><label for="radio-group-1_BV_option_1" class="custom-control-label"
><span>Or toggle this other custom radio</span></label
>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input
id="radio-group-1_BV_option_2"
type="radio"
name="radio-options"
disabled="disabled"
class="custom-control-input"
value="third"
/><label for="radio-group-1_BV_option_2" class="custom-control-label"
><span>This one is Disabled</span></label
>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input
id="radio-group-1_BV_option_3"
type="radio"
name="radio-options"
class="custom-control-input"
value="[object Object]"
/><label for="radio-group-1_BV_option_3" class="custom-control-label"
><span>This is the 4th radio</span></label
>
</div>
</div>
<!----><!----><!---->
</div>
</fieldset>I believe the issue is with the first div with role="group" and the second div with role="radiogroup"
Here's an example that works correctly: https://www.last-child.com/legend-aria-describedby/
<fieldset>
<legend>Do you like peanut butter on your fish sticks?</legend>
<p>
<label for="fishyes"
><input id="fishyes" type="radio" name="fish" value="yes" /> Yes</label
><br />
<label for="fishno"
><input id="fishno" type="radio" name="fish" value="no" /> No</label
>
</p>
</fieldset>