Problem/Motivation
Boldness of contextual links are not consistent through out the site. In some places its coming as bold and in some other places its using normal font weight. This depends on the block its coming under. The reason is that, in the second case links are inheriting font-weight style from its parent element, nav.secondary-nav .


Steps to reproduce
Create base installation of D10 or D11, using the default theme (Olivero).
Try opening contextual links of Primary navigation. Links are showing with normal font weight.
Try opening contextual links of Secondary navigation. Links are showing with bold font weight.
Proposed resolution
Make the contextual links font weight consistent (either bold or normal) for all types of blocks.
| Comment | File | Size | Author |
|---|---|---|---|
| #18 | secondary-nav-contextual.png | 1.18 MB | shweta__sharma |
| #18 | secondary-nav.png | 1.16 MB | shweta__sharma |
| #18 | primary-menu.png | 3.46 MB | shweta__sharma |
| #11 | Secondary_Navigation_Contexual_Links.png | 10.56 KB | sijumpk |
| #11 | Primary_Navigation_Contexual_Links.png | 9.73 KB | sijumpk |
Issue fork drupal-3405153
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
nitin shrivastava commentedComment #6
nitin shrivastava commentedComment #7
sijumpk commentedChecked and it seems like changes are working. Adding screen recording.
Comment #8
smustgrave commentedUnless it's failing accessibility color contrast I believe this is a won't fix.
Comment #9
smustgrave commentedShould be noted how this is a bug and not a personal preference though
Comment #10
larowlanI'm not sure what this is fixing, the issue summary reads like it was written by AI
Can we get a plain text description with before and after screenshots please
Comment #11
sijumpk commentedComment #12
sijumpk commented@larowlan, lol. Its sounds like an AI generated text for me too. So updating the summary to make some more sense.
@smustgrave, please see the updated summary. Some links are inheriting the font weight of its parent block. Upon checking, the fix @Nitin shrivastava provided is fixing this inconsistency.
Comment #13
smustgrave commentedIt should be looked at when that color was added if it was done on purpose.
Comment #14
sijumpk commentedColor for all links are consistent (#333) and its declared in core/modules/contextual/css/contextual.theme.css. But font-weight is not declared in that css file. Because of that its getting inherited from its parent element, and is inconsistent depending on the blocks its showing.
Comment #15
larowlanThanks, that issue summary is much nicer
Can we remove the redundant MRs, there's three so it's not clear which one is up for review
Comment #18
shweta__sharma commentedI just took a look into this issue and after spending some minutes on it what I understand here is that - The contextual link is working fine as it should work. The font weight is normal but the main issue is caused because the CSS was given to the secondary nav which is making all the links bolder inside the secondary nav. So we should not target the secondary nav class directly to make the links bold. Instead of targeting the secondary nav (parent class), we should target the
secondary-nav__menu-link(child class) class as we did for the primary nav.See screenshots for better understanding :)
Comment #19
sijumpk commented@shweta__sharma, why should we alter styles with menu items, its upto the theme using. There is already a selector (".contextual-region .contextual .contextual-links a") present for this element in contextual.theme.css file.
@larowlan, the MR I checked is !5613, its the only pipeline passed one. And its seems like fixing the problem
Comment #20
smustgrave commentedIt is minor but the boldness is there in olivero nav
Comment #21
wim leersComment #25
lauriiiCommitted c2021dd and pushed to 11.x. Also cherry-picked to 10.2.x. Thanks!
Do we want to fix this in Stable 9 too? Any potential disruption seems unlikely enough that this could potentially be accepted there.