Follow-up to #2983568: Audit and improve focus styles across the Umami theme for logged out users. This was deferred so that it wouldn't hold up all the other awesome wins in the main issue.
When a multi-line card title link has focus, the outline looks messy in Firefox. There are overlapping boxes interfere with reading the text:
Compare with the appearance in Chrome. One box outline around all rows makes it easier to read.
Make this neater and consisent between browsers.
Idea: .view-mode-card .field--name-title { display: inline-block; }
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | overlapping-box-focus-3016658-9.patch | 520 bytes | pawandubey |
| umami-card-title-multi-line-focus-style-chrome.png | 14.55 KB | andrewmacpherson | |
| umami-card-title-multi-line-focus-style-firefox.png | 19.1 KB | andrewmacpherson |
Comments
Comment #2
andrewmacpherson commentedComment #3
andrewmacpherson commentedIt's probably best to leave this issue until after we have committed #2983568: Audit and improve focus styles across the Umami theme for logged out users. I've marked this postponed, and I'll set it back to active when at the right time.
Comment #4
andrewmacpherson commentedThis issue can be active again, since #2983568: Audit and improve focus styles across the Umami theme for logged out users is fixed.
Comment #5
andrewmacpherson commentedComment #6
andrewmacpherson commentedSorry, clumsy fingers on a greasy phone.
Comment #7
pawandubey commented@andrewmacpherson
I just verified this issue and its replicated at my end too. I have suggestion on this issue is that instead of using
.view-mode-card .field--name-title { display: inline-block; }which can fix the issue of focus but have impact on the line-height of the text and for that we need to addline-height:2.1rem;to match the same but still I am able to find little bit 1px of difference from the top of the content area due to change in the<span>tag style todisplay: inline-block;.Its more better to apply this style to parent element
<a>and it can fix the focus issue and no impact on line-height of any element.CSS Code:
Let me know your thought on this, so I can raise the patch accordingly.
Comment #8
andrewmacpherson commented@pawandubey - thanks for trying out different ways to make this work better. Would you like to provide a patch so we can try it out?
A 1px difference might be something we can live with :-)
Comment #9
pawandubey commented@andrewmacpherson
Please review and test the attached patch file and let me know your feedback on this.
Comment #10
pawandubey commentedComment #11
shaalPatch #9 works great,
but through #3034751: Remove link from node title in Card display mode to improve accessibility - the title will become just text without a link, which makes this patch obselete.
(what's the way to close an issue while giving people who participated in it a credit?)
Comment #12
pawandubey commented@shaal
Thanks for bringing this into our attention.
I have verified your patch on #3034751: Remove link from node title in Card display mode and can confirm that this issue#3016658 not require any further.
Comment #13
andrewmacpherson commentedIf it's closed as a duplicate, we often credit them on the other issue (i.e. the one we decided to make canonical).
You can add a comment to the main issue. Something like "closed issue X as a duplicate issue of this one. Please credit fred who had good ideas there."
Then it's up to the committers. Give them a useful summary to make it easy.
If it's closed as outdated, I don't think we have a good way to handle credits.
Comment #15
pawandubey commentedI think we can close this issue as its not replicating anymore.
Comment #16
pawandubey commented