mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-10-31 15:42:59 +00:00
Code Issues Releases Wiki Activity

Various accessibility improvements (#6742)

Browse Source 
* Add `main` and `article` roles to stories and story.

* Support `role` and \aria-checked` in buttons, and integrate with sidebar tabs.

* Add `region` role to sidebar, and set caption as `aria-label`.

* Add accessibility roles and labels to static templates.

* Update test fixtures with new ARIA tab attributes.
This commit is contained in:
Nolan Darilek
2022-06-28 08:05:52 -05:00
committed by GitHub
parent 5e35c8dda6
commit f02bd2392f
11 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/language/en-GB/SideBar.multids
View File

@@ -1,5 +1,6 @@
title: $:/language/SideBar/ title: $:/language/SideBar/
Caption: Sidebar
All/Caption: All All/Caption: All
Contents/Caption: Contents Contents/Caption: Contents
Drafts/Caption: Drafts Drafts/Caption: Drafts

5
core/modules/widgets/button.js
View File

@@ -47,6 +47,7 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
if(this.selectedClass) { if(this.selectedClass) {
if((this.set || this.setTitle) && this.setTo && this.isSelected()) { if((this.set || this.setTitle) && this.setTo && this.isSelected()) {
$tw.utils.pushTop(classes, this.selectedClass.split(" ")); $tw.utils.pushTop(classes, this.selectedClass.split(" "));
domNode.setAttribute("aria-checked", "true");
} }
if(isPoppedUp) { if(isPoppedUp) {
$tw.utils.pushTop(classes,this.selectedClass.split(" ")); $tw.utils.pushTop(classes,this.selectedClass.split(" "));
@@ -66,6 +67,9 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
if(this["aria-label"]) { if(this["aria-label"]) {
domNode.setAttribute("aria-label",this["aria-label"]); domNode.setAttribute("aria-label",this["aria-label"]);
} }
if (this.role) {
domNode.setAttribute("role", this.role);
}
if(this.popup || this.popupTitle) { if(this.popup || this.popupTitle) {
domNode.setAttribute("aria-expanded",isPoppedUp ? "true" : "false"); domNode.setAttribute("aria-expanded",isPoppedUp ? "true" : "false");
} }
@@ -206,6 +210,7 @@ ButtonWidget.prototype.execute = function() {
this.popup = this.getAttribute("popup"); this.popup = this.getAttribute("popup");
this.hover = this.getAttribute("hover"); this.hover = this.getAttribute("hover");
this["aria-label"] = this.getAttribute("aria-label"); this["aria-label"] = this.getAttribute("aria-label");
this.role = this.getAttribute("role");
this.tooltip = this.getAttribute("tooltip"); this.tooltip = this.getAttribute("tooltip");
this.style = this.getAttribute("style"); this.style = this.getAttribute("style");
this["class"] = this.getAttribute("class",""); this["class"] = this.getAttribute("class","");

2
core/templates/server/static.sidebar.wikitext.tid
View File

@@ -1,7 +1,7 @@
title: $:/core/templates/server/static.sidebar.wikitext title: $:/core/templates/server/static.sidebar.wikitext
\whitespace trim \whitespace trim
<div class="tc-sidebar-scrollable" style="overflow: auto;"> <div class="tc-sidebar-scrollable" style="overflow: auto;" role="region" aria-label={{$:/language/SideBar/Caption}}>
<div class="tc-sidebar-header"> <div class="tc-sidebar-header">
<h1 class="tc-site-title"> <h1 class="tc-site-title">
<$transclude tiddler="$:/SiteTitle"/> <$transclude tiddler="$:/SiteTitle"/>

4
core/templates/server/static.tiddler.html.tid
View File

@@ -19,8 +19,8 @@ title: $:/core/templates/server/static.tiddler.html
</head> </head>
<body class="tc-body"> <body class="tc-body">
<$transclude tiddler="$:/core/templates/server/static.sidebar.wikitext" mode="inline"/> <$transclude tiddler="$:/core/templates/server/static.sidebar.wikitext" mode="inline"/>
<section class="tc-story-river"> <section class="tc-story-river" role="main">
<div class="tc-tiddler-frame"> <div class="tc-tiddler-frame" role="article">
<$transclude tiddler="$:/core/templates/server/static.tiddler.wikitext" mode="inline"/> <$transclude tiddler="$:/core/templates/server/static.tiddler.wikitext" mode="inline"/>
</div> </div>
</section> </section>

2
core/ui/PageTemplate/story.tid
View File

@@ -2,7 +2,7 @@ title: $:/core/ui/PageTemplate/story
tags: $:/tags/PageTemplate tags: $:/tags/PageTemplate
\whitespace trim \whitespace trim
<section class="tc-story-river"> <section class="tc-story-river" role="main">
<section class="story-backdrop"> <section class="story-backdrop">

2
core/ui/SideBarSegments/tabs.tid
View File

@@ -1,7 +1,7 @@
title: $:/core/ui/SideBarSegments/tabs title: $:/core/ui/SideBarSegments/tabs
tags: $:/tags/SideBarSegment tags: $:/tags/SideBarSegment
<div class="tc-sidebar-lists tc-sidebar-tabs"> <div class="tc-sidebar-lists tc-sidebar-tabs" role="region" aria-label={{$:/language/SideBar/Caption}}>
<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" default={{$:/config/DefaultSidebarTab}} state="$:/state/tab/sidebar" class="tc-sidebar-tabs-main" explicitState="$:/state/tab/sidebar--595412856"/> <$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/SideBar]!has[draft.of]]" default={{$:/config/DefaultSidebarTab}} state="$:/state/tab/sidebar" class="tc-sidebar-tabs-main" explicitState="$:/state/tab/sidebar--595412856"/>

2
core/ui/ViewTemplate.tid
View File

@@ -7,7 +7,7 @@ $:/state/folded/$(currentTiddler)$
\define cancel-delete-tiddler-actions(message) <$action-sendmessage $message="tm-$message$-tiddler"/> \define cancel-delete-tiddler-actions(message) <$action-sendmessage $message="tm-$message$-tiddler"/>
\import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]] \import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]
<$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">>> <$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">>>
<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}> <div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"> <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem">
<$transclude tiddler=<<listItem>>/> <$transclude tiddler=<<listItem>>/>
</$list> </$list>

2
core/wiki/macros/tabs.tid
View File

@@ -4,7 +4,7 @@ code-body: yes
\define tabs-button() \define tabs-button()
\whitespace trim \whitespace trim
<$button set=<<tabsState>> setTo=<<currentTab>> default=<<__default__>> selectedClass="tc-tab-selected" tooltip={{!!tooltip}}> <$button set=<<tabsState>> setTo=<<currentTab>> default=<<__default__>> selectedClass="tc-tab-selected" tooltip={{!!tooltip}} role="switch">
<$tiddler tiddler=<<save-currentTiddler>>> <$tiddler tiddler=<<save-currentTiddler>>>
<$set name="tv-wikilinks" value="no"> <$set name="tv-wikilinks" value="no">
<$transclude tiddler=<<__buttonTemplate__>> mode="inline"> <$transclude tiddler=<<__buttonTemplate__>> mode="inline">

2
editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal-all.tid
View File

@@ -2,4 +2,4 @@ title: expected-html-tabs-horizontal-all
type: text/html 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 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="">t 1</button><button class=" tc-tab-selected">t 2</button><button class="">desc</button><button class="">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=""><a class="tc-tiddlylink tc-tiddlylink-resolves" href="#TabTwo">TabTwo</a></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 "><div class="tc-tab-buttons "><button class="" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" role="switch">t 2</button><button class="" role="switch">desc</button><button class="" 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=""><a class="tc-tiddlylink tc-tiddlylink-resolves" href="#TabTwo">TabTwo</a></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>

2
editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal.tid
View File

@@ -2,4 +2,4 @@ title: expected-html-tabs-horizontal
type: text/html type: text/html
description: Horizontal tabs test - This is the expected HTML output from a test in test-wikitext-tabs-macro.js 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="">t 1</button><button class=" tc-tab-selected">t 2</button><button class="">t 3</button><button class="">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 "><div class="tc-tab-buttons "><button class="" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" role="switch">t 2</button><button class="" role="switch">t 3</button><button class="" 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>

2
editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-vertical.tid
View File

@@ -2,4 +2,4 @@ title: expected-html-tabs-vertical
type: text/html type: text/html
description: Vertical tabs test -- This is the expected HTML output from the test in test-wikitext-tabs-macro.js 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="">t 1</button><button class=" tc-tab-selected">t 2</button><button class="">t 3</button><button class="">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"><div class="tc-tab-buttons tc-vertical"><button class="" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" role="switch">t 2</button><button class="" role="switch">t 3</button><button class="" 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>