TiddlyWiki5/core/ui/LayoutSwitcher.tid
XLBilly 19177964c8
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
2025-11-01 13:06:19 +00:00

28 lines
1.3 KiB
Text

title: $:/snippets/LayoutSwitcher
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" role="listbox">
<$list filter="[all[tiddlers+shadows]tag[$:/tags/Layout]] [[$:/core/ui/PageTemplate]] +[!is[draft]sort[name]]">
<$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>