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 <[email protected]>
Gerrit-Reviewer: Eflyjason <[email protected]>
Gerrit-Reviewer: Jonas Kress (WMDE) <[email protected]>
Gerrit-Reviewer: Rafidaslam <[email protected]>
Gerrit-Reviewer: Smalyshev <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
