Implements skip link for navigation #1585
Conversation
It adds a skip link for better navigation It adds an invisible link to the content and the same functionality can be extended for further components as well While navigation using keyboard a link appear which refers to the content. It increases usability for users who wants to skip navigation bar and go directly to content It renders a button which will only be visible on tab press and will disappear once clicked or skipped Works with both mouse click and enter
The approach to use JS was complicated and using just :focus selector fixed the issue and made it more robust and easy It also removes the dynamic anchor element and adds an id to the entry element
| position: absolute; | ||
| left: 23%; | ||
| } | ||
| } |
There was a problem hiding this comment.
The chapter list covers the whole navigation bar. So, if a user skips links one time then he has to use keyboard to use the skip link again.
So if a user clicks on navigation bar and hit tab then without this the first chapter list item is focused.
This also doesn't provide a considerable solution as it only makes the chapter list smaller so the user has some space between the chapter list and the logo to click and use the skip link.
There was a problem hiding this comment.
I removed this for now. Let me know if this makes sense and I will add it again or any other idea you have for that.
There was a problem hiding this comment.
Yeah, I think that's fine. The user can always return to the top of the tab order by focusing the location bar (Crtl+L etc.)
UsmanMuhammad
force-pushed
the
skip-links
branch
3 times, most recently
from
878afe0 to
f6a55c2
Compare
It scrolls down and skip navigation on clicking the skip link to give the user a feel that the navigation links are skipped It also fix the alignment of the button
UsmanMuhammad
force-pushed
the
skip-links
branch
from
3cab299 to
33ea1b0
Compare
3 participants
REDMINE-17403
It adds a skip link for better navigation
It adds an invisible link to the content and
the same functionality can be extended for further
components as well
While navigation using keyboard a link appear which refers
to the content. It increases usability for users who wants
to skip navigation bar and go directly to content
It renders a button which will only be visible on tab press
and will disappear once clicked or skipped
Works with both mouse click and enter