search

omnivore-app / omnivore

Omnivore is a complete, open source read-it-later solution for people who like reading.
https://omnivore.app
GNU Affero General Public License v3.0
12.34k stars 622 forks source link

Add focus indicators to improve accessablity #2248

Open Bad3r opened 1 year ago

Bad3r commented 1 year ago

Please consider adding focus indicators

Keyboard users typically navigate their way through websites by pressing the tab key. This allows them to jump from one interactive element on the page to another.

Just like mouse users, they need to be able to see where they are on a page as they Tab their way through it; otherwise, they won’t be able to identify the elements they are interacting with. That’s what focus indicators are for.

A focus indicator is a visual indicator that “highlights” the currently focused element. This visual indicator is commonly presented as an outline around the element. An outline takes the shape of its element, and since every element in CSS is a rectangle, an outline is, therefore, usually a rectangle drawn around an element. (source)

jacksonh commented 1 year ago

https://github.com/omnivore-app/omnivore/pull/2249

jacksonh commented 1 year ago

Let me know how this works for you. Can always be improved!

Bad3r commented 1 year ago

Awesome, thank you. Minor note; it's not possible to select the omnivore logo using Tab either from the homescreen to open the menu or from the reader view to go to home view. image

jacksonh commented 1 year ago

oh are you on a laptop with a smaller screen there or using keyboard with iPad? I'll try to add a tab index on that.

Bad3r commented 1 year ago

@jacksonh lol no I just use omnivore like this: image

jacksonh commented 1 year ago

PLayed around with adding the tab index and the annoying thing is hitting enter wont work, so I need to figure out how we trigger actions on these elements that aren't buttons.

Bad3r commented 1 year ago

@jacksonh confirming the delete dialog does not work.

Steps to reproduce: