Question

38

Setting the boolean value of aria-expanded using React Hooks

rated 0 times [ 44] [ 6] / answers: 1 / hits: 6015 / 4 Years ago, thu, october 29, 2020, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jacquezf

Add To Favorites

Follow

Total Points: 27

Total Questions: 109

Total Answers: 98

Location: Lesotho

Member since Wed, Jun 2, 2021

3 Years ago

jacquezf questions

1 Open new tab with useNavigate hook in React

Fri, Apr 8, 22, 00:00, 2 Years ago

1 MongooseError: Query was already executed:

Mon, Jan 10, 22, 00:00, 2 Years ago

1 JS Discord Bot - Creating Channel With Specific Permissions ( v12+ )

Fri, Sep 25, 20, 00:00, 4 Years ago

1 React Table usePagination not applying pagination

Sun, May 31, 20, 00:00, 4 Years ago

1 Check if device supports ScreenOrientation.lock() - Uncaught Error screen.orientation.lock() is not available on this device

Tue, May 12, 20, 00:00, 4 Years ago

View All

answered 4 Years ago jaredsages · Accepted Answer

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!