From 19177964c8297d6ca12b66ebdc6add4608d4f05f Mon Sep 17 00:00:00 2001
From: XLBilly <LeiYiXia29@outlook.com>
Date: Sat, 1 Nov 2025 21:06:19 +0800
Subject: [PATCH] Improve switcher (UI) accessibility (#9347)

* Improve theme switcher accessibility

* Improve view switcher accessibility

* Replace set widgets with filters

* Improve languageswitcher & layoutswitcher accessibility

* Add indentation inside list widget

* Switch to functions
---
 core/ui/LayoutSwitcher.tid     | 37 +++++++++++++++++-----------------
 core/wiki/languageswitcher.tid | 24 +++++++++++-----------
 core/wiki/themeswitcher.tid    | 19 ++++++++---------
 core/wiki/viewswitcher.tid     |  9 +++++----
 4 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/core/ui/LayoutSwitcher.tid b/core/ui/LayoutSwitcher.tid
index 0f7e3f15e..4b8508340 100644
--- a/core/ui/LayoutSwitcher.tid
+++ b/core/ui/LayoutSwitcher.tid
@@ -3,27 +3,26 @@ tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ControlPanel/LayoutSwitcher/Caption}}
 
 \whitespace trim
+\function layout.filter() [all[current]field:title[$:/core/ui/PageTemplate]]
+\function layout.empty.filter() [all[current]field:title{$:/layout}]
+
 <$linkcatcher to="$:/layout">
-<div class="tc-chooser">
+<div class="tc-chooser" role="listbox">
 <$list filter="[all[tiddlers+shadows]tag[$:/tags/Layout]] [[$:/core/ui/PageTemplate]] +[!is[draft]sort[name]]">
-<$list
-	filter="[{$:/layout}!has[text]]"
-	variable="ignore"
-	emptyMessage="""\whitespace trim
-		<$set name="cls" filter="[all[current]field:title{$:/layout}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
-		<div class=<<cls>>>
-		<$link to={{!!title}}>
-		''<$transclude tiddler={{{ [<currentTiddler>get[icon]] }}}/><$transclude field="name"/>''&#32;-&#32;<$transclude field="description"/>
-		</$link></div></$set>
-""">
-<$set name="cls" filter="[all[current]field:title[$:/core/ui/PageTemplate]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
-<div class=<<cls>>>
-<$link to={{!!title}}>
-''<$transclude tiddler={{{ [<currentTiddler>get[icon]] }}}/><$transclude field="name"/>''&#32;-&#32;<$transclude field="description"/>
-</$link>
-</div>
-</$set>
-</$list>
+	<$list filter="[{$:/layout}!has[text]]" variable="ignore">
+		<$list-empty>
+			<div class={{{ [layout.empty.filter[]then[tc-chooser-item tc-chosen]else[tc-chooser-item]] }}}>
+				<$link to={{!!title}} role="option" aria-selected={{{ [layout.empty.filter[]then[true]else[false]] }}}>
+					''<$transclude tiddler={{{ [<currentTiddler>get[icon]] }}}/><$transclude field="name"/>''&#32;-&#32;<$transclude field="description"/>
+				</$link>
+			</div>
+		</$list-empty>
+		<div class={{{ [layout.filter[]then[tc-chooser-item tc-chosen]else[tc-chooser-item]] }}}>
+			<$link to={{!!title}} role="option" aria-selected={{{ [layout.filter[]then[true]else[false]] }}}>
+				''<$transclude tiddler={{{ [<currentTiddler>get[icon]] }}}/><$transclude field="name"/>''&#32;-&#32;<$transclude field="description"/>
+			</$link>
+		</div>
+	</$list>
 </$list>
 </div>
 </$linkcatcher>
diff --git a/core/wiki/languageswitcher.tid b/core/wiki/languageswitcher.tid
index 7d79c0f5c..a3c5ca97f 100644
--- a/core/wiki/languageswitcher.tid
+++ b/core/wiki/languageswitcher.tid
@@ -1,20 +1,20 @@
 title: $:/snippets/languageswitcher
 
 \whitespace trim
+\function language.filter() [all[current]field:title{$:/language}]
+
 <$linkcatcher to="$:/language">
-<div class="tc-chooser tc-language-chooser">
+<div class="tc-chooser tc-language-chooser" role="listbox">
 <$list filter="[[$:/languages/en-GB]] [plugin-type[language]sort[description]]">
-<$set name="cls" filter="[all[current]field:title{$:/language}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
-<div class=<<cls>> lang={{!!name}}>
-<$link>
-<$view field="description">
-<$view field="name">
-<$view field="title"/>
-</$view>
-</$view>
-</$link>
-</div>
-</$set>
+	<div class={{{ [language.filter[]then[tc-chooser-item tc-chosen]else[tc-chooser-item]] }}} lang={{!!name}}>
+		<$link role="option" aria-selected={{{ [language.filter[]then[true]else[false]] }}}>
+			<$view field="description">
+				<$view field="name">
+				<$view field="title"/>
+				</$view>
+			</$view>
+		</$link>
+	</div>
 </$list>
 </div>
 </$linkcatcher>
\ No newline at end of file
diff --git a/core/wiki/themeswitcher.tid b/core/wiki/themeswitcher.tid
index 6259af063..79f4a09ba 100644
--- a/core/wiki/themeswitcher.tid
+++ b/core/wiki/themeswitcher.tid
@@ -1,17 +1,18 @@
 title: $:/snippets/themeswitcher
 
 \whitespace trim
+\function theme.filter() [all[current]field:title{$:/theme}] [[$:/theme]!has[text]addsuffix[s/tiddlywiki/vanilla]field:title<currentTiddler>] +[limit[1]]
+
 <$linkcatcher to="$:/theme">
-<div class="tc-chooser">
+<div class="tc-chooser" role="listbox">
 <$list filter="[plugin-type[theme]sort[title]]">
-<$set name="cls" filter="[all[current]field:title{$:/theme}] [[$:/theme]!has[text]addsuffix[s/tiddlywiki/vanilla]field:title<currentTiddler>] +[limit[1]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
-<div class=<<cls>>><$link to={{!!title}}>
-''<$view field="name" format="text"/>''
-&#32;
-<$view field="description" format="text"/>
-</$link>
-</div>
-</$set>
+	<div class={{{ [theme.filter[]then[tc-chooser-item tc-chosen]else[tc-chooser-item]] }}}>
+		<$link to={{!!title}} role="option" aria-selected={{{ [theme.filter[]then[true]else[false]] }}}>
+			''<$view field="name" format="text"/>''
+			&#32;
+			<$view field="description" format="text"/>
+		</$link>
+	</div>
 </$list>
 </div>
 </$linkcatcher>
\ No newline at end of file
diff --git a/core/wiki/viewswitcher.tid b/core/wiki/viewswitcher.tid
index b82fcb264..1ff289cdf 100644
--- a/core/wiki/viewswitcher.tid
+++ b/core/wiki/viewswitcher.tid
@@ -4,13 +4,14 @@ title: $:/snippets/viewswitcher
 $:/core/images/storyview-$(storyview)$
 \end
 \whitespace trim
+\function view.filter() [<storyview>prefix{$:/view}]
+
 <$linkcatcher to="$:/view">
-<div class="tc-chooser tc-viewswitcher">
+<div class="tc-chooser tc-viewswitcher" role="listbox">
 <$list filter="[storyviews[]]" variable="storyview">
-<$set name="cls" filter="[<storyview>prefix{$:/view}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>>
-<$button tag="a" class="tc-tiddlylink tc-btn-invisible" to=<<storyview>>><$transclude tiddler=<<icon>>/><$text text=<<storyview>>/></$button>
+<div class={{{ [view.filter[]then[tc-chooser-item tc-chosen]else[tc-chooser-item]] }}}>
+<$button tag="a" class="tc-tiddlylink tc-btn-invisible" role="option" to=<<storyview>> aria-selected={{{ [view.filter[]then[true]else[false]] }}}><$transclude tiddler=<<icon>>/><$text text=<<storyview>>/></$button>
 </div>
-</$set>
 </$list>
 </div>
 </$linkcatcher>