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

Improve navigation accessibility and usability #544

Merged

Conversation

thewildmage
Copy link
Contributor

@thewildmage thewildmage commented Oct 22, 2022

This PR does not address any specific open Issue.

Checklist

  • I have signed the CLA
  • I have updated/added any relevant documentation

Description

What's the goal of this PR?

To improve the usability and accessibility of the inter- and intra-page navigation.

What changes did you make?

  • Made the sidebar more consistent across all pages
  • Hid the "Limit results to only X namespace" link when X is the only namespace shown
  • Moved the filter out of the sidebar to a position adjacent to the content it affects
    • This should make it more clear what the filter does. It also makes it easier for someone navigating via keyboard to jump back and forth between the filter and the results
  • Updated the filter form's styling to improve accessibility and better suit its new position
  • Improved the accessibility of the filtering functionality with regard to screen readers
  • Added accessible filter status updates (e.g. "Showing 1 out of 6 namespaces")
  • Made a non-empty filter work on page refresh
  • Handled the case where JavaScript isn't available (by accessibly hiding the filter form and leaving a static namespace count instead)
  • Extracted JavaScript (JS) functions for testing for the availability of JS, showing elements, and hiding elements out into utilities that can be used across other JS functionality for improved consistency

What alternative solution should we consider, if any?

These changes were largely informed by:

I believe based on this research that I've provided a solid solution, but there may be other possible approaches.

I've also tested these changes on MacOS with Firefox, Safari, and Brave (which is Chromium-based) using VoiceOver.

thewildmage and others added 30 commits October 4, 2022 09:10
For improved clarity and to avoid tying design to naming
Is wired up and working, but doesn't feel like it because results update without using it
It's been folded into the filter template
Co-Authored-By: Andrew Suderman <andy@fairwinds.com>
@transient1
Copy link
Contributor

Thanks for the PR, @thewildmage ! Excited to check out these changes.

@sudermanjr sudermanjr assigned sudermanjr and unassigned transient1 Oct 31, 2022
Copy link
Member

@sudermanjr sudermanjr left a comment

Choose a reason for hiding this comment

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

LGTM. Thanks!

@sudermanjr sudermanjr merged commit 89c2c93 into FairwindsOps:master Oct 31, 2022
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.

3 participants