search

camicroscope / caMicroscope

Digital pathology image viewer with support for human/machine generated annotations and markups.
BSD 3-Clause "New" or "Revised" License
255 stars 295 forks source link

[Accessibility] Info Page: Details modal is not keyboard accessible #996

Open nwanduka opened 4 months ago

nwanduka commented 4 months ago

Describe the bug The details modal on the Info page is not keyboard accessible. There are two interactive components on it: the cancel icon at the top right of the modal and the cancel button at the bottom right. None of the components are accessible using the tab key.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'Info' on the nav bar
  2. Click on 'Details'
  3. Press the tab key on your keyboard
  4. See error

Expected behavior Users should be able to close the details modal entirely using their keyboard.

nwanduka commented 3 months ago

Update:. Turns our both buttons in the details modal are keyboard accessible. However, there's a problem with the focus order when the modal is active. Currently:

  1. When the details modal opens, keyboard focus does not automatically move to any element within the modal.
  2. Instead, when users start tabbing, the focus begins on elements of the main page that are visually hidden behind the modal.
  3. Users must tab through all these hidden main page elements before reaching the interactive elements within the modal (such as the cancel icon and button)
github-actions[bot] commented 7 hours ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.