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

fix(table): sortable column headers will now use <button> element for a11y purposes #416

Merged
merged 1 commit into from
Oct 27, 2023

Conversation

DRiFTy17
Copy link
Collaborator

@DRiFTy17 DRiFTy17 commented Oct 23, 2023

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added/updated: Y
  • Docs have been added/updated: N
  • Does this PR introduce a breaking change? N
  • I have linked any related GitHub issues to be closed when this PR is merged? Y

Describe the new behavior?

Sortable table headers will now use a <button> element to ensure they are part of the tab order to fix accessibility related issues to triggering sort changes on the columns via keyboard only.

Following W3 table guidance for sortable columns here:
https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/

We should plan to introduce an API for setting the table <caption> as well for improved screen reader support.

Additional information

Fixes #63

@DRiFTy17 DRiFTy17 added patch Increment the patch version when merged accessibility labels Oct 23, 2023
@DRiFTy17 DRiFTy17 requested a review from a team as a code owner October 23, 2023 16:49
@stackblitz
Copy link

stackblitz bot commented Oct 23, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@@ -979,6 +986,16 @@ export class TableFoundation implements ITableFoundation {
this._headCellMouseDownIndex = undefined;
}

private _onSortableHeadCellKeydown(evt: KeyboardEvent): void {
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this use click events instead of keydown and mousedown now that it's a button?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I had the same thought, but when I went to adjust that I realized the mousedown handler is currently overloaded to support multiple pieces of functionality and I didn't have the time to refactor everything out.

If we want to hold off on merging this until that is refactored, I'm fine to do so, but I don't know when I can get to it.

@DRiFTy17 DRiFTy17 merged commit 43f775e into main Oct 27, 2023
11 checks passed
@DRiFTy17 DRiFTy17 deleted the fix/table-sortable-a11y branch October 27, 2023 19:01
@github-actions github-actions bot added the released This issue/pull request has been released. label Oct 27, 2023
Copy link
Contributor

🚀 PR was released in v3.0.0-next.13 🚀

@github-actions github-actions bot added the prerelease This change relates to a prerelease. label Nov 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility patch Increment the patch version when merged prerelease This change relates to a prerelease. released This issue/pull request has been released.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[table] Accessibility: Table headers cannot be accessed/triggered from keyboard
2 participants