Setting the boolean value of aria-expanded using React Hooks

Question

I'm currently working on accessibility in a web application using React & Ant Design's Select component. aria-expanded is set to false string.

I want to use React useState to toggle aria-expanded="false" so that the aria label in the screen reader can read back wether the dropdown is open or closed.

The idea is to take the default state and use it in the useState hook like this:

const [selectAria, setSelectAria] = useState('false');

            <Select
              name="someName"
              id="someID"
              onSelect={(value) => handleChangeSelect(value)}
              aria-label={
                selectAria ? 'i am closed' : 'i am open '
              }
              aria-expanded={selectAria}
            >

The screen reader is only able to recognize when the initial state. After I select an option, and the dropdown is closed, it does not read back the new state.

Is it possible to do this in React hooks? Is it possible to access the aria-expanded attribute in useState along with the boolean value? I haven't worked on advanced accessibility and have to stick with the antD library for this. Thanks in advance.

Answer 1

In Ant Design, they have provided a bunch of props with very simple names to get our things done in a very friendly manner.

You can decide the initial openness/closeness of your Select element using defaultOpen prop and, always one-to-one bound openness/closeness using open prop.

Here you want to control the open/close action in always one-to-one bound manner I guess. So your code should be like this!

 const [selectAria, setSelectAria] = useState(false); <Select name="someName" id="someID" onSelect={(value) => handleChangeSelect(value)} open={selectArea} >

*Note: Removed your aria-label attribute as well. Refer official AntD documentation for a suitable prop API - Select Component !

**Note: If you use this open prop I mentioned above, it may never allow you to close the panel until your selectAria variable is true . So you have to carefully handle that situation as well!

***Note: This answer is referred to Ant Design version 4.7.3. Select the correct version of documentation before you refer!