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.Creating issue from #1924112-5: Make sure tour toolbar button has :focus styling when tabbed to.
With the present look of the menu bar it is hard to see where you are as there is just a thin outline & link provided around the focused tab button.
I agree that often the browser doesn't do a very good job providing a visible outline of items on focus.
I recall though that the argument against specifically setting a bigger outline with Drupal forms in D7 was that this was something best managed by the browser itself. That if outlines aren't sufficiently highlighted in FF or Chrome then they should be fixed there rather than in the CMS.
Something like a different background color would be great, but right now there is also an underline & an outline in my tests so not sure how critical this is.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | 1929010-opera.png | 5.83 KB | liquid06 |
| #8 | 1929010-firefox.png | 8.23 KB | liquid06 |
| #5 | Bottom-focus.png | 27.24 KB | mgifford |
| #5 | Top-focus.png | 24.01 KB | mgifford |
| #4 | adding-focus-1929010-4.patch | 3.74 KB | mgifford |
Comments
Comment #1
dcmouyard CreditAttribution: dcmouyard commentedUnless the focused state has been specifically designed, I usually just apply the same styling to :focus and :hover.
Comment #2
mgifford@dcmouyard Agreed about :focus :hover generally being the same. Do you think that there needs to be either a more distinct outline or color difference in the menu buttons however?
Comment #3
mgiffordThis should do the trick... It would have been so nice to have SASS or LESS for this, but...
Comment #4
mgiffordRealized that there was no reason to adjust the handle (as it doesn't show when you don't use your mouse), so back to:
Comment #5
mgiffordscreenshots with patch.
Top focus:
Bottom focus:
Comment #6
mgiffordThis should be an easy patch to review for a novice.
Comment #7
liquid06 CreditAttribution: liquid06 commentedI'm a first-timer at the Austin sprint. I'll try reviewing this patch :)
Comment #8
liquid06 CreditAttribution: liquid06 commentedPatch applies cleanly, and this looks like it works well for improving the focus state by matching the hover state. In some browsers there's an outline, but when that's not present, the underline differentiates your location.
Here's some screenshots (all ubuntu):
Comment #9
cilefen CreditAttribution: cilefen commented@liquid06: An even better way to display screenshots to get noticed is to embed them in the issue summary.
Comment #10
liquid06 CreditAttribution: liquid06 commentedComment #11
wylbur CreditAttribution: wylbur commentedInstalled 8.x,
Applied adding-focus-1929010-4.patch
Confirmed that active and hover elements are separated on menu items.
Comment #12
alexpottCommitted ac9286a and pushed to 8.x. Thanks!