Improve ARIA support for link widget (#9167)

This commit is contained in:
Leilei332 2025-10-07 22:46:43 +08:00 committed by GitHub
parent 94673a1028
commit 34737f4e28
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions

View file

@ -45,6 +45,10 @@ LinkWidget.prototype.render = function(parent,nextSibling) {
sourcePrefix: "data-",
destPrefix: "data-"
});
this.assignAttributes(domNode,{
sourcePrefix: "aria-",
destPrefix: "aria-"
});
parent.insertBefore(domNode,nextSibling);
this.renderChildren(domNode,null);
this.domNodes.push(domNode);
@ -125,9 +129,13 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
});
domNode.setAttribute("title",tooltipText);
}
if(this["aria-label"]) {
domNode.setAttribute("aria-label",this["aria-label"]);
if(this.role) {
domNode.setAttribute("role",this.role);
}
this.assignAttributes(domNode,{
sourcePrefix: "aria-",
destPrefix: "aria-"
})
// Add a click event handler
$tw.utils.addEventListeners(domNode,[
{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"},
@ -188,7 +196,7 @@ LinkWidget.prototype.execute = function() {
// Pick up our attributes
this.to = this.getAttribute("to",this.getVariable("currentTiddler"));
this.tooltip = this.getAttribute("tooltip");
this["aria-label"] = this.getAttribute("aria-label");
this.role = this.getAttribute("role");
this.linkClasses = this.getAttribute("class");
this.overrideClasses = this.getAttribute("overrideClass");
this.tabIndex = this.getAttribute("tabindex");

View file

@ -1,6 +1,6 @@
caption: link
created: 20131024141900000
modified: 20240730065043721
modified: 20250720025154474
tags: Widgets
title: LinkWidget
type: text/vnd.tiddlywiki
@ -17,6 +17,7 @@ The content of the link widget is rendered within the `<a>` tag representing the
|!Attribute |!Description |
|to |The title of the target tiddler for the link (defaults to the [[current tiddler|Current Tiddler]]) |
|aria-label |Optional accessibility label |
|role |<<.from-version "5.4.0">> Optional [[ARIA role|https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles]] |
|tooltip |Optional tooltip WikiText |
|tabindex |Optional numeric [[tabindex|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex]] |
|draggable |"yes" to enable the link to be draggable (defaults to "yes") |
@ -25,6 +26,7 @@ The content of the link widget is rendered within the `<a>` tag representing the
|overrideClass|<<.from-version "5.1.16">> Optional CSS classes //instead of// the default classes |
|data-* |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the HTML element |
|style.* |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the HTML element |
|aria-* |<<.from-version "5.4.0">> Optional [[ARIA attributes|https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes]] to be assigned to the HTML element |
The draggable functionality is equivalent to using the DraggableWidget with the ''tiddler'' attribute set to the link target.