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.Problem/Motivation
Followup for #2863354: Add border to dialog [x] close button for hover and focus states.
Proposed resolution
While #2915759: :focus is is hard to see for links in the off-canvas dialog ensures that there is visible focus styling, the contrast is not very high. We should update the design to use the focus styling from #2863354: Add border to dialog [x] close button for hover and focus states.
Pay special attention to the CSS reset for the offcanvas library.
Remaining tasks
TBD
User interface changes
Visual change for the offcanvas close button.
Before
After
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | off-canvas-close-after.png | 71.68 KB | samuel.mortenson |
| #4 | off-canvas-close-before.png | 71.95 KB | samuel.mortenson |
| #4 | 2934499-4.patch | 1.89 KB | samuel.mortenson |
Comments
Comment #2
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented#2863354: Add border to dialog [x] close button for hover and focus states has just been marked fixed, so this is active now.
Comment #3
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedComment #4
samuel.mortensonI copied the new styling for core dialog in offcanvas, screenshots attached.
One note from the patch:
top: calc(50% - 6px);isn't using "magic numbers", the 6px is from the combined (new) border size which affected positioning.Comment #5
tedbow@samuel.mortenson thanks!
This looks good to me!
Comment #7
xjmThat's a new one, but definitely not introduced here.
Comment #8
xjmCommitted and pushed to 8.5.x. Thanks!
Comment #10
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedNice work! We're gradually extending coverage of missing/poor focus styles. These ones are super clear and nice to look at.