Merge branch 'accessibility'

core/language/en-GB/Buttons.multids

@@ -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

core/language/en-GB/Fields.multids

@@ -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

core/modules/widgets/button.js

@@ -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");

core/modules/widgets/link.js

@@ -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;
 	}

core/ui/EditToolbar/cancel.tid

@@ -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>

core/ui/EditToolbar/delete.tid

@@ -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>

core/ui/EditToolbar/save.tid

@@ -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>

core/ui/PageControls/controlpanel.tid

@@ -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>

core/ui/PageControls/newtiddler.tid

@@ -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>

core/ui/PageControls/savewiki.tid

@@ -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>

core/ui/PageTemplate/sidebar.tid

@@ -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">
 

core/ui/SideBar/Open.tid

@@ -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>
 

core/ui/SideBarLists.tid

@@ -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="">

core/ui/TopRightBar/menu.tid

@@ -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>

core/ui/ViewTemplate/title.tid

@@ -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">
 

core/ui/ViewToolbar/close.tid

@@ -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>

core/ui/ViewToolbar/edit.tid

@@ -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>

core/ui/ViewToolbar/info.tid

@@ -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>

core/wiki/macros/lingo.tid

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

editions/tw5.com/tiddlers/widgets/ButtonWidget.tid

@@ -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`  |

editions/tw5.com/tiddlers/widgets/LinkWidget.tid

@@ -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.

themes/tiddlywiki/vanilla/base.tid

@@ -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 {