[MediaWiki-commits] [Gerrit] Focus the primary button when the CTA is shown - change (mediawiki...GettingStarted)

[jenkins-bot (Code Review)]

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 = $( ' ').attr( {
+   $btn = $( ' ').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 = $( '' )
.attr( 'class', 'mw-gettingstarted-cta-button-main' )
.text( spec.mainText );
-
-   $btnContents = $( '' )
-   .attr( 'class', 'mw-gettingstarted-cta-button-contents' 
)
-   .append( $icon, $mainText );
+   $btn.append( $icon, $mainText );
 
if ( spec.subText ) {
$subText = $( '' )
.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 
Gerrit-Reviewer: Mattflaschen 
Gerrit-Reviewer: Ori.livneh 
Gerrit-Reviewer: Phuedx 
Gerrit-Reviewer: Swalling 
Gerrit-Reviewer: jenkins-bot <>

___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

[MediaWiki-commits] [Gerrit] Focus the primary button when the CTA is shown - change (mediawiki...GettingStarted)

[Phuedx (Code Review)]

Phuedx has uploaded a new change for review.

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

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]. Additionally, give the buttons an ARIA
role of "button". 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
1 file changed, 4 insertions(+), 1 deletion(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted 
refs/changes/74/117174/1

diff --git a/resources/ext.gettingstarted.return.js 
b/resources/ext.gettingstarted.return.js
index 6392e30..0a4df06 100644
--- a/resources/ext.gettingstarted.return.js
+++ b/resources/ext.gettingstarted.return.js
@@ -109,7 +109,9 @@
 
$btn = $( ' ').attr( {
id: spec.id,
-   'class': klass
+   'class': klass,
+   'aria-role': 'button',
+   tabIndex: 0
} ).click( function ( evt ) {
evt.stopPropagation();
closeDialog();
@@ -321,6 +323,7 @@
function showDialog() {
var $body = $( document.body );
$body.append( $overlay );
+   $dialog.find( '.mw-ui-button.mw-ui-primary' 
).focus();
}
 
function removeDialog() {

-- 
To view, visit https://gerrit.wikimedia.org/r/117174
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I323c5958b512ab59107cfd56204d1fc5a7d57f7c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Phuedx 

___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits