Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Table column header tab index fix #1883

Merged
merged 9 commits into from
Nov 13, 2023
Merged

Table column header tab index fix #1883

merged 9 commits into from
Nov 13, 2023

Conversation

cm9361
Copy link
Contributor

@cm9361 cm9361 commented Nov 9, 2023

Summary

What was changed:
The Terra Table was updated such that the column headers will have a tab index on the button, if it exists, or else the table cell element. Previously, the table cell for a grid context always had a tab index of -1. The DataGrid component was also updated to properly account for this change.

Why it was changed:
The change was made because the cell having a tab index of -1 when a button was present caused the screen reader to read both element values. This change resolved the accessibility issue.

Testing

This change was tested using:

  • WDIO
  • Jest
  • Visual testing (please attach a screenshot or recording)
  • Other (please describe below)
  • No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • UX review
  • Accessibility review
  • Functional review

Additional Details

N/A

This PR resolves:

UXPLATFORM-9804


Thank you for contributing to Terra.
@cerner/terra

}

// Determine if button element is required for column header
const hasButtonElement = isSelectable && displayName;
Copy link
Contributor

Choose a reason for hiding this comment

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

non-blocking nit: Since we're making this change, we could probably declare this before the if statement on line 260.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I put it here so that the buttonTabIndex logic would be together in one block of code.

@@ -11,6 +11,7 @@
* Fixed issue where column header cell was receiving tab focus instead of the button for table role.
* Fixed column header left border style.
* Fixed resize handle being communicated when non-header cell is focused.
* Fixed tab index issues in the column header cells.
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe this is in the wrong section after Friday's release

@github-actions github-actions bot temporarily deployed to preview-pr-1883 November 13, 2023 15:08 Destroyed
@cm9361 cm9361 merged commit 434d99b into main Nov 13, 2023
21 checks passed
@cm9361 cm9361 deleted the table-column-header-tabindex branch November 13, 2023 15:41
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants