Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Usability bug. Default focus all the way around the div separates it visually from the details element.
Current:
Expanded
Proposed:
Expanded
Can be accomplished with the following CSS:
summary:focus {
border-top: 3px solid rgb(0, 116, 189);
outline: none;
color: rgb(0, 116, 189);
margin-top: -3px;| Comment | File | Size | Author |
|---|---|---|---|
| #8 | Screen Shot 2014-12-03 at 9.41.14 PM.png | 65.75 KB | lauriii |
| #6 | fix_focus_effect_on-2368393-6.patch | 427 bytes | domosapiens |
| #4 | fix-focus-effect-on-summary-details-2368393-4.patch | 494 bytes | domosapiens |
| #1 | Screen Shot 2014-11-03 at 1.13.43 PM.png | 41.17 KB | tkoleary |
| #1 | Screen Shot 2014-11-03 at 1.13.52 PM.png | 62.37 KB | tkoleary |
Comments
Comment #1
tkoleary commentedComment #2
tkoleary commentedComment #3
lewisnymanThis is a good improvement
Comment #4
domosapiens commentedI created a patch of the suggested css by @tkoleary.
Note that this only works in Chrome and Safari, because the other browsers are using a polyfill. Is there extra css needed for the polyfill browsers?
Comment #5
lewisnymanI think this CSS should live in the Seven CSS files, in elements.css
Comment #6
domosapiens commentedI created the patch for Seven as @Lewis suggested.
Comment #7
lauriiiComment #8
lauriiiI don't get any focus effect on Firefox. Works on Chrome and Safari.
Firefox focus:
Comment #9
tkoleary commented@lauriii c
Visually looks right to me after a quick look
Comment #10
skippednote commentedThe
detailselement hasn't been implemented in latest stable build of Firefox yet. Therefore the focus state isn't present on the summary element.I think we should commit this for now as it will be implemented as per the W3C standards for Firefox soon enough. I've tested it in stable builds of other major browsers and it is working as expected on all except Firefox and IE.
Ref:
http://caniuse.com/#feat=details
https://bugzilla.mozilla.org/show_bug.cgi?id=591737
http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#t...
Comment #11
lauriiiI agree with @skippednote. Thanks for your comment and research! This isn't problem caused by this issue.
Comment #12
alexpottCSS changes are unfrozen in beta. Committed 5662f41 and pushed to 8.0.x. Thanks!
Comment #15
Bojhan commentedLets not do it soo invasive, lets do #2487704: Use underline as the focused state (not border left/bottom)
Comment #16
skippednote commented