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

Remove rounded corners and accessibility highlights on reporting column headers #4730

Conversation

gilluminate
Copy link
Contributor

@gilluminate gilluminate commented Mar 19, 2024

Closes #

Description Of Changes

Takes a few scattered styles for defining headers/cells and combines them a little better. Also removes the sorting for now.

Code Changes

  • update the getTableTHandTDStyles util to include headers that act as buttons
  • add smarter padding definitions to getTableTHandTDStyles using Chakra's spacing definitions (for consistency) as well as a calc to account for the width of the column resizer
  • take advantage of Chakra's sx function as opposed to hard coding the style property in several instances.
  • update table header menu button size to match the table header, preventing it from causing height inconsistencies.
  • add focus state to table header menu button to preserve accessibility for keyboard users now that the outline is no longer visible.

Steps to Confirm

  • /consent/properties has a table with 3 types of headers. It's a good one to look at for styling consistency.

Pre-Merge Checklist

Copy link

vercel bot commented Mar 19, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
fides-plus-nightly ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 22, 2024 4:49pm

Copy link

cypress bot commented Mar 19, 2024

Passing run #6824 ↗︎

0 4 0 0 Flakiness 0
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.

Details:

Merge 01381cf into b06bca2...
Project: fides Commit: cb686faa40 ℹ️
Status: Passed Duration: 00:37 💡
Started: Mar 22, 2024 4:59 PM Ended: Mar 22, 2024 4:59 PM

Review all test suite changes for PR #4730 ↗︎

Copy link
Contributor

@Kelsey-Ethyca Kelsey-Ethyca left a comment

Choose a reason for hiding this comment

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

Let me know what you think of these suggestions. UAT passing!

…bility-highlights-on-reporting-column-headers
Comment on lines +85 to +90
_focusVisible={{
backgroundColor: "gray.100",
}}
_focus={{
outline: "none",
}}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Kelsey-Ethyca I ended up using the less invasive focus-visible for the bg color, which tends to only apply when user is tabbing with the keyboard and not when clicking. Hopefully this is a nice compromise.

@gilluminate gilluminate merged commit 1e32cb9 into main Mar 25, 2024
13 checks passed
@gilluminate gilluminate deleted the PROD-1781-Remove-rounded-corners-and-accessibility-highlights-on-reporting-column-headers branch March 25, 2024 22:05
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