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

Accessibility Updates #4683

Merged
merged 12 commits into from
Oct 31, 2024
Merged

Conversation

nick-next
Copy link
Contributor

Description

This PR implements improvements following an accessibility sweep of the home page, and includes the following fixes and improvements:

  • significant reworking of the carousel's tab handling; it now handles switching between slides by tab graciously regardless of the content.
  • addition of aria labels and corrections to existing aria labels.
  • the media text component can now take an optional alt prop in lieu of (or in addition to) the title, with at least one of them being required.
  • The headers in the rich menus are adjusted to better match the hierarchy.
  • tab outlines are fixed for the main menu.
  • Ids that could be duplicated have been removed. In the case of the search bar, we could not remove the id at this stage (because it is tied to downstream functionality) but we are now selectively rendering the mobile and desktop menu to prevent the duplicate id. To facilitate this selective rendering, we have added a breakpoints hook that allows us to apply Bootstrap-like media queries on the TypeScript side. This breakpoints hook may proof to be a generally useful utility.

@beets beets requested review from beets and dwnoble and removed request for beets October 22, 2024 04:08
- `only("md")`: Returns true if the window is within the "md" screen size range (768px or larger and smaller than 1068px).
*/

interface BreakpointInterface<B extends Breakpoints = Breakpoints> {
Copy link
Contributor

Choose a reason for hiding this comment

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

Very helpful!

@dwnoble
Copy link
Contributor

dwnoble commented Oct 24, 2024

/gcbrun

nick-next and others added 11 commits October 30, 2024 19:43
…event invalid HTML, prevent accessibility issues with certain readers and prevent down-the-line JS issues if we rely on the ids).
… cannot yet be updated). In the long term, we could look at changing this so that it is no longer id based, but for now, there should only be one search box on the screen at the same time.

So rather than simply hiding the desktop search box in mobile view, and vice versa, we are now selectively rendering the header in the containing React component.

To facilitate this, this push also adds in a breakpoints hook that allows us to apply Bootstrap-like media queries on the TypeScript side (this hook may be more generally useful).
…he title being required (both are fine). If provided, alt will be used as the alt for the image; otherwise the title will be used.
…utton and the corresponding submenu. Adds aria-controls and aria-expanded to the button for better accessibility compliance
…he header bar (no longer required now that we are selectively rendering the headers).
@nick-next nick-next merged commit ac8fdad into datacommonsorg:master Oct 31, 2024
9 checks passed
hqpho added a commit that referenced this pull request Nov 4, 2024
The height attribute has not been applied since
#4683 changed
`#main-header-logo` to `.main-header-logo`.
@nick-next nick-next deleted the accessibility branch November 14, 2024 03:50
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.

4 participants