Page MenuHomePhabricator

Update Vector menu CSS to use `vector-menu-heading` instead of `h3`
Closed, ResolvedPublic

Description

Description

Vector menus all use the 'vector-menu-heading' class, but our CSS usually directly uses h3 in the selectors. Using the class will reduce CSS specificity and is more readable/maintainable long term because the styles are less dependent on the HTML.

We also want to replace the h3 element in modern vector with a non heading element like a div to avoid messing up the heading structure

AC

  • Instances of h3 are removed from Menu CSS and replaced with vector-menu-heading
  • h3 elements are replaced with label elements in modern vector
  • All menu styles remain the same in Vector and legacy Vector. Menus in this context include all "dropdown menus", "tab menus", and "portlet menus" (https://phabricator.wikimedia.org/F34972677)

QA Results - Beta

ACStatusDetails
1T290280#7764249
2T290280#7764249
3T290280#7764249

QA Results - Prod

Event Timeline

bwang triaged this task as Low priority.Sep 2 2021, 8:32 PM
bwang removed a subscriber: Aklapper.

I am interested to work on this ,please assign this task .

Sir/Madam,
I am a beginner and want to work on this issue. Please assign it to me.

i work on this issue if anyone doesn't want to work .please assign it to me.

can anyone tell where is the repository ? please send repository link.also tell file path

In general, please also see https://www.mediawiki.org/wiki/New_Developers (and the section "Some general communication tips"). Thanks! :)
You can find the code repository URL by clicking on the Vector (legacy skin) project tag: https://phabricator.wikimedia.org/project/profile/166/

ishubham21 subscribed.

I am working on this task.

@ishubham21: Hi! This task has been assigned to you a while ago. Could you maybe share an update? Do you still plan to work on this task, or do you need any help?

@ishubham21: Hi! This task has been assigned to you a while ago. Could you maybe share an update? Do you still plan to work on this task, or do you need any help?

Hi @Aklapper, if this issue is still open and there are no updates anyone working on this. Can I work on this?

@ishubham21: I am resetting the assignee of this task because there has not been progress lately (please correct me if I am wrong!). Resetting the assignee avoids the impression that somebody is already working on this task. It also allows others to potentially work towards fixing this task. Please claim this task again when you plan to work on it (via Add Action...Assign / Claim in the dropdown menu) - it would be welcome. Thanks for your understanding!

Is the target file where the changes are to be made - skins/vector/resources/common/components/Menu.less ?
If there are more files please tell me.

@Ankit18gupta: Please find out by first testing a bit yourself. Thanks.

Ankit18gupta reopened this task as Open.
Ankit18gupta removed Ankit18gupta as the assignee of this task.

Hii
If no one is doing this task, then I can do it.

@Mohdabbas955: Hi and welcome, see the upper corner which says "Open, Low". Please also see https://www.mediawiki.org/wiki/New_Developers :)

@Aklapper
This is my first contribution.
Can you please guide me which project I should set up and which file should I see to solve this issue

Change 764408 had a related patch set uploaded (by Abhigya Pandey; author: Abhigya Pandey):

[mediawiki/skins/Vector@master] Update Vector menu CSS to use `vector-menu-heading` instead of `h3`

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

Hello Aklapper and bwang I made a pull request please review it and let me know the changes if I had missed something.

Change 765365 had a related patch set uploaded (by Abhigya Pandey; author: Abhigya Pandey):

[mediawiki/skins/Vector@master] Update Vector menu CSS to use `vector-menu-heading` instead of `h3`

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

Change 765365 abandoned by Abhigya Pandey:

[mediawiki/skins/Vector@master] Update Vector menu CSS to use `vector-menu-heading` instead of `h3`

Reason:

Wrong change-Id

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

Hello, @Jdlrobson and @bwang I have made a pull request with suitable changes please review it.

bwang claimed this task.
bwang updated the task description. (Show Details)
bwang moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 764408 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update Vector menu CSS to use `vector-menu-heading` instead of `h3`

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

⬜ AC1: Instances of h3 are removed from Menu CSS and replaced with vector-menu-heading
This would be better for a developer to validate.

✅ AC2: h3 elements are replaced with label elements in modern vector
I validated that there are no h3 elements in any of the menus. H3 elements do appear in the body of the article as subsections.

✅ AC3: All menu styles remain the same in Vector and legacy Vector. Menus in this context include all "dropdown menus", "tab menus", and "portlet menus" (https://phabricator.wikimedia.org/F34972677)
I couldn't see any differences between prior screenshots and those of the current version. Here's what they both look like now.

Screen Shot 2022-03-09 at 8.20.34 AM.png (833×1 px, 504 KB)

Screen Shot 2022-03-09 at 8.21.22 AM.png (888×1 px, 466 KB)

Edtadros subscribed.

Test Result - Prod

Status:
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

⬜ AC1: Instances of h3 are removed from Menu CSS and replaced with vector-menu-heading
This would be better for a developer to validate.

❓ AC2: h3 elements are replaced with label elements in modern vector
@bwang, In the sidebar, only the languages section label uses an h3 tag. Assign this back to me if this is a pass

Screen Shot 2022-03-13 at 2.14.45 PM.png (330×826 px, 80 KB)

✅ AC3: All menu styles remain the same in Vector and legacy Vector. Menus in this context include all "dropdown menus", "tab menus", and "portlet menus" (https://phabricator.wikimedia.org/F34972677)
I couldn't see any differences between prior screenshots and those of the current version. Here's what they both look like now.

Screen Shot 2022-03-13 at 2.08.01 PM.png (961×1 px, 453 KB)

Screen Shot 2022-03-13 at 2.07.12 PM.png (936×1 px, 443 KB)

@Edtadros Ac1 is a pass. The language section label probably could be updated to a label tag too but its not part of Vector menus, so its fine, AC2 is also a pass