Bug 28469

Summary:	Move "Skip to main content" link to top of page
Product:	Koha	Reporter:	David Cook <dcook>
Component:	OPAC	Assignee:	David Cook <dcook>
Status:	CLOSED FIXED	QA Contact:	Testopia <testopia>
Severity:	trivial
Priority:	P5 - low	CC:	bolshawh, fridolin.somers, kyle, lucas, martin.renvoize, victor, wainuiwitikapark
Version:	Main
Hardware:	All
OS:	All
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:
Bug Depends on:	22807
Bug Blocks:	23003
Attachments:	Bug 28469: Move "Skip to main content" to top of OPAC page Bug 28469: Move "Skip to main content" to top of OPAC page Bug 28469: Move "Skip to main content" to top of OPAC page Bug 28469: Move "Skip to main content" to top of OPAC page

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.