Add aria role and aria expanded for the details-control ( Plus/Minus Button )

godwinajit

Hi,

How can I Add an aria role and an aria expanded for the details-control ( Plus/Minus Button ) which is used to show hide additional columns during responsiveness .

Add an appropriate role (role=”button”) . Add and update the state (aria-expanded=”true”) for the Plus/Minus Button.

I need this for the accessibility purpose.

Thanks.

colin

Hi @godwinajit ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

godwinajit

Hi @colin ,

Thanks for mentioning about the test case. I have created one here http://live.datatables.net/nuyexide/1

For the Plus/Minus button which appear at each of the rows in the first column in responsive mode ( smaller screens ) , I would like to know how I can add a "role" and "aria-expanded" attributes. I need this for the accessibility purpose.

I have also attached a screenshot with those buttons marked within red.

Thanks,
Godwin Ajit.

allan

I would like to know how I can add a "role" and "aria-expanded" attributes

You can't with that exact setup as they are showing using ::before pseudo elements. It isn't possible to add aria attributes to those elements. You need to use a column controlled show / hide to be able to do that.

Allan

godwinajit

Hi @allan ,

Thanks for your recommendation. We managed to implement the role and aria-expanded for the expand/collapse buttons.

Thanks.