From f02bd2392fb40a54fe21bf64dd56aa3d53ce54d4 Mon Sep 17 00:00:00 2001 From: Nolan Darilek Date: Tue, 28 Jun 2022 08:05:52 -0500 Subject: [PATCH] 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. --- core/language/en-GB/SideBar.multids | 1 + core/modules/widgets/button.js | 7 ++++++- core/templates/server/static.sidebar.wikitext.tid | 2 +- core/templates/server/static.tiddler.html.tid | 4 ++-- core/ui/PageTemplate/story.tid | 2 +- core/ui/SideBarSegments/tabs.tid | 2 +- core/ui/ViewTemplate.tid | 2 +- core/wiki/macros/tabs.tid | 2 +- .../data/tabs-macro/expected-html-tabs-horizontal-all.tid | 2 +- .../data/tabs-macro/expected-html-tabs-horizontal.tid | 2 +- .../tests/data/tabs-macro/expected-html-tabs-vertical.tid | 2 +- 11 files changed, 17 insertions(+), 11 deletions(-) diff --git a/core/language/en-GB/SideBar.multids b/core/language/en-GB/SideBar.multids index b109f3a9b..c4fda9c81 100644 --- a/core/language/en-GB/SideBar.multids +++ b/core/language/en-GB/SideBar.multids @@ -1,5 +1,6 @@ title: $:/language/SideBar/ +Caption: Sidebar All/Caption: All Contents/Caption: Contents Drafts/Caption: Drafts diff --git a/core/modules/widgets/button.js b/core/modules/widgets/button.js index 107977ac0..a32820e8b 100644 --- a/core/modules/widgets/button.js +++ b/core/modules/widgets/button.js @@ -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",""); diff --git a/core/templates/server/static.sidebar.wikitext.tid b/core/templates/server/static.sidebar.wikitext.tid index 5ac53703e..b0cf553f6 100644 --- a/core/templates/server/static.sidebar.wikitext.tid +++ b/core/templates/server/static.sidebar.wikitext.tid @@ -1,7 +1,7 @@ title: $:/core/templates/server/static.sidebar.wikitext \whitespace trim -
+

<$transclude tiddler="$:/SiteTitle"/> diff --git a/core/templates/server/static.tiddler.html.tid b/core/templates/server/static.tiddler.html.tid index 827383ba7..1a803bd86 100644 --- a/core/templates/server/static.tiddler.html.tid +++ b/core/templates/server/static.tiddler.html.tid @@ -19,8 +19,8 @@ title: $:/core/templates/server/static.tiddler.html <$transclude tiddler="$:/core/templates/server/static.sidebar.wikitext" mode="inline"/> -
-
+
+
<$transclude tiddler="$:/core/templates/server/static.tiddler.wikitext" mode="inline"/>
diff --git a/core/ui/PageTemplate/story.tid b/core/ui/PageTemplate/story.tid index 66b90778a..38e723835 100644 --- a/core/ui/PageTemplate/story.tid +++ b/core/ui/PageTemplate/story.tid @@ -2,7 +2,7 @@ title: $:/core/ui/PageTemplate/story tags: $:/tags/PageTemplate \whitespace trim -
+
diff --git a/core/ui/SideBarSegments/tabs.tid b/core/ui/SideBarSegments/tabs.tid index 3fdda7d57..af17b0166 100644 --- a/core/ui/SideBarSegments/tabs.tid +++ b/core/ui/SideBarSegments/tabs.tid @@ -1,7 +1,7 @@ title: $:/core/ui/SideBarSegments/tabs tags: $:/tags/SideBarSegment -
+
<$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"/> diff --git a/core/ui/ViewTemplate.tid b/core/ui/ViewTemplate.tid index 074c89af1..7cb8bec3c 100644 --- a/core/ui/ViewTemplate.tid +++ b/core/ui/ViewTemplate.tid @@ -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=<> tiddlerInfoState=<>> -
> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-view-frame [is[tiddler]then[tc-tiddler-exists]] [is[missing]!is[shadow]then[tc-tiddler-missing]] [is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [is[system]then[tc-tiddler-system]] [{!!class}] [tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}> +
> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-view-frame [is[tiddler]then[tc-tiddler-exists]] [is[missing]!is[shadow]then[tc-tiddler-missing]] [is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [is[system]then[tc-tiddler-system]] [{!!class}] [tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article"> <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"> <$transclude tiddler=<>/> diff --git a/core/wiki/macros/tabs.tid b/core/wiki/macros/tabs.tid index 84a24dab6..2e0c854d4 100644 --- a/core/wiki/macros/tabs.tid +++ b/core/wiki/macros/tabs.tid @@ -4,7 +4,7 @@ code-body: yes \define tabs-button() \whitespace trim -<$button set=<> setTo=<> default=<<__default__>> selectedClass="tc-tab-selected" tooltip={{!!tooltip}}> +<$button set=<> setTo=<> default=<<__default__>> selectedClass="tc-tab-selected" tooltip={{!!tooltip}} role="switch"> <$tiddler tiddler=<>> <$set name="tv-wikilinks" value="no"> <$transclude tiddler=<<__buttonTemplate__>> mode="inline"> diff --git a/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal-all.tid b/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal-all.tid index 152e2136e..61f8d4971 100644 --- a/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal-all.tid +++ b/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal-all.tid @@ -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 -

TabTwo

Text tab 2

\ No newline at end of file +

TabTwo

Text tab 2

\ No newline at end of file diff --git a/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal.tid b/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal.tid index e7bdee0dd..0d1f2a416 100644 --- a/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal.tid +++ b/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-horizontal.tid @@ -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 -

Text tab 2

\ No newline at end of file +

Text tab 2

\ No newline at end of file diff --git a/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-vertical.tid b/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-vertical.tid index 940082a51..c45891073 100644 --- a/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-vertical.tid +++ b/editions/test/tiddlers/tests/data/tabs-macro/expected-html-tabs-vertical.tid @@ -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 -

Text tab 2

\ No newline at end of file +

Text tab 2

\ No newline at end of file