1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00

Merge branch 'accessibility'

This commit is contained in:
Jermolene 2014-06-17 11:49:06 +01:00
commit 8bd19c4e6a
22 changed files with 67 additions and 22 deletions

View File

@ -0,0 +1,26 @@
title: $:/language/Buttons/
AdvancedSearch/Caption: advanced search
AdvancedSearch/Hint: Advanced search
Cancel/Caption: cancel
Cancel/Hint: Cancel editing this tiddler
Close/Caption: close
Close/Hint: Close this tiddler
ControlPanel/Caption: control panel
ControlPanel/Hint: Open control panel
Delete/Caption: delete
Delete/Hint: Delete this tiddler
Edit/Caption: edit
Edit/Hint: Edit this tiddler
Info/Caption: info
Info/Hint: Show information for this tiddler
NewTiddler/Caption: new tiddler
NewTiddler/Hint: Create a new tiddler
Save/Caption: save
Save/Hint: Save this tiddler
SaveWiki/Caption: save changes
SaveWiki/Hint: Save changes
HideSideBar/Caption: hide sidebar
HideSideBar/Hint: Hide sidebar
ShowSideBar/Caption: show sidebar
ShowSideBar/Hint: Show sidebar

View File

@ -1,5 +1,6 @@
title: $:/language/Docs/Fields/
_canonical_uri: The full URI of an external image tiddler
bag: The name of the bag from which a tiddler came
caption: The text to be displayed on a tab or button
color: The CSS color value associated with a tiddler

View File

@ -46,10 +46,16 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
}
}
domNode.className = classes.join(" ");
// Assign classes
// Assign other attributes
if(this.style) {
domNode.setAttribute("style",this.style);
}
if(this.title) {
domNode.setAttribute("title",this.title);
}
if(this["aria-label"]) {
domNode.setAttribute("aria-label",this["aria-label"]);
}
// Add a click event handler
domNode.addEventListener("click",function (event) {
var handled = false;
@ -134,6 +140,8 @@ ButtonWidget.prototype.execute = function() {
this.popup = this.getAttribute("popup");
this.hover = this.getAttribute("hover");
this["class"] = this.getAttribute("class","");
this["aria-label"] = this.getAttribute("aria-label");
this.title = this.getAttribute("title");
this.style = this.getAttribute("style");
this.selectedClass = this.getAttribute("selectedClass");
this.defaultSetValue = this.getAttribute("default");

View File

@ -87,6 +87,9 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
});
domNode.setAttribute("title",tooltipText);
}
if(this["aria-label"]) {
domNode.setAttribute("aria-label",this["aria-label"]);
}
// Add a click event handler
$tw.utils.addEventListeners(domNode,[
{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"},
@ -176,8 +179,9 @@ Compute the internal state of the widget
LinkWidget.prototype.execute = function() {
// Get the target tiddler title
this.to = this.getAttribute("to",this.getVariable("currentTiddler"));
// Get the link title
// Get the link title and aria label
this.tooltip = this.getAttribute("tooltip");
this["aria-label"] = this.getAttribute("aria-label");
// Determine the link characteristics
this.isMissing = !this.wiki.tiddlerExists(this.to);
this.isShadow = this.wiki.isShadowTiddler(this.to);
@ -190,7 +194,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/
LinkWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
if(changedAttributes.to || changedTiddlers[this.to] || changedAttributes.tooltip) {
if(changedAttributes.to || changedTiddlers[this.to] || changedAttributes["aria-label"] || changedAttributes.tooltip) {
this.refreshSelf();
return true;
}

View File

@ -1,4 +1,4 @@
title: $:/core/ui/EditToolbar/cancel
tags: $:/tags/EditToolbar
<$button message="tw-cancel-tiddler" class="btn-invisible">{{$:/core/images/cancel-button}}</$button>
<$button message="tw-cancel-tiddler" title={{$:/language/Buttons/Cancel/Hint}} aria-label={{$:/language/Buttons/Cancel/Caption}} class="btn-invisible">{{$:/core/images/cancel-button}}</$button>

View File

@ -1,4 +1,4 @@
title: $:/core/ui/EditToolbar/delete
tags: $:/tags/EditToolbar
<$button message="tw-delete-tiddler" class="btn-invisible">{{$:/core/images/delete-button}}</$button>
<$button message="tw-delete-tiddler" title={{$:/language/Buttons/Delete/Hint}} aria-label={{$:/language/Buttons/Delete/Caption}} class="btn-invisible">{{$:/core/images/delete-button}}</$button>

View File

@ -1,4 +1,4 @@
title: $:/core/ui/EditToolbar/save
tags: $:/tags/EditToolbar
<$button message="tw-save-tiddler" class="btn-invisible">{{$:/core/images/done-button}}</$button>
<$button message="tw-save-tiddler" title={{$:/language/Buttons/Save/Hint}} aria-label={{$:/language/Buttons/Save/Caption}} class="btn-invisible">{{$:/core/images/done-button}}</$button>

View File

@ -1,4 +1,4 @@
title: $:/core/ui/PageControls/control-panel
tags: $:/tags/PageControls
<$button to="$:/ControlPanel" class="btn-invisible">{{$:/core/images/options-button}}</$button>
<$button to="$:/ControlPanel" title={{$:/language/Buttons/ControlPanel/Hint}} aria-label={{$:/language/Buttons/ControlPanel/Caption}} class="btn-invisible">{{$:/core/images/options-button}}</$button>

View File

@ -1,4 +1,4 @@
title: $:/core/ui/PageControls/new-tiddler
tags: $:/tags/PageControls
<$button message="tw-new-tiddler" class="btn-invisible">{{$:/core/images/new-button}}</$button>
<$button message="tw-new-tiddler" title={{$:/language/Buttons/NewTiddler/Hint}} aria-label={{$:/language/Buttons/NewTiddler/Caption}} class="btn-invisible">{{$:/core/images/new-button}}</$button>

View File

@ -1,4 +1,4 @@
title: $:/core/ui/PageControls/save-wiki
tags: $:/tags/PageControls
<$button message="tw-save-wiki" class="btn-invisible">{{$:/core/images/save-button}}</$button>
<$button message="tw-save-wiki" title={{$:/language/Buttons/SaveWiki/Hint}} aria-label={{$:/language/Buttons/SaveWiki/Caption}} class="btn-invisible">{{$:/core/images/save-button}}</$button>

View File

@ -7,11 +7,11 @@ tags: $:/tags/PageTemplate
<$reveal state="$:/state/sidebar" type="match" text="yes" default="yes" retain="yes">
<div class="tw-site-title">
<h1 class="tw-site-title">
<$transclude tiddler="$:/SiteTitle" mode="inline"/>
</div>
</h1>
<div class="tw-site-subtitle">

View File

@ -5,7 +5,7 @@ caption: {{$:/language/SideBar/Open/Caption}}
\define lingo-base() $:/language/CloseAll/
<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" storyview="pop">
<$button message="tw-close-tiddler" class="btn-invisible btn-mini">&times;</$button> <$link to={{!!title}}><$view field="title"/></$link>
<$button message="tw-close-tiddler" title={{$:/language/Buttons/Close/Hint}} aria-label={{$:/language/Buttons/Close/Caption}} class="btn-invisible btn-mini">&times;</$button> <$link to={{!!title}}><$view field="title"/></$link>
</$list>

View File

@ -8,7 +8,7 @@ title: $:/core/ui/SideBarLists
<$link to="" class="btn-invisible">{{$:/core/images/close-button}}</$link>
</$linkcatcher>
</$reveal>
<$reveal state="$:/temp/search" type="match" text="">&nbsp;<$link to="$:/AdvancedSearch" class="btn-invisible">&hellip;</$link>
<$reveal state="$:/temp/search" type="match" text="">&nbsp;<$link to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="btn-invisible">&hellip;</$link>
</$reveal>
</div>
<$reveal state="$:/temp/search" type="nomatch" text="">

View File

@ -2,8 +2,8 @@ title: $:/core/ui/TopBar/menu
tags: $:/tags/TopRightBar
<$reveal state="$:/state/sidebar" type="nomatch" text="no">
<$button set="$:/state/sidebar" setTo="no" class="btn-invisible">{{$:/core/images/chevron-right}}</$button>
<$button set="$:/state/sidebar" setTo="no" title={{$:/language/Buttons/HideSideBar/Hint}} aria-label={{$:/language/Buttons/HideSideBar/Caption}} class="btn-invisible">{{$:/core/images/chevron-right}}</$button>
</$reveal>
<$reveal state="$:/state/sidebar" type="match" text="no">
<$button set="$:/state/sidebar" setTo="yes" class="btn-invisible">{{$:/core/images/chevron-left}}</$button>
<$button set="$:/state/sidebar" setTo="yes" title={{$:/language/Buttons/ShowSideBar/Hint}} aria-label={{$:/language/Buttons/ShowSideBar/Caption}} class="btn-invisible">{{$:/core/images/chevron-left}}</$button>
</$reveal>

View File

@ -5,7 +5,7 @@ tags: $:/tags/ViewTemplate
fill:$(foregroundColor)$;
\end
<div class="tw-tiddler-title">
<div class="titlebar">
<h2 class="titlebar">
<span class="tw-tiddler-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</span>
@ -24,7 +24,7 @@ fill:$(foregroundColor)$;
<$view field="title"/>
</span>
</$list>
</div>
</h2>
<$reveal type="nomatch" text="" default="" state=<<tiddlerInfoState>> class="tw-tiddler-info tw-popup" animate="yes" retain="yes">

View File

@ -1,4 +1,4 @@
title: $:/core/ui/ViewToolbar/close
tags: $:/tags/ViewToolbar
<$button message="tw-close-tiddler" class="btn-invisible">{{$:/core/images/close-button}}</$button>
<$button message="tw-close-tiddler" title={{$:/language/Buttons/Close/Hint}} aria-label={{$:/language/Buttons/Close/Caption}} class="btn-invisible">{{$:/core/images/close-button}}</$button>

View File

@ -1,4 +1,4 @@
title: $:/core/ui/ViewToolbar/edit
tags: $:/tags/ViewToolbar
<$button message="tw-edit-tiddler" class="btn-invisible">{{$:/core/images/edit-button}}</$button>
<$button message="tw-edit-tiddler" title={{$:/language/Buttons/Edit/Hint}} aria-label={{$:/language/Buttons/Edit/Caption}} class="btn-invisible">{{$:/core/images/edit-button}}</$button>

View File

@ -1,4 +1,4 @@
title: $:/core/ui/ViewToolbar/info
tags: $:/tags/ViewToolbar
<$button popup=<<tiddlerInfoState>> class="btn-invisible" selectedClass="tw-selected">{{$:/core/images/info-button}}</$button>
<$button popup=<<tiddlerInfoState>> title={{$:/language/Buttons/Info/Hint}} aria-label={{$:/language/Buttons/Info/Caption}} class="btn-invisible" selectedClass="tw-selected">{{$:/core/images/info-button}}</$button>

View File

@ -2,7 +2,7 @@ title: $:/core/macros/lingo
tags: $:/tags/Macro
\define lingo-base()
$:/lingo/
$:/language/
\end
\define lingo(title)

View File

@ -1,6 +1,6 @@
title: ButtonWidget
created: 201310241419
modified: 201403150837
modified: 201406170837
tags: widget
! Introduction
@ -23,6 +23,8 @@ The content of the `<$button>` widget is displayed within the button.
|set |A TextReference to which a new value will be assigned |
|setTo |The new value to assign to the TextReference identified in the `set` attribute |
|popup |Title of a state tiddler for a popup that is toggled when the button is clicked |
|aria-label |Optional [[Accessibility]] label |
|title |Optional tooltip |
|class |An optional CSS class name to be assigned to the HTML element |
|style |An optional CSS style attribute to be assigned to the HTML element |
|selectedClass |An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in `set` already has the value specified in `setTo` |

View File

@ -1,4 +1,6 @@
title: LinkWidget
created: 201310241419
modified: 201406170837
tags: widget
The `link` widget generates links to tiddlers.
@ -7,6 +9,7 @@ The `link` widget generates links to tiddlers.
|!Attribute |!Description |
|to |The title of the target tiddler for the link (defaults to the [[WidgetVariable: currentTiddler]]) |
|aria-label |Optional [[Accessibility]] label |
|tooltip |Optional tooltip WikiText |
The content of the link widget is rendered within the `<a>` tag.

View File

@ -570,6 +570,7 @@ a.tw-tiddlylink-external:hover {
font-size: 2.35em;
line-height: 1.2em;
color: <<colour tiddler-title-foreground>>;
margin: 0;
}
.tw-system-title-prefix {