Page MenuHomePhabricator

ULS cog: Bottom border of <h3> in sidebar and body background color in skin Vector
Open, MediumPublic2 Estimated Story Points

Description

  1. An update a month ago made the bottom border of <h3 id="p-lang-label"> can not include the gear icon. .portal h3 {overflow: visible;} may fix this.
  2. CSS keyword transparent can still not be well calculated in Safari, leading to linear-gradient(to right, transparent 0, #c8ccd1 35%, #c8ccd1 70%, transparent 100%) looks weird (see below). Replacing transparent by rgb(200, 204, 209, 0) can fix it.
  3. The background color of body is pure gray without a slight blue tint (#f6f6f6). Does this conflict with Wikimedia Design Style Guide?

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 4 2020, 2:58 PM

@alphaArgon

  1. overflow: visible would risk the label in languages with more characters to reach into the settings icon. Having the border not take up all the width seems acceptable
  2. Do you have a screenshot

Safari currently shows


One can see the uneven border line like a wave form of contrast

  1. See T153043: Align Vector skin with WikimediaUI color palette

Change 603613 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Fix portal heading border in Safari

https://gerrit.wikimedia.org/r/603613

With patch above in Safari:

Demian updated the task description. (Show Details)EditedJun 8 2020, 10:16 PM
Demian added a subscriber: Demian.
  1. An update a month ago made the bottom border of <h3 id="p-lang-label"> can not include the gear icon.

Caused by patch 589433 and the UniversalLanguageSelector's gear icon element being added above the h3, not in it (code).
Initial testing shows moving the icon inside h3#p-lang-label and removing the top margin (code) solves this.
This also fixes the same issue in Modern. Monobook is unaffected. Timeless and Minerva lacks this gear icon.
Any concerns?

Change 603665 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/extensions/UniversalLanguageSelector@master] Move the settings icon into the portal heading

https://gerrit.wikimedia.org/r/603665

@Demian Thanks for the comparison, as shared on the patch: This might result in unwanted accessibility side-effect, having read out the button title additionally to the heading level 3. Although I thought it might be an interesting approach in my first reaction, I don't think it's reasonable to move the button into the heading for this small visual glitch.

I know that @santhosh has been fiddling around quite a bit to come to the current result. One idea that I'd be curious why it wasn't considered in the end would be absolute positioning and padding of the h3?

This might result in unwanted accessibility side-effect, having read out the button title additionally to the heading level 3.

Yes. I'll test it with screen-reader. If that happens, I'll try aria-hidden as B plan, I wonder how that would behave when focused.

I know that @santhosh has been fiddling around quite a bit to come to the current result. One idea that I'd be curious why it wasn't considered in the end would be absolute positioning and padding of the h3?

Why not absolute position the gear icon? That's my C plan.

Volker_E added a comment.EditedJun 8 2020, 11:51 PM

aria-hidden would exclude screen readers completely from exposing the button, don't think that's what you want…

ovasileva triaged this task as Medium priority.Jun 9 2020, 5:09 PM
ovasileva set the point value for this task to 2.Jun 9 2020, 5:18 PM

Change 603613 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Fix portal heading border in Safari

https://gerrit.wikimedia.org/r/603613

Removing Vector and Desktop Improvements from task leaving to UniversalLanguageSelector team to decide on last part.

Change 603665 abandoned by Aron Manning:
Move the settings icon into the portal heading

Reason:
In favor of https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UniversalLanguageSelector/ /597401

https://gerrit.wikimedia.org/r/603665

Jdlrobson renamed this task from Bottom border of <h3> in sidebar and body background color in skin Vector to ULS cog: Bottom border of <h3> in sidebar and body background color in skin Vector.Jun 16 2020, 7:32 PM