| Summary: | Accessibility: Shelf browse lacks focus visibility when cover image is missing | ||
|---|---|---|---|
| Product: | Koha | Reporter: | Martin Renvoize (ashimema) <martin.renvoize> |
| Component: | OPAC | Assignee: | Owen Leonard <oleonard> |
| Status: | CLOSED FIXED | QA Contact: | Testopia <testopia> |
| Severity: | enhancement | ||
| Priority: | P5 - low | CC: | aleisha, bolshawh, lucas, oleonard, victor |
| Version: | Main | ||
| 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
|
|
| Circulation function: | |||
| 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 |
||
Created attachment 106827 [details] [review] Bug 25984: Add border highlight to anchor element 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 Remember to build the CSS from the SCSS file before testing. 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. Thanks Owen, that's a much nicer solution :).. Just testing now :) 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> Looks great, much nicer and more consistent experience than my effort. Signing off. 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> Pushed to master for 20.11, thanks to everybody involved! backported to 20.05.x for 20.05.03 backported to 19.11.x for 19.11.09 Not backported to oldoldstable (19.05.x). Feel free to ask if it's needed. |
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.