golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

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

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

9
components/tabs.less
View File

@ -153,7 +153,8 @@ div.vectorMenu h3 span {
color: @menu-main-heading-color; 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; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -165,11 +166,13 @@ div.vectorMenu h3 a {
.transition(background-position 250ms); .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%; 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'); .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 () { $( 'div.vectorMenu' ).each( function () {
var $el = $( this ); 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' ) .attr( 'tabindex', '0' )
// For accessibility, show the menu when the h3 is clicked (bug 24298/46486) // For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
.on( 'click keypress', function ( e ) { .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 // When the heading has focus, also set a class that will change the arrow icon
.focus( function () { .focus( function () {
$el.find( '> a' ).addClass( 'vectorMenuFocus' ); // FIXME: Remove > a selector in 1wk (T44241)
$el.find( '> div, > a' ).addClass( 'vectorMenuFocus' );
} ) } )
.blur( function () { .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' ) .find( '> a:first' )
// As the h3 can already be focused there's no need for the link to be focusable // As the h3 can already be focused there's no need for the link to be focusable
.attr( 'tabindex', '-1' ); .attr( 'tabindex', '-1' );