Block Editor: add an aria-label to an option inside a SelectControl

Question

Block Editor: add an aria-label to an option inside a SelectControl

WebElaine

2019年8月10日 10:16

I'm building a block that has, among other things, a FontAwesome icon. I'm currently letting users choose which icon by using a WP SelectControl.

For individual options, there is a built-in way to add a label. For example:

SelectControl
    value={ icon }
    options={[
        { label: '', value: 'fa-address-book' }
    ]}
/

Combined with CSS this works great - the dropdown shows the icon itself, making it easy to select for those with good vision. However, I'd like to make this more accessible by adding an aria-label for each option.

I tried

SelectControl
    value={ icon }
    options={[
        { label: '', value: 'fa-address-book', 'aria-label': 'Address book' }
    ]}
/

but the aria-label does not actually render. Is there another way to add it?

The HTML output I'm looking for:

select id="inspector-select-control-0" class="components-select-control__input"
    option value="fa-address-book" aria-label="Address book"/option
/select

I would also be all right with using a screen reader only class in the label itself, but when I try this

SelectControl
    value={ icon }
    options={[
        { label: 'span class="show-for-sr"Address book/span', value: 'fa-address-book' }
    ]}
/

the and tags show literally in the label rather than creating an actual separate HTML span.

Topic block-editor dropdown accessibility Wordpress

Category Web

Sally CJ · Accepted Answer · 2019年8月10日 10:16

I agree with Nathan's answer, but you can copy the source and create your own SelectControl component based on that source. Here's an example, with basically just the aria-label addition:

<option
    key={ `${ option.label }-${ option.value }-${ index }` }
    value={ option.value }
    disabled={ option.disabled }
    aria-label={ option.ariaLabel || '' }
>
    { option.label }
</option>

And a sample index.js file demonstrating usage of the custom SelectControl component:

import SelectControl from './select-control-custom'; // make sure the path is correct
import { withState } from '@wordpress/compose';

const MySelectControl = withState( {
    size: '50%',
} )( ( { size, setState } ) => (
    <SelectControl
        label="Size"
        value={ size }
        options={ [
            { label: 'Big', value: '100%', ariaLabel: 'Aria label for Big' },
            { label: 'Medium', value: '50%', ariaLabel: 'Aria label for Medium' },
            { label: 'Small', value: '25%', ariaLabel: 'Aria label for Small' },
        ] }
    />
) );

I.e. Use the ariaLabel property/key to set the ARIA label. And the above is based on the example here.

Nathan Johnson · Accepted Answer · 2019年8月9日 22:11

Looking at the code, right now it's not possible to add anything to an option inside the SelectControl besides a label, a value, an optional disabled keyword, and an id which is automatically generated from the label and value.

Block Editor: add an aria-label to an option inside a SelectControl

About