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

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


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 (lukeg)
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, Wainui Witika-Park
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 (kidclamp)
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 (ashimema) 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 (lukeg) 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 (lukeg) 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 Wainui Witika-Park 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 (kidclamp) 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 (khall) 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.