jenkins-bot has submitted this change and it was merged. Change subject: Focus the primary button when the CTA is shown ......................................................................
Focus the primary button when the CTA is shown Give the primary and secondary buttons a tab index of 0 so that they enter into the DOM tab flow [0] and an ARIA role of "button". Simplify the button markup. Finally, focus the primary button when the CTA is shown, now that the buttons are programmatically focusable. [0] http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex Bug: 62256 Change-Id: I323c5958b512ab59107cfd56204d1fc5a7d57f7c --- M resources/ext.gettingstarted.return.js M resources/ext.gettingstarted.return.less 2 files changed, 11 insertions(+), 14 deletions(-) Approvals: Mattflaschen: Looks good to me, approved jenkins-bot: Verified diff --git a/resources/ext.gettingstarted.return.js b/resources/ext.gettingstarted.return.js index 6392e30..e01d2d7 100644 --- a/resources/ext.gettingstarted.return.js +++ b/resources/ext.gettingstarted.return.js @@ -91,7 +91,7 @@ * @private */ function createButton( closeDialog, spec ) { - var klass, $btn, $icon, $mainText, $subText, $btnContents; + var klass, $btn, $icon, $mainText, $subText; klass = 'mw-ui-button'; if ( spec.isPrimary ) { @@ -107,10 +107,14 @@ klass += ' mw-gettingstarted-cta-button-no-sub'; } - $btn = $( '<div> ').attr( { + $btn = $( '<a> ').attr( { id: spec.id, - 'class': klass + 'class': klass, + 'aria-role': 'button', + tabIndex: 0, + href: '#' } ).click( function ( evt ) { + evt.preventDefault(); evt.stopPropagation(); closeDialog(); spec.click(); @@ -125,19 +129,16 @@ $mainText = $( '<span>' ) .attr( 'class', 'mw-gettingstarted-cta-button-main' ) .text( spec.mainText ); - - $btnContents = $( '<div>' ) - .attr( 'class', 'mw-gettingstarted-cta-button-contents' ) - .append( $icon, $mainText ); + $btn.append( $icon, $mainText ); if ( spec.subText ) { $subText = $( '<span>' ) .attr( 'class', 'mw-gettingstarted-cta-button-sub' ) .text( spec.subText ); - $btnContents.append( $subText ); + $btn.append( $subText ); } - return $btn.append( $btnContents ); + return $btn; } self = { @@ -321,6 +322,7 @@ function showDialog() { var $body = $( document.body ); $body.append( $overlay ); + $dialog.find( '.mw-ui-button.mw-ui-primary' ).focus(); } function removeDialog() { diff --git a/resources/ext.gettingstarted.return.less b/resources/ext.gettingstarted.return.less index 97df0e8..6ebdd35 100644 --- a/resources/ext.gettingstarted.return.less +++ b/resources/ext.gettingstarted.return.less @@ -123,11 +123,6 @@ margin-bottom: 10px; } -.mw-gettingstarted-cta-button-contents { - display: inline; - vertical-align: middle; -} - .mw-gettingstarted-cta-button-sub { display: block; font-weight: normal; -- To view, visit https://gerrit.wikimedia.org/r/117174 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I323c5958b512ab59107cfd56204d1fc5a7d57f7c Gerrit-PatchSet: 3 Gerrit-Project: mediawiki/extensions/GettingStarted Gerrit-Branch: master Gerrit-Owner: Phuedx <[email protected]> Gerrit-Reviewer: Mattflaschen <[email protected]> Gerrit-Reviewer: Ori.livneh <[email protected]> Gerrit-Reviewer: Phuedx <[email protected]> Gerrit-Reviewer: Swalling <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
