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

storage: Improve table accessibility #20471

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

mvollmer
Copy link
Member

Hide the icons from screenreaders, and clarify the scope of things.

@mvollmer
Copy link
Member Author

This unfortunately brings back the Patternfly warning.

@mvollmer
Copy link
Member Author

mvollmer commented May 15, 2024

This unfortunately brings back the Patternfly warning.

Fixed with a hack. aria-hidden is stronger than aria-label, at least when looking at the accessibility tree in Firefox.

@mvollmer
Copy link
Member Author

This unfortunately brings back the Patternfly warning.

Fixed with a hack. aria-hidden is stronger than aria-label, at least when looking at the accessibility tree in Firefox.

Replaced with a slightly better hack. Using Td instead of Th...

Copy link
Member

@garrett garrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good from the code side of things. I need to double-check the visuals to see if it looks any different from using a th instead of a td for the names.

<Th>{_("Location")}</Th>
<Th className="storage-size-column-header">{_("Size")}</Th>
<Th aria-label={_("Actions")} />
{ show_icons && <Td aria-hidden="true" /> }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can tell, this is not a "hack" but completely valid.

I looked at docs for thead, tr, td, th. It seems there's nothing stopping anyone from putting either a td or th inside of a parent element of tr, even if the parent of that tr is a thead or tbody (or in some cases, even just table, if there is no caption, thead, and tbody).

Copy link
Member Author

@mvollmer mvollmer May 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can tell, this is not a "hack" but completely valid.

I was just reading this: patternfly/patternfly#6272

Accessibility rules have changed, <td>s in theads are no longer acceptable.

shrug

@@ -608,19 +608,19 @@ export const PageTable = ({ emptyCaption, aria_label, pages, crossrefs, sorted,
</Card>);
} else {
const cols = [
<Td key="1" onClick={onClick}>
<Th scope="row" key="1" onClick={onClick}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would be correct from the HTML side of things. I haven't looked to see if there are any stylistic implications (if it changes the look) yet, but I'll do that in a little bit.

Good catch on seeing that scope is deprecated for <td>! I felt it was just for <th> at first, but saw it used and mentioned for <td>, but I guess I saw old docs and skipped that part of the documentation on MDN. Thanks for finding and mentioning it!

@garrett
Copy link
Member

garrett commented May 16, 2024

BTW: It makes sense that aria-hidden overrides aria-label, just like display: none overrides other CSS styling.

@mvollmer mvollmer force-pushed the storage-aria-hide-icons branch 2 times, most recently from 970c1ad to ba78f28 Compare May 16, 2024 14:11
Hide the icons from screenreaders, and clarify the scope of things.
Patternfly complains about empty "Th" elements, but a empty "Td" looks
just the same and since we hide it anyway it doesn't hurt
accessibility to use the wrong kind here.

See https://github.com/patternfly/patternfly/issues/6658
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants