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

Use <div> instead of <a> for action menu

Browse source 
This change prevents that a middle click opens a new tab with the URL "#" and
prevents a wired outline around the button when selected of focused in Chrome.

The selector "> a" will be removed in a separate change which must get
deployed not before the HTML cache has expired.

Bug: T44241
Bug: T68388
Change-Id: I7255552d3bdec9e40727721b91630623ae24a08b
This commit is contained in:
Fomafix 2015-06-14 11:39:03 +00:00
parent 48552ac840
commit aba11a7b1c
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
VectorTemplate.php
View file

@ -397,7 +397,7 @@ class VectorTemplate extends BaseTemplate {
}
?>
<h3 id="p-variants-label">
<span><?php echo htmlspecialchars( $variantLabel ) ?></span><a href="#"></a>
<span><?php echo htmlspecialchars( $variantLabel ) ?></span><div></div>
</h3>
<div class="menu">
@ -467,7 +467,7 @@ class VectorTemplate extends BaseTemplate {
?>" aria-labelledby="p-cactions-label">
<h3 id="p-cactions-label"><span><?php
$this->msg( 'vector-more-actions' )
?></span><a href="#"></a></h3>
?></span><div></div></h3>
<div class="menu">
<ul<?php $this->html( 'userlangattributes' ) ?>>

9
components/tabs.less
View file

@ -153,7 +153,8 @@ div.vectorMenu h3 span {
color: @menu-main-heading-color;
}
div.vectorMenu h3 a {
div.vectorMenu h3 a, // FIXME: Remove selector in 1wk (T44241)
div.vectorMenu h3 div {
position: absolute;
top: 0;
right: 0;
@ -165,11 +166,13 @@ div.vectorMenu h3 a {
.transition(background-position 250ms);
}
div.vectorMenu.menuForceShow h3 a {
div.vectorMenu.menuForceShow h3 a, // FIXME: Remove selector in 1wk (T44241)
div.vectorMenu.menuForceShow h3 div {
background-position: 100% 100%;
}
div.vectorMenuFocus h3 a {
div.vectorMenuFocus h3 a, // FIXME: Remove selector in 1wk (T44241)
div.vectorMenuFocus h3 div {
.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
}

10
vector.js
View file

@ -30,7 +30,8 @@ jQuery( function ( $ ) {
*/
$( 'div.vectorMenu' ).each( function () {
var $el = $( this );
$el.find( '> h3 > a' ).parent()
// FIXME: Remove > a selector in 1wk (T44241)
$el.find( '> h3 > div, > h3 > a' ).parent()
.attr( 'tabindex', '0' )
// For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
.on( 'click keypress', function ( e ) {
@ -41,11 +42,14 @@ jQuery( function ( $ ) {
} )
// When the heading has focus, also set a class that will change the arrow icon
.focus( function () {
$el.find( '> a' ).addClass( 'vectorMenuFocus' );
// FIXME: Remove > a selector in 1wk (T44241)
$el.find( '> div, > a' ).addClass( 'vectorMenuFocus' );
} )
.blur( function () {
$el.find( '> a' ).removeClass( 'vectorMenuFocus' );
// FIXME: Remove > a selector in 1wk (T44241)
$el.find( '> div, > a' ).removeClass( 'vectorMenuFocus' );
} )
// FIXME: Remove > a selector in 1wk (T44241)
.find( '> a:first' )
// As the h3 can already be focused there's no need for the link to be focusable
.attr( 'tabindex', '-1' );