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 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
