You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: code-input.d.ts
+3-2Lines changed: 3 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -167,11 +167,12 @@ export namespace plugins {
167
167
classIndentextendsPlugin{
168
168
/**
169
169
* Create an indentation plugin to pass into a template
170
-
* @param {Boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
170
+
* @param {boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
171
171
* @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
172
172
* @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
173
+
* @param {boolean} escTabToChangeFocus Whether pressing the Escape key before (Shift+)Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
Copy file name to clipboardExpand all lines: code-input.js
+29-1Lines changed: 29 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -548,6 +548,15 @@ var codeInput = {
548
548
}
549
549
}
550
550
551
+
/**
552
+
* Show some instructions to the user only if they are using keyboard navigation - for example, a prompt on how to navigate with the keyboard if Tab is repurposed.
553
+
* @param {string} instructions The instructions to display only if keyboard navigation is being used. If it's blank, no instructions will be shown.
Copy file name to clipboardExpand all lines: plugins/indent.js
+46-5Lines changed: 46 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -8,14 +8,18 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
8
8
bracketPairs={};// No bracket-auto-indentation used when {}
9
9
indentation="\t";
10
10
indentationNumChars=1;
11
+
tabIndentationEnabled=true;// Can be disabled for accessibility reasons to allow keyboard navigation
12
+
escTabToChangeFocus=true;
13
+
escJustPressed=false;// Becomes true when Escape key is pressed and false when another key is pressed
11
14
12
15
/**
13
16
* Create an indentation plugin to pass into a template
14
-
* @param {Boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
17
+
* @param {boolean} defaultSpaces Should the Tab key enter spaces rather than tabs? Defaults to false.
15
18
* @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
16
19
* @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
20
+
* @param {boolean} escTabToChangeFocus Whether pressing the Escape key before Tab and Shift-Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
@@ -26,14 +30,29 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
26
30
}
27
31
this.indentationNumChars=numSpaces;
28
32
}
33
+
34
+
this.escTabToChangeFocus=true;
35
+
}
36
+
37
+
/**
38
+
* Make the Tab key
39
+
*/
40
+
disableTabIndentation(){
41
+
this.tabIndentationEnabled=false;
42
+
}
43
+
44
+
enableTabIndentation(){
45
+
this.tabIndentationEnabled=true;
29
46
}
30
47
31
48
/* Add keystroke events, and get the width of the indentation in pixels. */
32
49
afterElementsAdded(codeInput){
50
+
33
51
lettextarea=codeInput.textareaElement;
52
+
textarea.addEventListener('focus',(event)=>{if(this.escTabToChangeFocus)codeInput.setKeyboardNavInstructions("Tab and Shift-Tab currently for indentation. Press Esc to enable keyboard navigation.");})
/* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines */
79
+
/* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines, and the mechanism through which Tab can be used to switch focus instead (accessibility). */
61
80
checkTab(codeInput,event){
62
-
if(event.key!="Tab"){
81
+
if(!this.tabIndentationEnabled)return;
82
+
if(this.escTabToChangeFocus){
83
+
// Accessibility - allow Tab for keyboard navigation when Esc pressed right before it.
84
+
if(event.key=="Escape"){
85
+
this.escJustPressed=true;
86
+
codeInput.setKeyboardNavInstructions("Tab and Shift-Tab currently for keyboard navigation. Type to return to indentation.");
87
+
return;
88
+
}elseif(event.key!="Tab"){
89
+
if(event.key=="Shift"){
90
+
return;// Shift+Tab after Esc should still be keyboard navigation
91
+
}
92
+
codeInput.setKeyboardNavInstructions("Tab and Shift-Tab currently for indentation. Press Esc to enable keyboard navigation.");
0 commit comments