Bug 25984

Summary: Accessibility: Shelf browse lacks focus visibility when cover image is missing
Product: Koha Reporter: Martin Renvoize <martin.renvoize>
Component: OPACAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: aleisha, bolshawh, lucas, oleonard, victor
Version: master   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00, 20.05.03, 19.11.09
Bug Depends on:    
Bug Blocks: 25983    
Attachments: Bug 25984: Add border highlight to anchor element
Bug 25984: Add border highlight to anchor element
Bug 25984: Add minimum height and width to shelf browser covers
Bug 25984: Add minimum height and width to shelf browser covers
Bug 25984: Add minimum height and width to shelf browser covers

Description Martin Renvoize 2020-07-13 10:34:14 UTC
Where items displayed on the ‘Book shelf’ do not include cover images, keyboard focus is
not highlighted by a visible focus indicator. This means that some users may be unable to
determine where their focus is on the page.

Solution:
Ensure that interactive page elements are highlighted by a visible focus indicator when in
focus. This will enable keyboard only users to determine where their focus is on the page
when navigating via keyboard commands. A visible focus indicator can be set using CSS.
For example:

:focus :hover {
outline: 2px solid #f00;
}

Note: The colour used must meet 3:1 against the adjacent colours.
Comment 1 Martin Renvoize 2020-07-13 10:58:47 UTC
Created attachment 106827 [details] [review]
Bug 25984: Add border highlight to anchor element
Comment 2 Martin Renvoize 2020-07-13 11:22:02 UTC
Created attachment 106828 [details] [review]
Bug 25984: Add border highlight to anchor element

Test Plan
1/ Search for an item
2/ Click through to the item
3/ Click the 'Browse shelf' button to expose the shelf browser
4/ Hit 'tab' on the keyboard to tab through the shelf browser
5/ Note each element is highlighted with a red border upon selection
6/ Ensure this is also the case for items where there is not cover image
7/ Signoff
Comment 3 Martin Renvoize 2020-07-13 11:22:52 UTC
Remember to build the CSS from the SCSS file before testing.
Comment 4 Owen Leonard 2020-07-13 16:22:01 UTC
Created attachment 106845 [details] [review]
Bug 25984: Add minimum height and width to shelf browser covers

This patch adds a class to the shelf browser cover image links and a
style for these links defining a minimum height and width. This allows
the browser's default tab focus outline to be visible.

This patch also adds a check for an enabled cover image service before
displaying the cover image links.

This patch introduces whitespace changes so diff accordingly.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Enable the OPACShelfBrowser system preference.
- Enable at least one cover image service (Amazon, Google, Coce, etc).
- Locate a title in the OPAC which has items attached.
- On the bibliographic detail page, click the "Browse shelf" link in the
  table of holdings to display the shelf browser.
- Use the tab key to move the focus to cover images in the shelf
  browser.
- Confirm that the focus outline moves through each cover link whether
  or not there is a cover image available.
- Diable all cover image services.
- Test the shelf browser again and confirm that it's not necessary to
  tap through an empty row.
Comment 5 Martin Renvoize 2020-07-15 07:37:17 UTC
Thanks Owen, that's a much nicer solution :).. Just testing now :)
Comment 6 Martin Renvoize 2020-07-15 11:25:54 UTC
Created attachment 106927 [details] [review]
Bug 25984: Add minimum height and width to shelf browser covers

This patch adds a class to the shelf browser cover image links and a
style for these links defining a minimum height and width. This allows
the browser's default tab focus outline to be visible.

This patch also adds a check for an enabled cover image service before
displaying the cover image links.

This patch introduces whitespace changes so diff accordingly.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Enable the OPACShelfBrowser system preference.
- Enable at least one cover image service (Amazon, Google, Coce, etc).
- Locate a title in the OPAC which has items attached.
- On the bibliographic detail page, click the "Browse shelf" link in the
  table of holdings to display the shelf browser.
- Use the tab key to move the focus to cover images in the shelf
  browser.
- Confirm that the focus outline moves through each cover link whether
  or not there is a cover image available.
- Diable all cover image services.
- Test the shelf browser again and confirm that it's not necessary to
  tap through an empty row.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 7 Martin Renvoize 2020-07-15 11:27:32 UTC
Looks great, much nicer and more consistent experience than my effort.

Signing off.
Comment 8 Katrin Fischer 2020-07-16 06:28:47 UTC
Created attachment 106942 [details] [review]
Bug 25984: Add minimum height and width to shelf browser covers

This patch adds a class to the shelf browser cover image links and a
style for these links defining a minimum height and width. This allows
the browser's default tab focus outline to be visible.

This patch also adds a check for an enabled cover image service before
displaying the cover image links.

This patch introduces whitespace changes so diff accordingly.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Enable the OPACShelfBrowser system preference.
- Enable at least one cover image service (Amazon, Google, Coce, etc).
- Locate a title in the OPAC which has items attached.
- On the bibliographic detail page, click the "Browse shelf" link in the
  table of holdings to display the shelf browser.
- Use the tab key to move the focus to cover images in the shelf
  browser.
- Confirm that the focus outline moves through each cover link whether
  or not there is a cover image available.
- Diable all cover image services.
- Test the shelf browser again and confirm that it's not necessary to
  tap through an empty row.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 9 Jonathan Druart 2020-07-20 15:49:31 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 10 Lucas Gass 2020-07-27 17:25:11 UTC
backported to 20.05.x for 20.05.03
Comment 11 Aleisha Amohia 2020-08-03 23:22:34 UTC
backported to 19.11.x for 19.11.09
Comment 12 Victor Grousset/tuxayo 2020-09-18 20:22:03 UTC
Not backported to oldoldstable (19.05.x). Feel free to ask if it's needed.