feat(a11y): add titles

felixfbecker · Nov 15, 2020 · becf341 · becf341
1 parent 9ab65f1
commit becf341
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 31 deletions.
diff --git a/src/element.ts b/src/element.ts
@@ -1,4 +1,4 @@
-import { svgNamespace, isHTMLAnchorElement, isHTMLImageElement, isHTMLInputElement } from './dom'
+import { svgNamespace, isHTMLAnchorElement, isHTMLImageElement, isHTMLInputElement, isHTMLElement } from './dom'
 import { getAccessibilityAttributes } from './accessibility'
 import { TraversalContext, walkNode } from './traversal'
 import {
@@ -51,6 +51,13 @@ export function handleElement(element: Element, context: Readonly<TraversalConte
 			svgContainer.setAttribute('class', className)
 		}
 
+		// Title
+		if (isHTMLElement(element) && element.title) {
+			const svgTitle = context.svgDocument.createElementNS(svgNamespace, 'title')
+			svgTitle.textContent = element.title
+			svgContainer.prepend(svgTitle)
+		}
+
 		// Which parent should the container itself be appended to?
 		const stackingLayerName = determineStackingLayer(styles, parentStyles)
 		const stackingLayer = stackingLayerName

diff --git a/src/test/snapshots/https%3A%2F%2Fnews.ycombinator.com%2F.a11y.json b/src/test/snapshots/https%3A%2F%2Fnews.ycombinator.com%2F.a11y.json
@@ -72,7 +72,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -128,7 +128,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -184,7 +184,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -240,7 +240,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -296,7 +296,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -352,7 +352,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -408,7 +408,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -464,7 +464,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -520,7 +520,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -576,7 +576,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -632,7 +632,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -688,7 +688,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -776,7 +776,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -832,7 +832,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -888,7 +888,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -944,7 +944,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1000,7 +1000,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1056,7 +1056,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1112,7 +1112,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1168,7 +1168,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1224,7 +1224,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1280,7 +1280,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1336,7 +1336,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1392,7 +1392,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1448,7 +1448,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1504,7 +1504,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1560,7 +1560,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1616,7 +1616,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",
@@ -1672,7 +1672,7 @@
     },
     {
       "role": "link",
-      "name": ""
+      "name": "upvote"
     },
     {
       "role": "link",

diff --git a/src/test/snapshots/https%3A%2F%2Fwww.google.com%2F%3Fhl%3Den.a11y.json b/src/test/snapshots/https%3A%2F%2Fwww.google.com%2F%3Fhl%3Den.a11y.json
@@ -20,7 +20,7 @@
     },
     {
       "role": "button",
-      "name": ""
+      "name": "Google apps"
     },
     {
       "role": "link",