✨ (a11y) make time slider keyboard accessible

[sophiamersmann]

Summary

• Grapher's time slider is inaccessible to keyboard users and screen readers (as described in Accessibility considerations for year sliders #3137)
• This PR doesn't change fundamentals but improves the status quo by implementing the Slider pattern defined here:
  • Adds the start and end thumbs to the tab sequence
  • Adds aria information that is accessible to screen readers
  • Adds support for keyboard navigation via arrow keys

Important limitation:

• Keyboard navigation only allows updating both sliders separately. It is currently impossible – by keyboard navigation only – to enter "single-year" mode if a chart has range mode

Other a11y improvements

• Use a <button /> when appropriate (instead of links or divs)
• Add aria labels for buttons that may not contain a textual label
• Add focus state to the LabelledSwitch component

Summary by CodeRabbit

• New Features
  • Enhanced accessibility across various components with the addition of aria-label attributes.
  • Improved keyboard navigation for the timeline component with new keyboard event handling methods.
• Refactor
  • Changed tab elements from anchor (<a>) tags to button (<button>) tags in the ContentSwitchers component for better semantic HTML and accessibility.
  • Updated the ActionButton component to hide tooltips on mouse leave.
• Style
  • Adjusted CSS selectors in ContentSwitchers to apply styles to button elements instead of anchor tags.

[coderabbitai]

Warning

Rate Limit Exceeded

@sophiamersmann has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 9 minutes and 54 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between 308b7c7 and 36d59a1.

Walkthrough

The updates focus on enhancing accessibility and usability across several components of the Our World in Data Grapher. Changes include the shift from anchors to buttons for interactive elements, the addition of aria-label for better accessibility, and improved keyboard interaction for timeline controls. These modifications aim to make the grapher more intuitive and accessible to a wider range of users.

Changes

File Path	Change Summary
.../ActionButtons.tsx & .../EntitySelectionToggle.tsx & .../SettingsMenu.tsx	Added aria-label for improved accessibility.
.../ContentSwitchers.scss & .../ContentSwitchers.tsx	Switched from <a> to <button> and updated event handlers and attributes for better usability.
.../TimelineComponent.tsx & .../TimelineController.ts	Enhanced keyboard interaction, added accessibility attributes, and introduced methods for timeline manipulation.

Related issues

• Accessibility considerations for year sliders #3137: The changes enhance accessibility and usability, particularly for year sliders, addressing objectives for improved behavior, keyboard accessibility, and the use of proper HTML form controls.

"In the world of data, big and small,
We hop through graphs, making sense of it all.
With buttons and sliders, now more refined,
A leap towards access, for all humankind. 🐰🌍✨"

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 1

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 85258e3 and 308b7c7.

Files selected for processing (7)

• packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx (1 hunks)
• packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss (3 hunks)
• packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx (1 hunks)
• packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx (1 hunks)
• packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx (1 hunks)
• packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx (8 hunks)
• packages/@ourworldindata/grapher/src/timeline/TimelineController.ts (3 hunks)

Additional comments: 17

packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss (3)

• 27-27: The change from <a> to <button> in CSS selectors is correct and aligns with accessibility improvements. Ensure that corresponding HTML changes are made in the components to match these selectors.
• 72-72: The CSS selector update for active state from <a> to <button> is appropriate and enhances semantic HTML use, contributing to better accessibility.
• 108-108: The CSS change for padding adjustment in .ContentSwitchers:not(.iconOnly) li > button is consistent with the element change from <a> to <button>. This ensures styling consistency across different states of the component.

packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx (1)

• 85-85: Adding an aria-label attribute dynamically composed from label.action and label.entity properties is a significant improvement for accessibility, making the button's purpose clear to screen reader users.

packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx (2)

• 83-83: The change from <a> to <button> in the Tab component, along with the update to the onClick event handler type, is a positive change for accessibility and semantic HTML. This aligns with best practices for interactive elements.
• 89-96: Adding an aria-label to the button and updating the data-track-note attribute to include the props.tab value are good practices for accessibility and analytics. This ensures that the purpose of each tab is clear to all users and interactions can be tracked accurately.

packages/@ourworldindata/grapher/src/timeline/TimelineController.ts (6)

• 68-70: The addition of the getPrevTime method is a logical extension of the timeline control functionality, allowing for more granular control over the timeline's start and end times through keyboard interactions.
• 118-121: The increaseStartTime method correctly implements functionality to adjust the start time of the timeline forward, enhancing keyboard accessibility for the timeline component.
• 123-126: The decreaseStartTime method provides a way to adjust the start time of the timeline backward using keyboard inputs, which is a necessary feature for full keyboard accessibility.
• 128-131: The increaseEndTime method allows users to extend the end time of the timeline forward, which is crucial for users relying on keyboard navigation.
• 133-136: The decreaseEndTime method enables users to move the end time of the timeline backward, ensuring that users can fully control the timeline through keyboard inputs.
• 243-249: The methods setStartToMax and setEndToMin provide additional control over the timeline, allowing for quick adjustments to the timeline's bounds. This enhances the usability of the timeline component.

packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx (1)

• 350-350: Adding an aria-label attribute with the value of props.label to the ActionButton component is a significant improvement for accessibility, ensuring that the purpose of each action button is clear to screen reader users.

packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx (1)

• 424-424: Adding an aria-label attribute to the settings menu button is a good practice for accessibility, making the button's function clear to screen reader users.

packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx (3)

• 258-264: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [261-270]

Replacing a <div> with a <button> for the timeline edge marker is a positive change for accessibility, as it makes the element interactive and accessible via keyboard. Ensure that corresponding CSS and event handlers are properly adjusted to maintain functionality.

• 282-293: The method updateStartTimeOnKeyDown correctly handles keyboard input for adjusting the start time of the timeline, which is essential for keyboard accessibility.
• 295-306: The method updateEndTimeOnKeyDown provides functionality for adjusting the end time of the timeline through keyboard inputs, enhancing the component's accessibility.

[danyx23]

Looks great!