Page MenuHomePhabricator

Avoid multiple banner landmarks in Vector, avoid using <header> for the sticky header
Closed, ResolvedPublic

Description

Description

Both the header and sticky header use <header>. This shows up in the a11y tests under the following errors:

Document should not have more than one banner landmark (https://dequeuniversity.com/rules/axe/4.4/landmark-no-duplicate-banner?application=axeAPI)
Ensures landmarks are unique (https://dequeuniversity.com/rules/axe/4.4/landmark-unique?application=axeAPI)

These errors were introduced in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/889520, which removed the aria-hidden from the sticky header in order to ensure the TOC remains accessible to screenreader users when the sticky header is present

AC

  • The sticky header doesnt use a heading element

Developer notes

This can be fixed by changing the sticky header container to a div, however we also need to update searchToggle which relies on the existance of a header element to initialize the search element. We should a class to be used instead, so cached HTML will need to be considered

Event Timeline

bwang renamed this task from Avoid using header element for the sticky header, to Avoid multiple banner landmarks in Vector, avoid using <header> for the sticky header.Feb 23 2023, 8:43 PM
bwang triaged this task as Medium priority.Feb 27 2023, 7:14 PM

Change 903738 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Setup header and sticky header to be able to be full width

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

Change 903738 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Setup header and sticky header to be able to be full width

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