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

Catalog accessibility indicator updates #1487

Conversation

clpetersonucf
Copy link
Member

@clpetersonucf clpetersonucf commented Jul 27, 2023

  • Splits widget catalog filter options into Features and Accessibility. The options can be displayed separately or in combination, and the filters are applied in aggregate.
  • Update accessibility UI elements in widget detail pages.
  • Adds an additional accessibility_description meta_data field to provide additional context about a widget's accessibility status. The indicators are no longer displayed if a widget does not provide accessibility information; the description will simply note that accessibility data is not available.

@clpetersonucf clpetersonucf added the React Branch Related to the React rewrite for Materia label Jul 27, 2023
@clpetersonucf clpetersonucf marked this pull request as ready for review July 28, 2023 20:46
@cayb0rg
Copy link
Contributor

cayb0rg commented Jul 31, 2023

Widget detail page looks good, accessibility filters work great. Just needs some mobile optimization: the pseudo-elements for Features and Accessibility get overlapped on screen widths < 960px, and accessibility filter completely disappears on screen widths < 720px.

@clpetersonucf
Copy link
Member Author

Updated filter display for responsive screen widths.

@cayb0rg
Copy link
Contributor

cayb0rg commented Aug 3, 2023

If possible, we should keep the labels "Filter by feature" and "Filter by accessibility" after a filter is checked on smaller screen sizes.

image

Other than that, this looks good to go.

Copy link
Contributor

@FrenjaminBanklin FrenjaminBanklin left a comment

Choose a reason for hiding this comment

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

This looks good and functions well, I can only think of two pretty minor things that could maybe be improved:

  • The ARIA labels for the toggles aren't very descriptive, something like 'display filter options by feature' when toggling on or 'hide filter options by feature' when toggling off etc. would probably do. Or potentially a more verbose instructive label since there isn't much in the way of explaining how to use the filters.
    • Likewise the filter options themselves could probably use a more descriptive label so it's more immediately clear what they do.
  • The filter options are all reachable in the tab order whether they've been toggled or not.

I wouldn't hold up the initial release of these features for either of these unless they're super quick fixes, though.

@clpetersonucf
Copy link
Member Author

Improved filter accessibility based on feedback. Merging.

@clpetersonucf clpetersonucf merged commit f950675 into ucfopen:issue/support-dashboard-in-react Aug 9, 2023
2 checks passed
@clpetersonucf clpetersonucf deleted the react/accessibility-indicator-polish-part-two branch August 9, 2023 16:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
React Branch Related to the React rewrite for Materia
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants