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.