Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center."Sufficient visual focus is not provided for certain user interface elements. As an example, within the “Configure block” screen, sufficient visual indication of focus is not provided for the “Save block” and “Delete” buttons. There is only slight change in the color for the buttons which is barely visible. It is expected that a well-defined on-screen indication of the current visual focus, such as a dotted outline be provided for the “Save block” and “Delete” buttons.
This defect exists in IE 11 and Google Chrome Version 55.0.2883.87 m.
Expected result: A well-defined on-screen indication of the current visual focus, such as a dotted outline around the element, is expected to be provided for all user interface elements. In this instance, sufficient visual focus is expected to be provided for the “Save block” and “Delete” buttons.
Reference: Section 508, Part 1194.21, Paragraph (c).
Note: This defect also exists elsewhere within the application."
| Comment | File | Size | Author |
|---|---|---|---|
| #20 | 20200717_124107.png | 2.25 KB | chadhester |
| #20 | 20200717_124051.png | 2.15 KB | chadhester |
| #19 | screenshot_8.9.x.png | 63.85 KB | amourow |
| #18 | 20200717_121757.png | 2.36 KB | chadhester |
| #18 | 20200717_121717.png | 2.29 KB | chadhester |
Comments
Comment #2
cilefen CreditAttribution: cilefen commentedI wrote on one of the other issues you opened that assigning an issue to one's self indicates you are working on the code fix.
Comment #3
kershme CreditAttribution: kershme commentedComment #4
kershme CreditAttribution: kershme commentedComment #5
mgiffordI do agree that this can be improved. Is there a definition for "sufficient visual focus" that is agreed to?
Edit: Also, really useful to provide links for more info like http://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-in...
Comment #6
carloqb3 CreditAttribution: carloqb3 commentedAdding on to the same issue for authenticated users:
As an example, within the “Manage -> Content” screen, sufficient visual indication of focus is not provided for the “Workbench”, “Manage”, “Shortcuts” buttons, column headers and drop down buttons next to the “Edit” links. There is only slight change in the color for the links and buttons which is barely visible. It is expected that a well-defined on-screen indication of the current visual focus, such as a dotted outline provided for all the links such as “Workbench”, “Manage”, “Shortcuts” buttons, column sorters and drop down buttons next to the “Edit” links.
Expected result: A well-defined on-screen indication of the current visual focus, such as a dotted outline around the element, is expected to be provided for all user interface elements. In this instance, sufficient visual focus is expected to be provided for the “Workbench”, “Manage”, “Shortcuts” buttons, column sorters and drop down buttons next to the “Edit” links.
Comment #7
gslexie CreditAttribution: gslexie commentedI'm working on this at a DrupalCon Baltimore sprint right now :)
Comment #8
TwoMice CreditAttribution: TwoMice as a volunteer and commentedHere's an illustration of the low-visibility focus styling, taken from screenshots on the "Block layout" page (admin/structure/block).
Comment #9
gslexie CreditAttribution: gslexie commentedThe problem originates in 'stable' theme because of the 'overflow:hidden' style on the ul.dropbutton, so unfortunately it needs to be resolved in each admin theme independently.
Comment #10
gslexie CreditAttribution: gslexie commentedFixed this for seven theme, by overriding the problem "overflow:hidden" style and copying the 'box-shadow' effect that seven theme uses for focus effects on other buttons. Another member hoped to fix Bartik.
Comment #11
mgiffordComment #13
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedIt's not technically a bug against WCAG 2.0, because that doesn't cover the contrast level of focus styles. Instead, it's one of the new things WCAG 2.1 addresses with 1.4.12 User Interface Component Contrast (Minimum) (AA).
Note: our accessibility core gate targets W3C guidelines, not country-specific regs like section 508. In any case, the new 508 update aligns with WCAG 2.0
Re-parenting the issue as part of our WCAG 2.1 efforts.
TODO:
- Rescope the issue summary? The original report is about Seven's button "halo" focus style, so maybe narrow it to that.
- Review other issues about keyboard focus styles, close or rescope them for WCAG 2.1
Comment #18
chadhester CreditAttribution: chadhester as a volunteer and commentedAppears to be resolved in Drupal v9.0.2. Both buttons reported have a glow outline when given focus by keyboard tabbing. Tested in Chrome v83.
Comment #19
amourowIt is also appears to be resolved in Drupal 8.9.x with moving focus on the button with tab.
Comment #20
chadhester CreditAttribution: chadhester as a volunteer and commentedRetested in IE 11. Looks good.
Comment #21
alexpott@chadhester and @amourow so does this mean we can close this as
Closed (cannot reproduce)orClosed (duplicate)(that'd need to find the issue that fixed this).Comment #22
mgiffordMaybe this is fixed? If not it should be dealt with in D9.
Comment #26
quietone CreditAttribution: quietone at PreviousNext commented#18, #19 and #20 report that this is no longer re-producible. Yay! It has been fixed. Then alexpott asked if this was a duplicate or a cannot reproduce. My skill don't lend themselves to finding fixes for front end issues so I don't think I will find when or where this was fixed.
Since, the 2 of the 3 reports that it is not reproducible are on outdated versions I am closing as outdated.
Thanks.