Skip to content

Allow form options to render accessibility attributes #3771

Closed
@nborko

Description

@nborko

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions