Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Support empty label column headers #3624

Open
pwang347 opened this issue Oct 25, 2024 · 6 comments
Open

Feature: Support empty label column headers #3624

pwang347 opened this issue Oct 25, 2024 · 6 comments

Comments

@pwang347
Copy link

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
Copy link
Contributor

amanmahajan7 commented Nov 22, 2024

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

@pwang347
Copy link
Author

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

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

@amanmahajan7
Copy link
Contributor

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

@pwang347
Copy link
Author

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
Copy link
Contributor

amanmahajan7 commented Nov 25, 2024

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

@pwang347
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants