search

robby1066 / keepposted-help

Documentation, Issue Tracker, and Repository of Knowledge For Keep Posted (www.keepposted.io) — A way to keep teams informed and connected without disrupting their focus.
https://www.keepposted.io
1 stars 0 forks source link

Tab order on message display page includes a lot of hidden elements #30

Closed robby1066 closed 3 years ago

robby1066 commented 3 years ago

Describe the bug

On the message display page, the tab order includes several hidden elements and creates possibilities for people to do things they almost certainly don't intend to when navigating by keyboard (such as submitting an empty feedback form.

Steps To Reproduce

  1. Go to a Keep Posted message page
  2. Use the tab key to cycle through the focusable elements
  3. Notice now there are several elements in the tab order that are hidden from view

Expected behavior

The tab order of the message display page should only include visible elements

Screenshots

Using the accessibility inspector in Firefox, with tabbing order turned on, reveals the hidden elements and their place in the tab order. image

robby1066 commented 3 years ago

this is related to #1

robby1066 commented 3 years ago

Was able to block the hidden, focusable elements from keyboard focus, but it involved some things that felt a little too clever. It seems solid, but I'm going to spend a while testing this before closing, just to make sure.

robby1066 commented 3 years ago

Deployed and tested on Feb 8, 2021. Still feels more complicated under the hood than it should be, but the tab orders make sense and no hidden elements steal the focus while tabbing.