1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 17:10:29 +00:00

Added aria-label attribute to link widget

And document it for the button widget
This commit is contained in:
Jermolene 2014-06-17 07:54:10 +01:00
parent 401349a1d6
commit 06b0f9adb7
3 changed files with 11 additions and 3 deletions

View File

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

View File

@ -1,6 +1,6 @@
title: ButtonWidget title: ButtonWidget
created: 201310241419 created: 201310241419
modified: 201403150837 modified: 201406170837
tags: widget tags: widget
! Introduction ! Introduction
@ -23,6 +23,7 @@ The content of the `<$button>` widget is displayed within the button.
|set |A TextReference to which a new value will be assigned | |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 | |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 | |popup |Title of a state tiddler for a popup that is toggled when the button is clicked |
|aria-label |Optional [[Accessibility]] label |
|class |An optional CSS class name to be assigned to the HTML element | |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 | |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` | |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 title: LinkWidget
created: 201310241419
modified: 201406170837
tags: widget tags: widget
The `link` widget generates links to tiddlers. The `link` widget generates links to tiddlers.
@ -7,6 +9,7 @@ The `link` widget generates links to tiddlers.
|!Attribute |!Description | |!Attribute |!Description |
|to |The title of the target tiddler for the link (defaults to the [[WidgetVariable: currentTiddler]]) | |to |The title of the target tiddler for the link (defaults to the [[WidgetVariable: currentTiddler]]) |
|aria-label |Optional [[Accessibility]] label |
|tooltip |Optional tooltip WikiText | |tooltip |Optional tooltip WikiText |
The content of the link widget is rendered within the `<a>` tag. The content of the link widget is rendered within the `<a>` tag.