Bug 28469 - Move "Skip to main content" link to top of page
Summary: Move "Skip to main content" link to top of page
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low trivial (vote)
Assignee: David Cook
QA Contact: Testopia
URL:
Keywords:
Depends on: 22807
Blocks:
  Show dependency treegraph
 
Reported: 2021-05-27 03:24 UTC by David Cook
Modified: 2021-08-16 18:59 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Text to go in the release notes:
Version(s) released in:
21.11.00,21.05.03,20.11.09


Attachments
Bug 28469: Move "Skip to main content" to top of OPAC page (1.90 KB, patch)
2021-05-27 03:41 UTC, David Cook
Details | Diff | Splinter Review
Bug 28469: Move "Skip to main content" to top of OPAC page (1.95 KB, patch)
2021-05-27 21:54 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 28469: Move "Skip to main content" to top of OPAC page (2.02 KB, patch)
2021-05-28 03:52 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 28469: Move "Skip to main content" to top of OPAC page (2.08 KB, patch)
2021-07-23 16:38 UTC, Nick Clemens
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description David Cook 2021-05-27 03:24:27 UTC
Both of the following links seem to indicate that the "Skip to main content" link should be at the top of the page and before the navigation, but we've put it in the nav element. 
https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/
https://www.w3.org/TR/WCAG20-TECHS/G1.html

I've mostly noticed this because I'm adding content above the nav bar and it's causing the "Skip to main content" button to display incorrectly.
Comment 1 David Cook 2021-05-27 03:41:00 UTC
Created attachment 121442 [details] [review]
Bug 28469: Move "Skip to main content" to top of OPAC page

This patch moves the "Skip to main content" button out of the nav
element and to the top of the <body> element, so that it's the first
(potentially) viewable element on the page.

This means you can inject content above the navbar, which has
a relative position, and it won't disrupt the display of the
"Skip to main content" button.

To test:
1) Apply patch
2) Same test plan as Bug 22807:
Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.
Comment 2 Martin Renvoize 2021-05-27 09:04:50 UTC
Added our two accessibility advocates to take a look at this.

It seems like a reasonable change to me.. honestly I can't remember why I put it within the nav in the first place...
Comment 3 Lucas Gass 2021-05-27 21:54:05 UTC
Created attachment 121464 [details] [review]
Bug 28469: Move "Skip to main content" to top of OPAC page

This patch moves the "Skip to main content" button out of the nav
element and to the top of the <body> element, so that it's the first
(potentially) viewable element on the page.

This means you can inject content above the navbar, which has
a relative position, and it won't disrupt the display of the
"Skip to main content" button.

To test:
1) Apply patch
2) Same test plan as Bug 22807:
Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 4 Lucas Gass 2021-05-27 21:55:18 UTC
Nice! Works good and is much better if you'd like to insert content above the navbar. I used this jQuery to test:

$('<div>TEST</div>').insertBefore( $('.navbar') )
Comment 5 David Cook 2021-05-28 01:46:59 UTC
Thanks for adding that test, Lucas!
Comment 6 wainuiwitikapark 2021-05-28 03:52:15 UTC
Created attachment 121468 [details] [review]
Bug 28469: Move "Skip to main content" to top of OPAC page

This patch moves the "Skip to main content" button out of the nav
element and to the top of the <body> element, so that it's the first
(potentially) viewable element on the page.

This means you can inject content above the navbar, which has
a relative position, and it won't disrupt the display of the
"Skip to main content" button.

To test:
1) Apply patch
2) Same test plan as Bug 22807:
Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz>
Comment 7 Nick Clemens 2021-07-23 16:38:18 UTC
Created attachment 123146 [details] [review]
Bug 28469: Move "Skip to main content" to top of OPAC page

This patch moves the "Skip to main content" button out of the nav
element and to the top of the <body> element, so that it's the first
(potentially) viewable element on the page.

This means you can inject content above the navbar, which has
a relative position, and it won't disrupt the display of the
"Skip to main content" button.

To test:
1) Apply patch
2) Same test plan as Bug 22807:
Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 8 Jonathan Druart 2021-07-26 10:47:54 UTC
Pushed to master for 21.11, thanks to everybody involved!
Comment 9 Kyle M Hall 2021-07-30 15:07:12 UTC
Backported to 21.05.x for 21.05.03
Comment 10 Fridolin Somers 2021-08-03 04:56:09 UTC
Pushed to 20.11.x for 20.11.09
Comment 11 Victor Grousset/tuxayo 2021-08-16 18:59:59 UTC
Not backported to oldoldstable (20.05.x). Feel free to ask if it's needed.