designupdate

Subscribe to all “designupdate” posts via RSS or follow GitHub Changelog on Twitter to stay updated on everything we ship.

→ ~ cd github-changelog
→ ~/github-changelog|main git log main
showing all changes successfully

Keyboard Navigation Improvements for Hovercards

We are excited to announce new keyboard behavior for navigating and dismissing hovercards without the need for a mouse! This enhancement is designed to make our platform more user-friendly for everyone, particularly those who rely on keyboard navigation.

How It Works

When you focus on a link with a hovercard, you can now press Alt + Up to make the hovercard appear and move focus inside it. This ensures that you can interact with the hovercard content without leaving your keyboard. Focus is trapped within the hovercard, similar to how it would be in a dialog box. To dismiss the hovercard and restore focus to the link, press Esc.

Customizable Settings

In response to both community and internal feedback, we have also introduced a new user setting that allows you to disable all hovercards. This option can be found under Accessibility Settings.

Send us Feedback

You can reach out to us at GitHub Community. Your feedback is invaluable as we strive to create an inclusive and accessible environment for all users.

See more

Accessibility improvements for the contribution graph

The contribution graph now supports keyboard interaction and compatibility with assistive technologies. Users can navigate the graph and filter contributions using the keyboard. While navigating the graph, a summary of each day is displayed visually in a tooltip and announced by screen readers.

Image of a Contribution Graph with the contributions done on June 16 showing in a tooltip

Users can move keyboard focus to the contribution graph and then navigate it using the following commands:

  • Press arrow keys to navigate cell by cell
  • Press Page Up to navigate to the first cell in a column
  • Press Page Down to navigate to the last cell in a column
  • Press Home to navigate to the first cell in a row
  • Press End to navigate to the last cell in a row
  • Press Enter to filter content in the Contribution Activity section by the current cell

If the user is running a screen reader, it will announce the following text when the graph receives keyboard focus:

Contribution Graph, table, 54 columns, 8 rows.
User activity over 1 year of time. Each column is one week, with older weeks to the left. Select a cell to filter the "Contribution Activity" section.

When the user navigates to a cell, the screen reader will read a summary such as:

11 contributions on Monday, February 21, 2022.

We are excited to make one of our favorite GitHub features available to more users! If you encounter any issues with these changes, please leave a reply on this feedback discussion.

See more