wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 23:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove redundant HTML roles

Browse source 
Fixes 9 warnings generated by https://validator.w3.org/nu/

- The navigation role is unnecessary for element nav.
- The main role is unnecessary for element main.
- The contentinfo role is unnecessary for element footer.

Bug: T365938
Change-Id: Ibdbe70900f9a85d904252ad8ac26e4bb6e813a1c
This commit is contained in:
Novem Linguae 2024-05-28 07:18:29 -07:00 committed by bwang
parent ed49a09010
commit 158269333d
12 changed files with 41 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/templates/ColumnStart.mustache
View file

@ -2,7 +2,7 @@
{{>MainMenuPinned}}
{{#data-toc}}
<div class="vector-sticky-pinned-container">
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark">
<nav id="mw-panel-toc" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc-pinnable-container}}
{{>PinnableContainer/Pinned/Open}}

2
includes/templates/Footer.mustache
View file

@ -16,7 +16,7 @@
}}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles and
to mitigate a VoiceOver bug. }}
<footer id="footer" class="mw-footer" role="contentinfo" {{{html-user-language-attributes}}}>
<footer id="footer" class="mw-footer" {{{html-user-language-attributes}}}>
{{#data-info}}{{>Footer__row}}{{/data-info}}
{{#data-places}}{{>Footer__row}}{{/data-places}}
{{#data-icons}}{{>Footer__row}}{{/data-icons}}

2
includes/templates/Header.mustache
View file

@ -1,6 +1,6 @@
<header class="vector-header mw-header">
<div class="vector-header-start">
<nav class="vector-main-menu-landmark" aria-label="{{msg-vector-site-nav-label}}" role="navigation">
<nav class="vector-main-menu-landmark" aria-label="{{msg-vector-site-nav-label}}">
{{>MainMenuDropdown}}
</nav>
{{#data-logos}}{{>Logo}}{{/data-logos}}

2
includes/templates/LegacyMenu.mustache
View file

@ -3,7 +3,7 @@
}}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
{{! DO NOT REMOVE vector-menu class. It is used for click tracking in Extension:WikimediaEvents }}
<nav id="{{id}}" class="{{#class}}{{.}}{{/class}} vector-menu" aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
<nav id="{{id}}" class="{{#class}}{{.}}{{/class}} vector-menu" aria-labelledby="{{id}}-label" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
{{#is-dropdown}}
<input type="checkbox"
id="{{id}}-checkbox"

2
includes/templates/MainMenuPinned.mustache
View file

@ -10,7 +10,7 @@
}}
<div class="vector-main-menu-container">
<div id="mw-navigation">
<nav id="mw-panel" class="vector-main-menu-landmark" aria-label="{{msg-vector-site-nav-label}}" role="navigation">
<nav id="mw-panel" class="vector-main-menu-landmark" aria-label="{{msg-vector-site-nav-label}}">
{{#data-main-menu}}
{{>PinnableContainer/Pinned/Open}}
{{! Use `#vector-main-menu-pinned-container .vector-main-menu` to target styles at this element}}

2
includes/templates/PageTitlebar.mustache
View file

@ -5,7 +5,7 @@
<header class="mw-body-header vector-page-titlebar{{#is-title-blank}} vector-page-titlebar-blank{{/is-title-blank}}">
{{#data-toc}}
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
<nav role="navigation" aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
<nav aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Open}}{{/data-page-titlebar-toc-dropdown}}
{{#data-page-titlebar-toc-pinnable-container}}
{{>PinnableContainer/Unpinned/Open}}

2
includes/templates/StickyHeader.mustache
View file

@ -23,7 +23,7 @@
<div class="vector-sticky-header-context-bar">
{{#data-toc}}
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
<nav role="navigation" aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
<nav aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
{{#data-sticky-header-toc-dropdown}}
{{>Dropdown/Open}}
{{#data-sticky-header-toc-pinnable-container}}

2
includes/templates/UserLinks.mustache
View file

@ -1,4 +1,4 @@
<nav class="vector-user-links{{#is-wide}} vector-user-links-wide{{/is-wide}}" aria-label="{{msg-personaltools}}" role="navigation" >
<nav class="vector-user-links{{#is-wide}} vector-user-links-wide{{/is-wide}}" aria-label="{{msg-personaltools}}">
<div class="vector-user-links-main">
{{#data-user-links-preferences}}{{>Menu}}{{/data-user-links-preferences}}
{{#data-user-links-user-page}}{{>Menu}}{{/data-user-links-user-page}}

2
includes/templates/skin.mustache
View file

@ -40,7 +40,7 @@
{{>ColumnStart}}
<div class="mw-content-container">
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
<main id="content" class="mw-body" role="main">
<main id="content" class="mw-body">
{{>PageTitlebar}}
{{>PageToolbar}}
{{>ColumnEnd}}

2
tests/jest/__snapshots__/stickyHeader.test.js.snap
View file

@ -10,7 +10,7 @@ exports[`Sticky header renders 1`] = `
</button>
</div>
<div> </div> <div class=\\"vector-sticky-header-context-bar\\">
<nav role=\\"navigation\\" aria-label=\\"\\" class=\\"vector-toc-landmark\\">
<nav aria-label=\\"\\" class=\\"vector-toc-landmark\\">
<div id=\\"vector-sticky-header-toc\\" class=\\"vector-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc\\">
<input type=\\"checkbox\\" id=\\"vector-sticky-header-toc-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-sticky-header-toc\\" class=\\"vector-dropdown-checkbox\\" aria-label=\\"\\" tabindex=\\"-1\\">
<label id=\\"vector-sticky-header-toc-label\\" for=\\"vector-sticky-header-toc-checkbox\\" class=\\"vector-dropdown-label cdx-button cdx-button--weight-quiet cdx-button--icon-only\\" aria-hidden=\\"true\\" tabindex=\\"-1\\"><span class=\\"vector-dropdown-label-text\\"></span>

2
tests/jest/__snapshots__/userLinks.test.js.snap
View file

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UserLinks renders 1`] = `
"<nav class=\\"vector-user-links\\" aria-label=\\"\\" role=\\"navigation\\">
"<nav class=\\"vector-user-links\\" aria-label=\\"\\">
<div class=\\"vector-user-links-main\\">
<div id=\\"p-personal-preferences\\" class=\\"vector-menu\\">
<div class=\\"vector-menu-content\\">

54
tests/jest/skins.vector.legacy.js/portlets.test.js
View file

@ -22,18 +22,21 @@ describe( 'portlets', () => {
element.appendChild( labelElement );
}
element.appendChild( document.createElement( 'ul' ) );
expect( portlets.addPortletHandler( element ).outerHTML.replace( /[\s\n]/gi, '' ) )
.toBe(
portletHTML.replace( /[\s\n]/gi, '' )
// Known Difference 1: Portlets created via JS are `div` elements not `nav`
.replace( /<nav/g, '<div' )
.replace( /nav>/g, 'div>' )
// Known Difference 2: Portlets created via JS have `div` elements
// rather than `h3 > span`
.replace( /<spanclass="vector-menu-heading-label">/g, '' )
.replace( /<h3/g, '<div' )
.replace( /<\/span><\/h3>/g, '</div>' )
);
const actual = portlets.addPortletHandler( element ).outerHTML.replace( /[\s\n]/gi, '' )
// Known Difference 1: `div` elements need `role="navigation"`.
// `nav` elements do not.
.replace( /role="navigation"/g, '' );
const expected = portletHTML.replace( /[\s\n]/gi, '' )
// Known Difference 2: Portlets created via JS are `div` elements not `nav`
.replace( /<nav/g, '<div' )
.replace( /nav>/g, 'div>' )
// Known Difference 3: Portlets created via JS have `div` elements
// rather than `h3 > span`
.replace( /<spanclass="vector-menu-heading-label">/g, '' )
.replace( /<h3/g, '<div' )
.replace( /<\/span><\/h3>/g, '</div>' );
expect( actual ).toBe( expected );
} );
test( 'portlet dropdowns that go through the hook method should match the menu template HTML (dropdown version)', () => {
@ -57,17 +60,20 @@ describe( 'portlets', () => {
}
element.appendChild( document.createElement( 'ul' ) );
rNav.appendChild( element );
expect( portlets.addPortletHandler( element ).outerHTML.replace( /[\s\n]/gi, '' ) )
.toBe(
portletHTML.replace( /[\s\n]/gi, '' )
// Known Difference 1: Portlets created via JS are `div` elements not `nav`
.replace( /<nav/g, '<div' )
.replace( /nav>/g, 'div>' )
// Known Difference 2: Portlets created via JS
// have `div` elements rather than `label`
.replace( /<spanclass="vector-menu-heading-label">/g, '' )
.replace( /<label/g, '<div' )
.replace( /<\/span><\/label>/g, '</div>' )
);
const actual = portlets.addPortletHandler( element ).outerHTML.replace( /[\s\n]/gi, '' )
// Known Difference 1: `div` elements need `role="navigation"`.
// `nav` elements do not.
.replace( /role="navigation"/g, '' );
const expected = portletHTML.replace( /[\s\n]/gi, '' )
// Known Difference 2: Portlets created via JS are `div` elements not `nav`
.replace( /<nav/g, '<div' )
.replace( /nav>/g, 'div>' )
// Known Difference 3: Portlets created via JS
// have `div` elements rather than `label`
.replace( /<spanclass="vector-menu-heading-label">/g, '' )
.replace( /<label/g, '<div' )
.replace( /<\/span><\/label>/g, '</div>' );
expect( actual ).toBe( expected );
} );
} );