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

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.

Leave a Comment