search

GoogleChromeLabs / ps-analysis-tool

Privacy Sandbox Analysis Chrome Extension and CLI for analysis and understanding of cookie usage on web pages, and new privacy-preserving Chrome APIs
https://www.privacysandbox.com
Apache License 2.0
91 stars 20 forks source link

Improve accessibility around the extension #678

Open fellyph opened 2 months ago

fellyph commented 2 months ago

Describe the bug The extension has support for keyboard navigation and interaction, but some areas require improvements and making consistent across DevTools and PSAT:

  1. Navigation between sections
  2. Capability to select and deselect items with the keyboard
  3. Navigate by all the elements on the screen
  4. Have meaningful descriptions by screen readers
  5. highlight all the interactable elements on the screen

1 - Navigation from the sidebar to the selected sections

https://github.com/GoogleChromeLabs/ps-analysis-tool/assets/330792/9f0e2544-45aa-4d67-acfa-e9eaed4fedfb

  1. Select an element from the navigation sidebar
  2. Navigate with arrows to the cookie database
  3. Press tab
  4. The cursor is still on the sidebar

Expected behavior When the user presses the tab with the cursor over the cookie table option, the cursor should go to the elements inside the cookies table.

2 - Filters are clickable via keyboard

https://github.com/GoogleChromeLabs/ps-analysis-tool/assets/330792/9a1f46b5-2849-4577-83c8-25764780db01

  1. open the filter at the cookie table
  2. navigate to some of the filters
  3. press enter to select the filter
  4. The checkbox doesn't change the state

Expected behavior When the user presses enter in a focused filter, the option should be selected or deselected.

3 - Filters don't have highlight via keyboard navigation

https://github.com/GoogleChromeLabs/ps-analysis-tool/assets/330792/89162cb7-703e-4e88-a71b-c00ed60fae1c

  1. Open the cookie table
  2. Select some filters
  3. go to the search bar and navigate to the filters via the keyboard
  4. the filters will be selected but not highlighted

Expected behavior The selected filter should be highlighted to display the selection

4 - Focus on the top navigation menu

On the cookies insights page, the fixed menu helps navigate between sections to reproduce the issue:

  1. go to the cookies insights page
  2. navigate with tab
  3. the top menu won't be focusable

Expected behavior The top navigation should be focusable

5 - Add labels to the expand view button

https://github.com/GoogleChromeLabs/ps-analysis-tool/assets/330792/5a8f1704-7ca0-4308-817e-0464c04f90dc

The expand button at sections that are using the collapse option has a generic description to reproduce it:

  1. To Cookie Insights page using voice-over
  2. navigate to a section with collapsing button
  3. the description is a generic "button"

Expected behavior Add a meaningful label to describe the button that will collapse a respective section.

6 - navigation via keyboard at the cookie table

https://github.com/GoogleChromeLabs/ps-analysis-tool/assets/330792/baad5d78-b5f0-4c32-8d57-c196d3006d9d

  1. open the cookie table
  2. select the search input field
  3. navigate via keyboard, trying to reach the cookie table

Expected behavior The user should be able to navigate at the cookie table

7 - Settings options are not accessible via the keyboard

Screen recording (2).webm

  1. open the PSAT settings
  2. try to navigate with the keyboard via the options
  3. the focus will skip the toggle for CDP and multitab

Expected behavior The user should be able to change the options via the keyboard

Desktop

Additional context Add any other context about the problem here.