Improve tabs macro accessibility (#9348)

* Improve tabs macro accessibility

* Fix wrong aria-selected attribute

* Patch button widget to allow changing the default aria-checked attribute

* Patch button widget to have aria-checked attribute set to false

* Update tests

* Further fix tests

* Update docs

* Update change notes

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");

core/wiki/macros/tabs.tid

@@ -9,8 +9,9 @@ code-body: yes
 	setTo=<<currentTab>>
 	default=<<__default__>>
 	selectedClass="tc-tab-selected"
+	selectedAria="aria-selected"
 	tooltip={{!!tooltip}}
-	role="switch"
+	role="tab"
 	data-tab-title=<<currentTab>>
 >
 	<$tiddler tiddler=<<save-currentTiddler>>>
@@ -57,12 +58,12 @@ code-body: yes
 \whitespace trim
 <$qualify title=<<__state__>> name="qualifiedState">
 	<$let tabsState={{{ [<__explicitState__>minlength[1]] ~[<qualifiedState>] }}}>
-		<div class={{{ [[tc-tab-set]addsuffix[ ]addsuffix<__class__>] }}}>
+		<div class={{{ [[tc-tab-set]addsuffix[ ]addsuffix<__class__>] }}} role="tablist">
 			<div class={{{ [[tc-tab-buttons]addsuffix[ ]addsuffix<__class__>] }}}>
 				<<tabs-tab-list>>
 			</div>
 			<div class={{{ [[tc-tab-divider]addsuffix[ ]addsuffix<__class__>] }}}/>
-			<div class={{{ [[tc-tab-content]addsuffix[ ]addsuffix<__class__>] }}}>
+			<div class={{{ [[tc-tab-content]addsuffix[ ]addsuffix<__class__>] }}} role="tabpanel">
 				<<tabs-tab-body>>
 			</div>
 		</div>

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
 
-<p><div class="tc-tab-set "><div class="tc-tab-buttons "><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content "><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><p>Text tab 2</p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>
+<p><div class="tc-tab-set " role="tablist"><div class="tc-tab-buttons "><button aria-selected="false" class="" data-tab-title="TabOne" role="tab">t 1</button><button aria-selected="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="tab">t 2</button><button aria-selected="false" class="" data-tab-title="TabThree" role="tab">t 3</button><button aria-selected="false" class="" data-tab-title="TabFour" role="tab">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content " role="tabpanel"><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><p>Text tab 2</p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>

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
 
-<p><div class="tc-tab-set "><div class="tc-tab-buttons "><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">desc</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content "><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><h2 class="">TabTwo</h2><p><p>Text tab 2</p></p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>
+<p><div class="tc-tab-set " role="tablist"><div class="tc-tab-buttons "><button aria-selected="false" class="" data-tab-title="TabOne" role="tab">t 1</button><button aria-selected="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="tab">t 2</button><button aria-selected="false" class="" data-tab-title="TabThree" role="tab">desc</button><button aria-selected="false" class="" data-tab-title="TabFour" role="tab">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content " role="tabpanel"><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><h2 class="">TabTwo</h2><p><p>Text tab 2</p></p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>

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
 
-<p><div class="tc-tab-set tc-vertical"><div class="tc-tab-buttons tc-vertical"><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider tc-vertical"></div><div class="tc-tab-content tc-vertical"><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><p>Text tab 2</p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>
+<p><div class="tc-tab-set tc-vertical" role="tablist"><div class="tc-tab-buttons tc-vertical"><button aria-selected="false" class="" data-tab-title="TabOne" role="tab">t 1</button><button aria-selected="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="tab">t 2</button><button aria-selected="false" class="" data-tab-title="TabThree" role="tab">t 3</button><button aria-selected="false" class="" data-tab-title="TabFour" role="tab">TabFour</button></div><div class="tc-tab-divider tc-vertical"></div><div class="tc-tab-content tc-vertical" role="tabpanel"><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><p>Text tab 2</p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>

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.

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 |