mirrors/TiddlyWiki5
1
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5.git synced 2025-12-05 18:20:38 -08:00
Code Issues Projects Releases Packages Wiki Activity

Improve switcher (UI) accessibility (#9347)

Browse source 
* 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
This commit is contained in:
XLBilly 2025-11-01 21:06:19 +08:00 • committed by GitHub
parent c8e41bfade
commit 19177964c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 45 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

37
core/ui/LayoutSwitcher.tid
View file

@ -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>

24
core/wiki/languageswitcher.tid
View file

@ -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>

19
core/wiki/themeswitcher.tid
View file

@ -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>

9
core/wiki/viewswitcher.tid
View file

@ -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>