Various accessibility improvements (#6742)
* 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
GitHub
parent
5e35c8dda6
commit
f02bd2392f
|
|
@ -1,5 +1,6 @@
|
|||
title: $:/language/SideBar/
|
||||
|
||||
Caption: Sidebar
|
||||
All/Caption: All
|
||||
Contents/Caption: Contents
|
||||
Drafts/Caption: Drafts
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
|
|||
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(" "));
|
||||
$tw.utils.pushTop(classes, this.selectedClass.split(" "));
|
||||
domNode.setAttribute("aria-checked", "true");
|
||||
}
|
||||
if(isPoppedUp) {
|
||||
$tw.utils.pushTop(classes,this.selectedClass.split(" "));
|
||||
|
|
@ -66,6 +67,9 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
|
|||
if(this["aria-label"]) {
|
||||
domNode.setAttribute("aria-label",this["aria-label"]);
|
||||
}
|
||||
if (this.role) {
|
||||
domNode.setAttribute("role", this.role);
|
||||
}
|
||||
if(this.popup || this.popupTitle) {
|
||||
domNode.setAttribute("aria-expanded",isPoppedUp ? "true" : "false");
|
||||
}
|
||||
|
|
@ -206,6 +210,7 @@ ButtonWidget.prototype.execute = function() {
|
|||
this.popup = this.getAttribute("popup");
|
||||
this.hover = this.getAttribute("hover");
|
||||
this["aria-label"] = this.getAttribute("aria-label");
|
||||
this.role = this.getAttribute("role");
|
||||
this.tooltip = this.getAttribute("tooltip");
|
||||
this.style = this.getAttribute("style");
|
||||
this["class"] = this.getAttribute("class","");
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title: $:/core/templates/server/static.sidebar.wikitext
|
||||
|
||||
\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">
|
||||
<h1 class="tc-site-title">
|
||||
<$transclude tiddler="$:/SiteTitle"/>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ title: $:/core/templates/server/static.tiddler.html
|
|||
</head>
|
||||
<body class="tc-body">
|
||||
<$transclude tiddler="$:/core/templates/server/static.sidebar.wikitext" mode="inline"/>
|
||||
<section class="tc-story-river">
|
||||
<div class="tc-tiddler-frame">
|
||||
<section class="tc-story-river" role="main">
|
||||
<div class="tc-tiddler-frame" role="article">
|
||||
<$transclude tiddler="$:/core/templates/server/static.tiddler.wikitext" mode="inline"/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ title: $:/core/ui/PageTemplate/story
|
|||
tags: $:/tags/PageTemplate
|
||||
|
||||
\whitespace trim
|
||||
<section class="tc-story-river">
|
||||
<section class="tc-story-river" role="main">
|
||||
|
||||
<section class="story-backdrop">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
title: $:/core/ui/SideBarSegments/tabs
|
||||
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"/>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ $:/state/folded/$(currentTiddler)$
|
|||
\define cancel-delete-tiddler-actions(message) <$action-sendmessage $message="tm-$message$-tiddler"/>
|
||||
\import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]
|
||||
<$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">
|
||||
<$transclude tiddler=<<listItem>>/>
|
||||
</$list>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ code-body: yes
|
|||
|
||||
\define tabs-button()
|
||||
\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>>>
|
||||
<$set name="tv-wikilinks" value="no">
|
||||
<$transclude tiddler=<<__buttonTemplate__>> mode="inline">
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@ title: expected-html-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="">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,4 +2,4 @@ title: expected-html-tabs-horizontal
|
|||
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="">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,4 +2,4 @@ title: expected-html-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="">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>
|
||||
Loading…
Reference in New Issue