Giters

ifmeorg / ifme

Free, open source mental health communication web app to share experiences with loved ones

Home Page:http://www.if-me.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fix keyboard navigation for modals

julianguyen opened this issue · comments

commented

Description

When using keyboard navigation to TAB through a page, modals should not open up unless the ENTER key is hit. Currently, this is not happening when a user hits TAB on a button that triggers a modal, the modal opens up.

Fixing this issue should be done in the React component for Modal.

Reproduction Steps

Current Behaviour

  1. TAB through the entire page until you hit a button that opens a modal
  2. After you are focused on the button, hit TAB again
  3. The modal will open

Expected Behaviour

  1. TAB through the entire page until you hit a button that opens a modal
  2. After you are focused on the button, hit TAB again
  3. The focus should be on the next link or button on the page
  4. Refresh the page and TAB` through the entire page until you hit a button that opens a modal
  5. Hit ENTER and the modal should open up

Contributor Blurb Modals

These appear on the non-signed in Homepage and the About page (non-signed in and signed in).

Sep-30-2022 22-26-53

Notification Modal in the Dashboard Navigation

This appears on every signed-in page.

Sep-30-2022 22-23-55

Please assign yourself (via the Assignees dropdown), if you do want to work on this issue. Can't find yourself? You need to join our organization.

Check out our Picking Up Issues guide if you haven't already!