diff --git a/core/modules/widgets/button.js b/core/modules/widgets/button.js index 8f6f14376..e946b7da9 100644 --- a/core/modules/widgets/button.js +++ b/core/modules/widgets/button.js @@ -9,6 +9,8 @@ Button widget "use strict"; +const ALLOWED_SELECTED_ARIA_ATTR = ["aria-checked", "aria-selected", "aria-pressed"]; + var Widget = require("$:/core/modules/widgets/widget.js").widget; var Popup = require("$:/core/modules/utils/dom/popup.js"); @@ -44,9 +46,14 @@ ButtonWidget.prototype.render = function(parent,nextSibling) { var classes = this["class"].split(" ") || [], isPoppedUp = (this.popup || this.popupTitle) && this.isPoppedUp(); if(this.selectedClass) { - if((this.set || this.setTitle) && this.setTo && this.isSelected()) { - $tw.utils.pushTop(classes, this.selectedClass.split(" ")); - domNode.setAttribute("aria-checked", "true"); + if((this.set || this.setTitle) && this.setTo) { + const selectedAria = ALLOWED_SELECTED_ARIA_ATTR.includes(this.selectedAria) ? this.selectedAria : "aria-checked"; + if(this.isSelected()) { + $tw.utils.pushTop(classes, this.selectedClass.split(" ")); + domNode.setAttribute(selectedAria, "true"); + } else { + domNode.setAttribute(selectedAria, "false"); + } } if(isPoppedUp) { $tw.utils.pushTop(classes,this.selectedClass.split(" ")); @@ -221,6 +228,7 @@ ButtonWidget.prototype.execute = function() { this.style = this.getAttribute("style"); this["class"] = this.getAttribute("class",""); this.selectedClass = this.getAttribute("selectedClass"); + this.selectedAria = this.getAttribute("selectedAria"); this.defaultSetValue = this.getAttribute("default",""); this.buttonTag = this.getAttribute("tag"); this.dragTiddler = this.getAttribute("dragTiddler"); diff --git a/core/wiki/macros/tabs.tid b/core/wiki/macros/tabs.tid index 1805bc9be..550e39402 100644 --- a/core/wiki/macros/tabs.tid +++ b/core/wiki/macros/tabs.tid @@ -9,8 +9,9 @@ code-body: yes setTo=<> default=<<__default__>> selectedClass="tc-tab-selected" + selectedAria="aria-selected" tooltip={{!!tooltip}} - role="switch" + role="tab" data-tab-title=<> > <$tiddler tiddler=<>> @@ -57,12 +58,12 @@ code-body: yes \whitespace trim <$qualify title=<<__state__>> name="qualifiedState"> <$let tabsState={{{ [<__explicitState__>minlength[1]] ~[] }}}> -
] }}}> +
] }}} role="tablist">
] }}}> <>
] }}}/> -
] }}}> +
] }}} role="tabpanel"> <>
diff --git a/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-a.tid b/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-a.tid index e6d98a661..f0505ad72 100644 --- a/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-a.tid +++ b/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-a.tid @@ -2,4 +2,4 @@ title: expected-test-tabs-horizontal-a type: text/html description: Horizontal tabs test - This is the expected HTML output from a test in test-wikitext-tabs-macro.js -

Text tab 2

\ No newline at end of file +

Text tab 2

diff --git a/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-all.tid b/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-all.tid index c01d6e3bd..155cca520 100644 --- a/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-all.tid +++ b/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-all.tid @@ -2,4 +2,4 @@ title: expected-test-tabs-horizontal-all type: text/html description: Horizontal tabs with all parameters active. This is the expected HTML output from a test in test-wikitext-tabs-macro.js -

TabTwo

Text tab 2

\ No newline at end of file +

TabTwo

Text tab 2

diff --git a/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-vertical.tid b/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-vertical.tid index 6ffaa40de..b55b47229 100644 --- a/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-vertical.tid +++ b/editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-vertical.tid @@ -2,4 +2,4 @@ title: expected-test-tabs-vertical type: text/html description: Vertical tabs test -- This is the expected HTML output from the test in test-wikitext-tabs-macro.js -

Text tab 2

\ No newline at end of file +

Text tab 2

diff --git a/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9348.tid b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9348.tid new file mode 100644 index 000000000..e9dbb273c --- /dev/null +++ b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9348.tid @@ -0,0 +1,10 @@ +title: $:/changenotes/5.4.0/#9348 +description: Improve tabs macro accessibility +release: 5.4.0 +tags: $:/tags/ChangeNote +change-type: enhancement +change-category: usability +github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9348 +github-contributors: Leilei332 + +Adds `tablist`, `tabpanel` and `tab` roles to the tabs macro to improve its accessibility. It also adds a `selectedAria` attribute to the button widget. \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid b/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid index d1e94283c..46d3a3196 100644 --- a/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid @@ -1,6 +1,6 @@ caption: button created: 20131024141900000 -modified: 20250720025737830 +modified: 20251101091926820 tags: Widgets TriggeringWidgets title: ButtonWidget type: text/vnd.tiddlywiki @@ -34,6 +34,7 @@ The content of the `<$button>` widget is displayed within the button. |setIndex |An ''index'' to which the new value will be assigned, if the attribute <<.attr setTitle>> is present | |setTo |The new value to assign to the TextReference identified in the `set` attribute or the text field / the field specified through <<.attr setField>> / the index specified through <<.attr setIndex>> of the title given through <<.attr setTitle>> | |selectedClass |An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in <<.attr set>> already has the value specified in <<.attr setTo>> | +|selectedAria |<<.from-version "5.4.0">> An ARIA attribute to be set to `true` or `false` when <<.attr selectedClass>> is defined. Allowed values are `aria-checked` (default), `aria-selected` and `aria-pressed` | |default |Default value if <<.attr set>> tiddler is missing for testing against <<.attr setTo>> to determine <<.attr selectedClass>> | |popup |Title of a state tiddler for a popup that is toggled when the button is clicked. See PopupMechanism for details | |popupTitle |Title of a state tiddler for a popup that is toggled when the button is clicked. In difference to the <<.attr popup>> attribute, ''no'' TextReference is used. See PopupMechanism for details |