From 3ee1b0bd26205f6b335f58b98cc0da740c5bacc0 Mon Sep 17 00:00:00 2001 From: Leilei332 Date: Sun, 15 Dec 2024 15:54:55 +0800 Subject: [PATCH 1/6] Tabindex support (#8819) * Tabindex support * Add docs * Fix refresh --- core/modules/widgets/browse.js | 4 ++++ core/modules/widgets/checkbox.js | 6 +++++- core/modules/widgets/radio.js | 4 ++++ core/modules/widgets/range.js | 4 ++++ editions/tw5.com/tiddlers/widgets/BrowseWidget.tid | 1 + editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid | 1 + editions/tw5.com/tiddlers/widgets/RadioWidget.tid | 1 + editions/tw5.com/tiddlers/widgets/RangeWidget.tid | 1 + 8 files changed, 21 insertions(+), 1 deletion(-) diff --git a/core/modules/widgets/browse.js b/core/modules/widgets/browse.js index faff40e69..d3fc6f002 100644 --- a/core/modules/widgets/browse.js +++ b/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"); }; diff --git a/core/modules/widgets/checkbox.js b/core/modules/widgets/checkbox.js index e07513b0a..bf0a7bb79 100644 --- a/core/modules/widgets/checkbox.js +++ b/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 { diff --git a/core/modules/widgets/radio.js b/core/modules/widgets/radio.js index aa7a32cf1..838455266 100644 --- a/core/modules/widgets/radio.js +++ b/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(); diff --git a/core/modules/widgets/range.js b/core/modules/widgets/range.js index db2699cc4..efb935aac 100644 --- a/core/modules/widgets/range.js +++ b/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",""); diff --git a/editions/tw5.com/tiddlers/widgets/BrowseWidget.tid b/editions/tw5.com/tiddlers/widgets/BrowseWidget.tid index ec8f098e4..205fb9cbe 100644 --- a/editions/tw5.com/tiddlers/widgets/BrowseWidget.tid +++ b/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 | diff --git a/editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid b/editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid index 00ecbb6f8..e4c9dffa1 100644 --- a/editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid @@ -38,6 +38,7 @@ The content of the `<$checkbox>` widget is displayed within an HTML `