Feature: Support empty label column headers

[pwang347]

Use case

Sometimes columns will not have any visible header text labels, e.g., for an index column. Currently, using role=columnheader will trigger accessibility failures such as https://dequeuniversity.com/rules/axe/4.5/empty-table-header

Proposed solution

Consider adding an option to change the role to cell.

[amanmahajan7]

Can we use name: <div aria-label="Index Column" />?

[pwang347]

Hi @amanmahajan7, thanks for the reply! From the guidance in the link above it's not acceptable to have just an aria-label:

I believe changing the role is equivalent to changing from th to td

[amanmahajan7]

Are you using RDG? It looks like you have a table?

[pwang347]

Yes I am using RDG, the above is just from the accessibility page. axe-core creates the above violation for RDG, and seems like it is because RDG is always assigning role=columheader

[amanmahajan7]

I don't see any issues when I run axe extension. Can you create a reproducible example where this happens?

[pwang347]

Hi @amanmahajan7, please see the following branch: https://github.com/pwang347/react-data-grid/tree/pawang/axe-test

Repro steps:

1. Checkout the branch and run npm i && npm run start
2. Click on the "No rows" sample on the demo website
3. Run the following code in the dev tools console

(await axe.run([document.querySelector("body")])).violations

I get the following result:

[
    {
        "id": "empty-table-header",
        "impact": "minor",
        "tags": [
            "cat.name-role-value",
            "best-practice"
        ],
        "description": "Ensure table headers have discernible text",
        "help": "Table header text should not be empty",
        "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/empty-table-header?application=axeAPI",
        "nodes": [
            {
                "any": [
                    {
                        "id": "has-visible-text",
                        "data": null,
                        "relatedNodes": [],
                        "impact": "minor",
                        "message": "Element does not have text that is visible to screen readers"
                    }
                ],
                "all": [],
                "none": [],
                "impact": "minor",
                "html": "<div role=\"columnheader\" aria-colindex=\"2\" aria-rowspan=\"1\" aria-selected=\"false\" tabindex=\"-1\" class=\"rdg-cell cell_cj343x0\" style=\"inset-block-start: 0px; grid-area: 1 / 2 / 2 / 3; padding-block-start: calc(0 * var(--rdg-header-row-height));\"></div>",
                "target": [
                    "div[aria-colindex=\"2\"]"
                ],
                "failureSummary": "Fix any of the following:\n  Element does not have text that is visible to screen readers"
            }
        ]
    }
]

Thanks!

[amanmahajan7]

<div role=\"columnheader\" aria-colindex=\"2\" aria-rowspan=\"1\" aria-selected=\"false\" tabindex=\"-1\" class=\"rdg-cell cell_cj343x0\" style=\"inset-block-start: 0px; grid-area: 1 / 2 / 2 / 3; padding-block-start: calc(0 * var(--rdg-header-row-height));\"></div>

This html does not have any text. Can we not add visually hidden element as header text?