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 <option>s, there is a built-in way to add a label. For example:

    value={ icon }
        { 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

    value={ icon }
        { 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>

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

    value={ icon }
        { 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>.

2 Answers 2


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:

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

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 } ) => (
        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.

  • Thank you, Sally! That's working beautifully.
    – WebElaine
    Aug 12, 2019 at 13:44
  • You're welcome. :)
    – Sally CJ
    Aug 12, 2019 at 14:53

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.