Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Oct 21, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6dc274a
Naive pseudo content impl
eps1lon Oct 21, 2019
8cf9e3c
Fix whitespace tests
eps1lon Oct 21, 2019
cbd94c0
docs: Update progress
eps1lon Oct 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
31 changes: 17 additions & 14 deletions sources/accessible-name.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)) {
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
34 changes: 17 additions & 17 deletions tests/cypress/integration/web-platform-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down Expand Up @@ -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"],
Expand Down Expand Up @@ -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"],
Expand Down