feat: Consider content from before and after pseudo elements (#5)

eps1lon · Oct 21, 2019 · 0987426 · 0987426
1 parent 458fa65
commit 0987426
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,12 @@ your eye feel free to let me know. DMs are open.
 Using https://github.com/web-platform-tests/wpt. Be sure to init submodules when
 cloning. See tests/README.md for more info about the test setup.
 
+### browser (Chrome)
+
+134/144 of which 5 are due to missing whitespace.
+
+### jsdom
+
 <details>
 <summary>report 124/159 passing of which 16 are due `::before { content }`, 14 are accessible desc, 9 are pathological </summary>
 

diff --git a/sources/accessible-name.ts b/sources/accessible-name.ts
@@ -263,6 +263,14 @@ function getValueOfTextbox(element: Element): string {
 	return element.textContent || "";
 }
 
+function getTextualContent(declaration: CSSStyleDeclaration): string {
+	const content = declaration.getPropertyValue("content");
+	if (/^["'].*["']$/.test(content)) {
+		return content.slice(1, -1);
+	}
+	return "";
+}
+
 /**
  * implements https://w3c.github.io/accname/#mapping_additional_nd_te
  * @param root
@@ -293,12 +301,8 @@ export function computeAccessibleName(
 		let accumulatedText = "";
 		if (isElement(node)) {
 			const pseudoBefore = safeWindow(node).getComputedStyle(node, "::before");
-			const beforeContent = pseudoBefore.getPropertyValue("content");
-			// TODO handle `content`
-			/* accumulatedText = prependResultWithoutSpace(
-				accumulatedText,
-				beforeContent
-			); */
+			const beforeContent = getTextualContent(pseudoBefore);
+			accumulatedText = `${beforeContent} ${accumulatedText}`;
 		}
 
 		for (const child of queryChildNodes(node)) {
@@ -319,9 +323,8 @@ export function computeAccessibleName(
 
 		if (isElement(node)) {
 			const pseudoAfter = safeWindow(node).getComputedStyle(node, ":after");
-			const afterContent = pseudoAfter.getPropertyValue("content");
-			// TODO handle `content`
-			/* accumulatedText = appendResultWithoutSpace(accumulatedText, afterContent); */
+			const afterContent = getTextualContent(pseudoAfter);
+			accumulatedText = `${accumulatedText} ${afterContent}`;
 		}
 
 		return accumulatedText;
@@ -443,16 +446,16 @@ export function computeAccessibleName(
 
 		// 2D
 		if (!hasAnyConcreteRoles(current, ["none", "presentation"])) {
-			const attributeTextAlternative = computeAttributeTextAlternative(current);
-			if (attributeTextAlternative !== null) {
-				consultedNodes.add(current);
-				return attributeTextAlternative;
-			}
 			const elementTextAlternative = computeElementTextAlternative(current);
 			if (elementTextAlternative !== null) {
 				consultedNodes.add(current);
 				return elementTextAlternative;
 			}
+			const attributeTextAlternative = computeAttributeTextAlternative(current);
+			if (attributeTextAlternative !== null) {
+				consultedNodes.add(current);
+				return attributeTextAlternative;
+			}
 		}
 
 		// 2E

diff --git a/tests/cypress/integration/web-platform-test.js b/tests/cypress/integration/web-platform-test.js
@@ -62,8 +62,8 @@ context("wpt", () => {
 		["name_test_case_549-manual", "pass"],
 		["name_test_case_550-manual", "pass"],
 		["name_test_case_551-manual", "pass"],
-		["name_test_case_552-manual", "fail"], // missing word, ::before
-		["name_test_case_553-manual", "fail"], // missing word, ::after
+		["name_test_case_552-manual", "pass"],
+		["name_test_case_553-manual", "pass"],
 		["name_test_case_556-manual", "pass"],
 		["name_test_case_557-manual", "pass"],
 		["name_test_case_558-manual", "pass"],
@@ -101,11 +101,11 @@ context("wpt", () => {
 		["name_test_case_619-manual", "fail"], // whitespace, see name_test_case_617-manual
 		["name_test_case_620-manual", "fail"], // whitespace, see name_test_case_617-manual
 		["name_test_case_621-manual", "pass"],
-		["name_test_case_659-manual", "fail"], // wrong, ::before + ::after
-		["name_test_case_660-manual", "fail"], // wrong, see name_test_case_659-manual
-		["name_test_case_661-manual", "fail"], // wrong, see name_test_case_659-manual
-		["name_test_case_662-manual", "fail"], // wrong, see name_test_case_659-manual
-		["name_test_case_663a-manual", "fail"], // wrong, see name_test_case_659-manual
+		["name_test_case_659-manual", "fail"], // wrong, ::before + [title] + ::after
+		["name_test_case_660-manual", "fail"], // wrong, ::before + [title] + ::after
+		["name_test_case_661-manual", "pass"],
+		["name_test_case_662-manual", "pass"],
+		["name_test_case_663a-manual", "pass"],
 		["name_test_case_721-manual", "pass"],
 		["name_test_case_723-manual", "pass"],
 		["name_test_case_724-manual", "pass"],
@@ -136,16 +136,16 @@ context("wpt", () => {
 		["name_test_case_750-manual", "pass"],
 		["name_test_case_751-manual", "pass"],
 		["name_test_case_752-manual", "pass"],
-		["name_test_case_753-manual", "fail"], // wrong, ::before
-		["name_test_case_754-manual", "fail"], // wrong, ::before
-		["name_test_case_755-manual", "fail"], // wrong, ::before
-		["name_test_case_756-manual", "fail"], // wrong, ::before
-		["name_test_case_757-manual", "fail"], // wrong, ::before
-		["name_test_case_758-manual", "fail"], // wrong, ::before
-		["name_test_case_759-manual", "fail"], // wrong, ::after
-		["name_test_case_760-manual", "fail"], // wrong, ::after
-		["name_test_case_761-manual", "fail"], // wrong, ::after
-		["name_test_case_762-manual", "fail"], // wrong, ::after
+		["name_test_case_753-manual", "pass"],
+		["name_test_case_754-manual", "pass"],
+		["name_test_case_755-manual", "pass"],
+		["name_test_case_756-manual", "pass"],
+		["name_test_case_757-manual", "pass"],
+		["name_test_case_758-manual", "pass"],
+		["name_test_case_759-manual", "pass"],
+		["name_test_case_760-manual", "pass"],
+		["name_test_case_761-manual", "pass"],
+		["name_test_case_762-manual", "pass"],
 		["name_text-label-embedded-combobox-manual", "pass"],
 		["name_text-label-embedded-menu-manual", "pass"],
 		["name_text-label-embedded-select-manual", "pass"],