[MediaWiki-commits] [Gerrit] wikidata...gui[master]: Implement basic keyboard accessibility for Query.Wikidata.org

[Eflyjason (Code Review)]

Eflyjason has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/400461 )

Change subject: Implement basic keyboard accessibility for Query.Wikidata.org
......................................................................

Implement basic keyboard accessibility for Query.Wikidata.org

Ctrl/Command+Enter: Run query
Esc: Leave current input field/textarea
Alt+F: Click "Fliter" button in Query Helper
Alt+S: Click "Show" button in Query Helper
Alt+L: Click "Limit" button in Query Helper
Alt+D: Clear query
Alt+R: Restore previous query
?: Toggle Help menu
E: Show examples
F: Focus on "Fliter" button in Query Helper
S: Focus on "Show" button in Query Helper
` or ~: Focus on query textarea
l: Show language menu

Known problems: see T173213

Bug: T173213
Change-Id: I6a4315992c6509b043b8f522fb15f037b68b699f
---
M index.html
M wikibase/queryService/ui/App.js
M wikibase/queryService/ui/queryHelper/QueryHelper.js
3 files changed, 76 insertions(+), 15 deletions(-)


git pull ssh://gerrit.wikimedia.org:29418/wikidata/query/gui refs/changes/61/400461/1

diff --git a/index.html b/index.html
index e2170ab..3065117 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@
<div class="collapse navbar-collapse" id="header-navbar-collapse">
<ul class="nav navbar-nav">
<li>
- <button type="button" class="btn navbar-btn btn-default" data-toggle="modal" data-target="#QueryExamples">
+ <button type="button" class="btn navbar-btn btn-default" id="open-example" data-toggle="modal" data-target="#QueryExamples">
<span class="fa fa-folder-open-o"></span> <span data-i18n="wdqs-app-button-examples"></span>
</button>
</li>
@@ -69,7 +69,7 @@
<a href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Wikidata_Query_Help" target="_blank" class="btn btn-default">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> <span data-i18n="wdqs-app-button-help"></span>
</a>
- <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
+ <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="help-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -102,7 +102,7 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
- <a href="#" class="uls-trigger" data-toggle="tooltip"></a>
+ <a href="#" class="uls-trigger" id="language-toggle" data-toggle="tooltip"></a>
</li>
</ul>
</div>
@@ -115,14 +115,14 @@
<div class="toolbar">
<div class="toolbar-top">
<div>
- <a class="btn query-helper-trigger" target="_blank" title="Show query explanation"> <span class="fa fa-info-circle" aria-hidden="true"></span></a>
+ <a href="#" class="btn query-helper-trigger" target="_blank" title="Show query explanation"> <span class="fa fa-info-circle" aria-hidden="true"></span></a>
</div>
<div>
- <a class="btn fullscreen" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-fullscreen-title"> <span class="fa fa-arrows-alt" aria-hidden="true"></span>
+ <a href="#" class="btn fullscreen" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-fullscreen-title"> <span class="fa fa-arrows-alt" aria-hidden="true"></span>
</a>
</div>
<div class="dropdown">
- <a class="btn dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-i18n="[title]wdqs-app-button-prefixes"> <span class="fa fa-thumb-tack"
+ <a href="#" class="btn dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-i18n="[title]wdqs-app-button-prefixes"> <span class="fa fa-thumb-tack"
aria-hidden="true"

</span><span class="caret"></span></a>

<ul class="dropdown-menu">
@@ -134,15 +134,15 @@
</ul>
</div>
<div>
- <a class="btn" data-i18n="[title]wdqs-app-button-examples" data-toggle="modal" data-target="#QueryExamples"> <span class="fa fa-folder-open-o" aria-hidden="true"></span>
+ <a href="#" class="btn" data-i18n="[title]wdqs-app-button-examples" data-toggle="modal" data-target="#QueryExamples"> <span class="fa fa-folder-open-o" aria-hidden="true"></span>
</a>
</div>
<div>
- <a class="btn restore" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-restore-title"> <span class="fa fa-history" aria-hidden="true"></span>
+ <a href="#" class="btn restore" id="restore-button" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-restore-title"> <span class="fa fa-history" aria-hidden="true"></span>
</a>
</div>
<div>
- <a class="btn" id="clear-button" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-clear-title"> <span class="fa fa-trash-o" aria-hidden="true"></span>
+ <a href="#" class="btn" id="clear-button" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-clear-title"> <span class="fa fa-trash-o" aria-hidden="true"></span>
</a>
</div>
<div>
@@ -159,7 +159,7 @@
<div class="query-helper query-helper-hidden">
<div class="panel panel-info">
<div class="panel-heading">
- <strong data-i18n="wdqs-app-help-queryhelper"></strong> <a target="_blank" rel="noopener" href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Query_Helper"><span
+ <strong data-i18n="wdqs-app-help-queryhelper"></strong> <a target="_blank" rel="noopener" id="query-helper-help" href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Query_Helper"><span
class="glyphicon glyphicon-question-sign"

</span></a>

<button type="button" class="close" aria-label="Close">
diff --git a/wikibase/queryService/ui/App.js b/wikibase/queryService/ui/App.js
index d571ea1..6d2181f 100644
--- a/wikibase/queryService/ui/App.js
+++ b/wikibase/queryService/ui/App.js
@@ -151,10 +151,68 @@
* @private
*/
SELF.prototype._initApp = function() {
- // ctr + enter executes query
$( window ).keydown( function( e ) {
- if ( e.ctrlKey && e.keyCode === 13 ) {
- $( '#execute-button' ).click();
+ //console.log(e.keyCode);
+ //console.log(document.activeElement);
+
+ // ctr + enter executes query
+ // e.metaKey is used for Mac (https://stackoverflow.com/a/21996827)
+ if ( (e.ctrlKey || e.metaKey) && e.keyCode === 13 ) {
+ $( 'button#execute-button' ).click();
+ return false;
+ }
+
+ if ($(document.activeElement).is("textarea, input")) {
+ if ( e.keyCode === 27 ) {
+ // esc
+ $(document.activeElement).blur();
+ }
+ } else {
+ if ( e.altKey && e.keyCode === 70 ) {
+ // alt + "f"
+ $( "a#query-helper-filter" ).click();
+ return false;
+ } else if ( e.altKey && e.keyCode === 83 ) {
+ // alt + "s"
+ $( "a#query-helper-show" ).click();
+ return false;
+ } else if ( e.altKey && e.keyCode === 76 ) {
+ // alt + "l"
+ $( "a#query-helper-limit" ).click();
+ return false;
+ } else if ( e.altKey && e.keyCode === 68 ) {
+ // alt + "d"
+ $( "a#clear-button" ).click();
+ return false;
+ } else if ( e.altKey && e.keyCode === 82 ) {
+ // alt + "r"
+ $( "a#restore-button" ).click();
+ return false;
+ } else if ( e.shiftKey && e.keyCode === 191 ) {
+ // "?"
+ $( "button#help-toggle" ).click();
+ return false;
+ } else if ( e.keyCode === 69 ) {
+ // "e"
+ $( "button#open-example" ).click();
+ return false;
+ } else if ( e.keyCode === 70 ) {
+ // "f"
+ $( "a#query-helper-filter" ).focus();
+ return false;
+ } else if ( e.keyCode === 83 ) {
+ // "s"
+ $( "a#query-helper-show" ).focus();
+ return false;
+ } else if ( e.keyCode === 192 ) {
+ // "`" or "~"
+ $( ".CodeMirror textarea" ).focus();
+ return false;
+ } else if ( e.keyCode === 76 ) {
+ // "l"
+ $( "a#language-toggle" ).click();
+ return false;
+ }
}
} );

diff --git a/wikibase/queryService/ui/queryHelper/QueryHelper.js b/wikibase/queryService/ui/queryHelper/QueryHelper.js
index d51b0f5..4761ac5 100644
--- a/wikibase/queryService/ui/queryHelper/QueryHelper.js
+++ b/wikibase/queryService/ui/queryHelper/QueryHelper.js
@@ -244,6 +244,7 @@
var $limitSection = $( '<div>' ),
$limit = $( '<a data-type="number">' )
.attr( 'href', '#' )
+ .attr( 'id', 'query-helper-limit' )
.text( 'Limit' )
.data( 'value', this._query.getLimit() ),
$value = $( '<span>' )
@@ -297,7 +298,8 @@
'<span class="fa fa-plus" aria-hidden="true"></span>', ' ' )
.tooltip( {
title: 'Click to add new item'
- } ).attr( 'data-type', 'item' ).attr( 'data-auto_open', true );
+ }).attr('id', 'query-helper-filter')
+ .attr( 'data-type', 'item' ).attr( 'data-auto_open', true );

// SelectorBox
var self = this;
@@ -338,7 +340,8 @@
'<span class="fa fa-plus" aria-hidden="true"></span>', ' ' )
.tooltip( {
title: 'Click to add new property'
- } ).attr( 'data-type', 'property' ).attr( 'data-auto_open', true );
+ }).attr('id', 'query-helper-show')
+ .attr( 'data-type', 'property' ).attr( 'data-auto_open', true );

// SelectorBox
var self = this;
--
To view, visit https://gerrit.wikimedia.org/r/400461
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I6a4315992c6509b043b8f522fb15f037b68b699f
Gerrit-PatchSet: 1
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: Eflyjason <***@gmail.com>

[jenkins-bot (Code Review)]

jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/400461 )

Change subject: Implement basic keyboard accessibility for Query.Wikidata.org
......................................................................


Implement basic keyboard accessibility for Query.Wikidata.org

Ctrl/Command+Enter: Run query
Esc: Leave current input field/textarea
?: Toggle Help menu
i: Focus on query textarea
r: Jump to query result
f: Focus on "Fliter" button in Query Helper
s: Focus on "Show" button in Query Helper
m: Click "Limit" button in Query Helper
e: Show examples
l: Show language menu

Bug: T173213
Change-Id: I6a4315992c6509b043b8f522fb15f037b68b699f
---
M index.html
M wikibase/queryService/ui/App.js
M wikibase/queryService/ui/queryHelper/QueryHelper.js
M wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
4 files changed, 70 insertions(+), 18 deletions(-)

Approvals:
Jonas Kress (WMDE): Looks good to me, approved
jenkins-bot: Verified



diff --git a/index.html b/index.html
index e2170ab..3065117 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@
<div class="collapse navbar-collapse" id="header-navbar-collapse">
<ul class="nav navbar-nav">
<li>
- <button type="button" class="btn navbar-btn btn-default" data-toggle="modal" data-target="#QueryExamples">
+ <button type="button" class="btn navbar-btn btn-default" id="open-example" data-toggle="modal" data-target="#QueryExamples">
<span class="fa fa-folder-open-o"></span> <span data-i18n="wdqs-app-button-examples"></span>
</button>
</li>
@@ -69,7 +69,7 @@
<a href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Wikidata_Query_Help" target="_blank" class="btn btn-default">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> <span data-i18n="wdqs-app-button-help"></span>
</a>
- <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
+ <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="help-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -102,7 +102,7 @@
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
- <a href="#" class="uls-trigger" data-toggle="tooltip"></a>
+ <a href="#" class="uls-trigger" id="language-toggle" data-toggle="tooltip"></a>
</li>
</ul>
</div>
@@ -115,14 +115,14 @@
<div class="toolbar">
<div class="toolbar-top">
<div>
- <a class="btn query-helper-trigger" target="_blank" title="Show query explanation"> <span class="fa fa-info-circle" aria-hidden="true"></span></a>
+ <a href="#" class="btn query-helper-trigger" target="_blank" title="Show query explanation"> <span class="fa fa-info-circle" aria-hidden="true"></span></a>
</div>
<div>
- <a class="btn fullscreen" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-fullscreen-title"> <span class="fa fa-arrows-alt" aria-hidden="true"></span>
+ <a href="#" class="btn fullscreen" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-fullscreen-title"> <span class="fa fa-arrows-alt" aria-hidden="true"></span>
</a>
</div>
<div class="dropdown">
- <a class="btn dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-i18n="[title]wdqs-app-button-prefixes"> <span class="fa fa-thumb-tack"
+ <a href="#" class="btn dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-i18n="[title]wdqs-app-button-prefixes"> <span class="fa fa-thumb-tack"
aria-hidden="true"

</span><span class="caret"></span></a>

<ul class="dropdown-menu">
@@ -134,15 +134,15 @@
</ul>
</div>
<div>
- <a class="btn" data-i18n="[title]wdqs-app-button-examples" data-toggle="modal" data-target="#QueryExamples"> <span class="fa fa-folder-open-o" aria-hidden="true"></span>
+ <a href="#" class="btn" data-i18n="[title]wdqs-app-button-examples" data-toggle="modal" data-target="#QueryExamples"> <span class="fa fa-folder-open-o" aria-hidden="true"></span>
</a>
</div>
<div>
- <a class="btn restore" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-restore-title"> <span class="fa fa-history" aria-hidden="true"></span>
+ <a href="#" class="btn restore" id="restore-button" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-restore-title"> <span class="fa fa-history" aria-hidden="true"></span>
</a>
</div>
<div>
- <a class="btn" id="clear-button" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-clear-title"> <span class="fa fa-trash-o" aria-hidden="true"></span>
+ <a href="#" class="btn" id="clear-button" data-toggle="tooltip" data-placement="top" data-i18n="[title]wdqs-app-button-clear-title"> <span class="fa fa-trash-o" aria-hidden="true"></span>
</a>
</div>
<div>
@@ -159,7 +159,7 @@
<div class="query-helper query-helper-hidden">
<div class="panel panel-info">
<div class="panel-heading">
- <strong data-i18n="wdqs-app-help-queryhelper"></strong> <a target="_blank" rel="noopener" href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Query_Helper"><span
+ <strong data-i18n="wdqs-app-help-queryhelper"></strong> <a target="_blank" rel="noopener" id="query-helper-help" href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Query_Helper"><span
class="glyphicon glyphicon-question-sign"

</span></a>

<button type="button" class="close" aria-label="Close">
diff --git a/wikibase/queryService/ui/App.js b/wikibase/queryService/ui/App.js
index d571ea1..bff9858 100644
--- a/wikibase/queryService/ui/App.js
+++ b/wikibase/queryService/ui/App.js
@@ -151,11 +151,10 @@
* @private
*/
SELF.prototype._initApp = function() {
- // ctr + enter executes query
+ var self = this;
+
$( window ).keydown( function( e ) {
- if ( e.ctrlKey && e.keyCode === 13 ) {
- $( '#execute-button' ).click();
- }
+ return self._keyboardShortcut( e );
} );

// add tooltip to dropdown
@@ -169,6 +168,56 @@
/**
* @private
*/
+ SELF.prototype._keyboardShortcut = function( e ) {
+ if ( ( e.ctrlKey || e.metaKey ) && e.key === 'Enter' ) {
+ // e.metaKey is used for Mac (https://stackoverflow.com/a/21996827)
+ $( 'button#execute-button' ).click();
+ return false;
+ }
+
+ if ( $( document.activeElement ).is( 'textarea, input' ) ) {
+ if ( e.key === 'Escape' ) {
+ $( document.activeElement ).blur();
+ }
+ return;
+ }
+
+ if ( this._KeyboardShortcutKeys( e ) ) {
+ return false;
+ }
+ };
+
+ /**
+ * @private
+ */
+ SELF.prototype._KeyboardShortcutKeys = function( e ) {
+
+ if ( e.ctrlKey || e.metaKey || e.altKey ) {
+ return false;
+ }
+
+ var keys = {
+ '?': function () { $( 'button#help-toggle' ).click(); },
+ i: function () { $( '.CodeMirror textarea' ).focus(); },
+ r: function () { $( '#query-result' ).find( 'a.item-link' ).first().focus(); },
+ f: function () { $( 'a#query-helper-filter' ).focus(); },
+ s: function () { $( 'a#query-helper-show' ).focus(); },
+ m: function () { $( 'a#query-helper-limit' ).click(); },
+ e: function () { if ( !$( '#QueryExamples' ).is( ':visible' ) ) { $( 'button#open-example' ).click(); } },
+ l: function () { $( 'a#language-toggle' ).click(); }
+ };
+
+ if ( e.key in keys ) {
+ keys[e.key]();
+ return true;
+ }
+
+ return false;
+ };
+
+ /**
+ * @private
+ */
SELF.prototype._initEditor = function() {
var self = this;

diff --git a/wikibase/queryService/ui/queryHelper/QueryHelper.js b/wikibase/queryService/ui/queryHelper/QueryHelper.js
index d51b0f5..e27aaae 100644
--- a/wikibase/queryService/ui/queryHelper/QueryHelper.js
+++ b/wikibase/queryService/ui/queryHelper/QueryHelper.js
@@ -244,6 +244,7 @@
var $limitSection = $( '<div>' ),
$limit = $( '<a data-type="number">' )
.attr( 'href', '#' )
+ .attr( 'id', 'query-helper-limit' )
.text( 'Limit' )
.data( 'value', this._query.getLimit() ),
$value = $( '<span>' )
@@ -297,7 +298,8 @@
'<span class="fa fa-plus" aria-hidden="true"></span>', ' ' )
.tooltip( {
title: 'Click to add new item'
- } ).attr( 'data-type', 'item' ).attr( 'data-auto_open', true );
+ } ).attr( 'id', 'query-helper-filter' )
+ .attr( 'data-type', 'item' ).attr( 'data-auto_open', true );

// SelectorBox
var self = this;
@@ -338,7 +340,8 @@
'<span class="fa fa-plus" aria-hidden="true"></span>', ' ' )
.tooltip( {
title: 'Click to add new property'
- } ).attr( 'data-type', 'property' ).attr( 'data-auto_open', true );
+ } ).attr( 'id', 'query-helper-show' )
+ .attr( 'data-type', 'property' ).attr( 'data-auto_open', true );

// SelectorBox
var self = this;
diff --git a/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js b/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
index 0ea5bc5..c864cc6 100644
--- a/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
+++ b/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
@@ -134,7 +134,7 @@

switch ( data.datatype || data.type ) {
case TYPE_URI:
- var $link = $( '<a>' ).attr( { title: title, href: value, target: '_blank', rel: 'noopener' } );
+ var $link = $( '<a>' ).attr( { title: title, href: value, target: '_blank', class: 'item-link', rel: 'noopener' } );
$html.append( $link );

if ( this.isCommonsResource( value ) ) {
@@ -252,7 +252,7 @@
*/
SELF.prototype.createExploreButton = function( url ) {
var $button = $( '<a href="' + url +
- '" title="Explore item" class="explore glyphicon glyphicon-search" aria-hidden="true">' );
+ '" title="Explore item" class="explore glyphicon glyphicon-search" tabindex="-1" aria-hidden="true">' );
$button.click( $.proxy( this.handleExploreItem, this ) );

return $button;
--
To view, visit https://gerrit.wikimedia.org/r/400461
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I6a4315992c6509b043b8f522fb15f037b68b699f
Gerrit-PatchSet: 16
Gerrit-Project: wikidata/query/gui
Gerrit-Branch: master
Gerrit-Owner: Eflyjason <***@gmail.com>
Gerrit-Reviewer: Eflyjason <***@gmail.com>
Gerrit-Reviewer: Jonas Kress (WMDE) <***@wikimedia.de>
Gerrit-Reviewer: Rafidaslam <***@gmail.com>
Gerrit-Reviewer: Smalyshev <***@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>