Tabindex support (#8819)

* Tabindex support

* Add docs

* Fix refresh

core/modules/widgets/browse.js

@@ -42,6 +42,9 @@ BrowseWidget.prototype.render = function(parent,nextSibling) {
 	if(this.tooltip) {
 		domNode.setAttribute("title",this.tooltip);
 	}
+	if(this.tabIndex) {
+		domNode.setAttribute("tabindex", this.tabIndex);
+	}
 	// Nw.js supports "nwsaveas" to force a "save as" dialogue that allows a new or existing file to be selected
 	if(this.nwsaveas) {
 		domNode.setAttribute("nwsaveas",this.nwsaveas);
@@ -97,6 +100,7 @@ BrowseWidget.prototype.execute = function() {
 	this.accept = this.getAttribute("accept");
 	this.webkitdirectory = this.getAttribute("webkitdirectory");
 	this.nwdirectory = this.getAttribute("nwdirectory");
+	this.tabIndex = this.getAttribute("tabindex");
 	this.isDisabled = this.getAttribute("disabled", "no");
 };
 

core/modules/widgets/checkbox.js

@@ -47,6 +47,9 @@ CheckboxWidget.prototype.render = function(parent,nextSibling) {
 	if(isChecked === undefined && this.checkboxIndeterminate === "yes") {
 		this.inputDomNode.indeterminate = true;
 	}
+	if(this.tabIndex) {
+		this.inputDomNode.setAttribute("tabindex", this.tabIndex);
+	}
 	if(this.isDisabled === "yes") {
 		this.inputDomNode.setAttribute("disabled",true);
 	}
@@ -305,6 +308,7 @@ CheckboxWidget.prototype.execute = function() {
 	this.checkboxClass = this.getAttribute("class","");
 	this.checkboxInvertTag = this.getAttribute("invertTag","");
 	this.isDisabled = this.getAttribute("disabled","no");
+	this.tabIndex = this.getAttribute();
 	// Make the child widgets
 	this.makeChildWidgets();
 };
@@ -314,7 +318,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 CheckboxWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.tiddler || changedAttributes.tag || changedAttributes.invertTag || changedAttributes.field || changedAttributes.index || changedAttributes.listField || changedAttributes.listIndex || changedAttributes.filter || changedAttributes.checked || changedAttributes.unchecked || changedAttributes["default"] || changedAttributes.indeterminate || changedAttributes["class"] || changedAttributes.disabled) {
+	if(changedAttributes.tiddler || changedAttributes.tag || changedAttributes.invertTag || changedAttributes.field || changedAttributes.index || changedAttributes.listField || changedAttributes.listIndex || changedAttributes.filter || changedAttributes.checked || changedAttributes.unchecked || changedAttributes["default"] || changedAttributes.indeterminate || changedAttributes["class"] || changedAttributes.disabled || changedAttributes.tabindex) {
 		this.refreshSelf();
 		return true;
 	} else {

core/modules/widgets/radio.js

@@ -47,6 +47,9 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
 	if(isChecked) {
 		this.inputDomNode.checked = true;
 	}
+	if(this.tabIndex) {
+		this.inputDomNode.setAttribute("tabindex", this.tabIndex);
+	}
 	if(this.isDisabled === "yes") {
 		this.inputDomNode.setAttribute("disabled",true);
 	}
@@ -111,6 +114,7 @@ RadioWidget.prototype.execute = function() {
 	this.radioClass = this.getAttribute("class","");
 	this.radioDefault = this.getAttribute("default");
 	this.isDisabled = this.getAttribute("disabled","no");
+	this.tabIndex = this.getAttribute("tabindex");
 	this.radioActions = this.getAttribute("actions","");
 	// Make the child widgets
 	this.makeChildWidgets();

core/modules/widgets/range.js

@@ -46,6 +46,9 @@ RangeWidget.prototype.render = function(parent,nextSibling) {
 	if(this.increment){
 		this.inputDomNode.setAttribute("step", this.increment);
 	}
+	if(this.tabIndex) {
+		this.inputDomNode.setAttribute("tabindex", this.tabIndex);
+	}
 	if(this.isDisabled === "yes") {
 		this.inputDomNode.setAttribute("disabled",true);
 	}
@@ -164,6 +167,7 @@ RangeWidget.prototype.execute = function() {
 	this.defaultValue = this.getAttribute("default","");
 	this.elementClass = this.getAttribute("class","");
 	this.isDisabled = this.getAttribute("disabled","no");
+	this.tabIndex = this.getAttribute("tabindex");
 	// Actions since 5.1.23
 	// Next 2 only fire once!
 	this.actionsMouseDown = this.getAttribute("actionsStart","");

editions/tw5.com/tiddlers/widgets/BrowseWidget.tid

@@ -21,6 +21,7 @@ The content of the <<.wid BrowseWidget>> widget is ignored.
 |message |Optional override of widget message to be generated. The files will be passed in the JavaScript object `event.target.files` |
 |param |Optional parameter to be passed with the custom message |
 |disabled |<<.from-version "5.3.7">> Optional. Set to "yes" to disable file browser. Defaults to "no". |
+|tabindex |<<.from-version "5.3.7">> Optional. Sets the `tabindex` attribute of the HTML select element to the given value |
 |data-* |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the HTML element |
 |style.* |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the HTML element |
 

editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid

@@ -38,6 +38,7 @@ The content of the `<$checkbox>` widget is displayed within an HTML `<label>` el
 |<<.attr uncheckactions>> |<<.from-version "5.1.16">> A string containing ActionWidgets to be triggered when the checkbox is unchecked |
 |<<.attr checkactions>> |<<.from-version "5.1.20">> A string containing ActionWidgets to be triggered when the checkbox is checked |
 |<<.attr disabled>> |<<.from-version "5.1.23">> Optionally disables the checkbox if set to <<.value yes>> (defaults to <<.value no>>)|
+|<<.attr tabindex>> |<<.from-version "5.3.7">> Optional. Sets the `tabindex` attribute of the HTML select element to the given value |
 |<<.attr data-*>> |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the HTML `<input>` element |
 |<<.attr style.*>> |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the HTML `<input>` element |
 

editions/tw5.com/tiddlers/widgets/RadioWidget.tid

@@ -22,6 +22,7 @@ The content of the `<$radio>` widget is displayed within an HTML `<label>` eleme
 |class |The CSS classes assigned to the label around the radio button <<.from-version "5.1.14">> `tc-radio` is always applied by default, as well as `tc-radio-selected` when selected |
 |actions|<<.from-version "5.1.23">> Optional string containing ActionWidgets to be triggered when the value changes. <br>The variable: ''actionValue'' is available for the actions  |
 |disabled|<<.from-version "5.1.23">> Optional. Set to "yes" to disable the radio input. Defaults to "no" |
+|tabindex |<<.from-version "5.3.7">> Optional. Sets the `tabindex` attribute of the HTML select element to the given value |
 |data-* |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the `<input>` HTML element |
 |style.* |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the `<input>` HTML element |
 

editions/tw5.com/tiddlers/widgets/RangeWidget.tid

@@ -26,6 +26,7 @@ The content of the `<$range>` widget is ignored.
 |actionsStart|<<.from-version "5.1.23">> Optional, A string containing ~ActionWidgets to be triggered when the "handle" is ''clicked''. <br>The variable: ''actionValueHasChanged'' is always `no` here|
 |actionsStop|<<.from-version "5.1.23">> Optional, A string containing ~ActionWidgets to be triggered when the "handle" is ''released''. <br>The variable: ''actionValueHasChanged'' is `yes`, ''if'' the new-value is different to the start-value |
 |disabled|<<.from-version "5.1.23">> Optional, disables the range input if set to "yes". Defaults to "no"|
+|tabindex |<<.from-version "5.3.7">> Optional. Sets the `tabindex` attribute of the HTML select element to the given value |
 |data-* |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the `<input>` HTML element |
 |style.* |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the `<input>` HTML element |