Description
Currently, it's not possible to add attributes like aria-label
, aria-describedby
, title
, etc. to form options used in a select or radio group. You can put aria-label
on a single radio button, for example, but not as part of an options array passed to a radio group.
Inline HTML via the html
attribute can partially address this problem, but a class like sr-only
won't work in an <option>
tag, and data would always have to be manually HTML-escaped.
Trying to guess every possible accessibility use case for such elements is difficult, as there are a lot of edge cases. Instead of trying to anticipate attribute usage by supporting specific properties (e.g. ariaLabel
), perhaps a single attributes
object, as an optional property of an option object, could allow defining any and all possible HTML attributes one might want to use on whatever element the option renders as. For example:
{
text: 'A',
value: 1,
attributes: {
'aria-label': 'The letter A'
}
}
In the context of <b-form-select>
, the attributes could simply be added to the <options>
tag:
<option value="1" aria-label="The letter A">A</option>
In the context of <b-form-radio-group>
, the keys of attributes
could be checked against valid properties for a <b-form-radio>
, which includes aria-label
and aria-labelledby
.
I love BV for it's first class support of accessibility, and this addition could help fill a void in that support.