Followup for #2863354: Add border to dialog [x] close button for hover and focus states.
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.
TBD
Visual change for the offcanvas close button.
Before
After
| 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 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 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 commentedNice work! We're gradually extending coverage of missing/poor focus styles. These ones are super clear and nice to look at.