Automating Table column manager

[Woyken]

We need to enable some columns in automated tests (using playwright)

Table column manager has aria-hidden="true" around it's dropdown checkbox elements.

When trying to check a checkbox getByRole('menu').getByRole('menuitem', {name:'Start date'}).getByRole('checkbox').check() it fails.
Specifically getByRole('checkbox') part.
Turns out Playwright respects aria-hidden="false" and doesn't find elements by their role if they are under aria-hidden attribute anywhere in the tree. (Ran into the same issue with some old custom bootstrap dialogs, removed aria-hidden attribute from them)

Is this aria-hidden intentional? Or are we supposed to make sure our target column exists in table header and only then click on the dropdown menu items as if they were buttons to toggle the state

[r100-stack]

Thanks for bringing this to our attention. The aria-hidden doesn't seem intentional. Internally, we were using MenuItem's startIcon prop to display the Checkbox. Since the startIcon prop expects an icon and not something like a Checkbox, it automatically adds the aria-hidden.

We will work on removing that aria-hidden.

[mayank99]

Additionally I noticed another problem: <input type="checkbox"> is nested inside a <button role="menuitem">, which isn't valid and can lead to a confusing experience for AT users. We probably shouldn't be using MenuItem here at all if we have checkboxes.

[r100-stack]

This has been fixed in v3.13.0 🚀

When working on the PR for the release, we noticed some incorrect markup like one caused by a regression (the one mentioned here) and some other accessibility issues like having interactable content within role="menuitem".

To fix all this, we changed the ActionColumn to be a Popover with labeled Checkboxes instead of a menu with MenuItems.

[mayank99]

So now that there are no menu-items, the correct way to locate these checkboxes would be something like getByRole("checkbox", { name: "Start date" }).