0

Don't make a11y mappings for ::checkmark

The ::checkmark pseudo-element has its contents populated via the
content property. The value of the content property can have an
additional argument provided to set the accessible name, which we
currently set to an empty string by default to hide it from the a11y
tree.

The value isn't important because I think the checked state of the
option element is already provided in a different way, and announcing a
checkmark icon is not helpful.

Based on this discussion, we should do this by default for the
::checkmark pseudo without requiring the author to also set the
accessible name to the empty string:
https://github.com/mdn/content/pull/38470#discussion_r2008010426

Fixed: 405946933
Change-Id: I983b1e7dff879f2c1a2184c505046d0581f93380
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6388535
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Commit-Queue: Aaron Leventhal <aleventhal@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1437677}
This commit is contained in:
Joey Arhar
2025-03-25 12:43:21 -07:00
committed by Chromium LUCI CQ
parent ac4da79ab5
commit 5fc3d3c782
12 changed files with 38 additions and 48 deletions
content
third_party/blink
renderer
core
html
resources
modules
web_tests
external
wpt
html
semantics
forms
the-select-element
virtual
customizable-select-disabled
external
wpt
html
semantics
forms
the-select-element
select-parser-relaxation
external
wpt
html
semantics
forms
the-select-element

@ -472,50 +472,38 @@ IN_PROC_BROWSER_TEST_P(DumpAccessibilityTreeTest, AccessibilityCSSLanguage) {
RunCSSTest(FILE_PATH_LITERAL("language.html"));
}
IN_PROC_BROWSER_TEST_P(DumpAccessibilityTreeTest,
IN_PROC_BROWSER_TEST_P(CustomizableSelectEnabledDumpAccessibilityTreeTest,
AccessibilityCSSPseudoElementCheckMark) {
base::CommandLine::ForCurrentProcess()->AppendSwitch(
switches::kEnableExperimentalWebPlatformFeatures);
RunCSSTest(FILE_PATH_LITERAL("pseudo-element-check-mark.html"));
}
IN_PROC_BROWSER_TEST_P(DumpAccessibilityTreeTest,
IN_PROC_BROWSER_TEST_P(CustomizableSelectEnabledDumpAccessibilityTreeTest,
AccessibilityCSSPseudoElementCheckMarkOverrideContent) {
base::CommandLine::ForCurrentProcess()->AppendSwitch(
switches::kEnableExperimentalWebPlatformFeatures);
RunCSSTest(
FILE_PATH_LITERAL("pseudo-element-check-mark-override-content.html"));
}
IN_PROC_BROWSER_TEST_P(
DumpAccessibilityTreeTest,
CustomizableSelectEnabledDumpAccessibilityTreeTest,
AccessibilityCSSPseudoElementCheckMarkOverrideContentAlternativeText) {
base::CommandLine::ForCurrentProcess()->AppendSwitch(
switches::kEnableExperimentalWebPlatformFeatures);
RunCSSTest(FILE_PATH_LITERAL(
"pseudo-element-check-mark-override-content-alternative-text.html"));
}
IN_PROC_BROWSER_TEST_P(DumpAccessibilityTreeTest,
IN_PROC_BROWSER_TEST_P(CustomizableSelectEnabledDumpAccessibilityTreeTest,
AccessibilityCSSPseudoElementPickerIcon) {
base::CommandLine::ForCurrentProcess()->AppendSwitch(
switches::kEnableExperimentalWebPlatformFeatures);
RunCSSTest(FILE_PATH_LITERAL("pseudo-element-picker-icon.html"));
}
IN_PROC_BROWSER_TEST_P(DumpAccessibilityTreeTest,
IN_PROC_BROWSER_TEST_P(CustomizableSelectEnabledDumpAccessibilityTreeTest,
AccessibilityCSSPseudoElementPickerIconOverrideContent) {
base::CommandLine::ForCurrentProcess()->AppendSwitch(
switches::kEnableExperimentalWebPlatformFeatures);
RunCSSTest(
FILE_PATH_LITERAL("pseudo-element-picker-icon-override-content.html"));
}
IN_PROC_BROWSER_TEST_P(
DumpAccessibilityTreeTest,
CustomizableSelectEnabledDumpAccessibilityTreeTest,
AccessibilityCSSPseudoElementPickerIconOverrideContentAlternativeText) {
base::CommandLine::ForCurrentProcess()->AppendSwitch(
switches::kEnableExperimentalWebPlatformFeatures);
RunCSSTest(FILE_PATH_LITERAL(
"pseudo-element-picker-icon-override-content-alternative-text.html"));
}

@ -2092,9 +2092,12 @@ data/accessibility/css/pseudo-element-alternative-text-expected-android.txt
data/accessibility/css/pseudo-element-alternative-text-expected-auralinux.txt
data/accessibility/css/pseudo-element-alternative-text-expected-blink.txt
data/accessibility/css/pseudo-element-alternative-text.html
data/accessibility/css/pseudo-element-check-mark-expected-auralinux.txt
data/accessibility/css/pseudo-element-check-mark-expected-blink.txt
data/accessibility/css/pseudo-element-check-mark-override-content-alternative-text-expected-auralinux.txt
data/accessibility/css/pseudo-element-check-mark-override-content-alternative-text-expected-blink.txt
data/accessibility/css/pseudo-element-check-mark-override-content-alternative-text.html
data/accessibility/css/pseudo-element-check-mark-override-content-expected-auralinux.txt
data/accessibility/css/pseudo-element-check-mark-override-content-expected-blink.txt
data/accessibility/css/pseudo-element-check-mark-override-content.html
data/accessibility/css/pseudo-element-check-mark.html

@ -0,0 +1,7 @@
[document web]
++[section]
++++[combo box] name='Pets'
++++++[menu]
++++++++[menu item] name='Dog' selectable selected
++++++++[menu item] name='Cat' selectable
++++++++[menu item] name='Donkey' selectable

@ -0,0 +1,7 @@
[document web]
++[section]
++++[combo box] name='Pets'
++++++[menu]
++++++++[menu item] name='Dog' selectable selected
++++++++[menu item] name='Cat' selectable
++++++++[menu item] name='Donkey' selectable

@ -10,7 +10,7 @@
appearance: base-select;
}
option::check {
option::checkmark {
content: '>' / 'a right pointing chevron';
}
</style>

@ -0,0 +1,7 @@
[document web]
++[section]
++++[combo box] name='Pets'
++++++[menu]
++++++++[menu item] name='Dog' selectable selected
++++++++[menu item] name='Cat' selectable
++++++++[menu item] name='Donkey' selectable

@ -10,7 +10,7 @@
appearance: base-select;
}
option::check {
option::checkmark {
content: '>';
}
</style>

@ -1834,7 +1834,7 @@ dialog:where(:modal) {
select:not(:-internal-list-box):not([multiple]) option::checkmark {
content: '\2713' / '';
content: '\2713';
}
select option:not(:checked)::checkmark {
visibility: hidden;

@ -1280,6 +1280,11 @@ bool AXObjectCacheImpl::IsRelevantPseudoElement(const Node& node) {
if (node.IsPickerIconPseudoElement()) {
return false;
}
// option::checkmark is decorative and redundant with the checked state of
// the option element.
if (node.IsCheckPseudoElement()) {
return false;
}
// Scroll control pseudo elements are always relevant when they have a
// layout object (which is checked above).
if (node.IsScrollControlPseudoElement()) {

@ -1,17 +0,0 @@
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/openui/open-ui/issues/863#issuecomment-1769004174">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<select style="appearance:base-select">
<option>option</option>
</select>
<script>
test(() => {
assert_equals(
getComputedStyle(document.querySelector('option'), '::checkmark').content,
`"\u2713" / ""`);
}, 'appearance:base-select options should have a checkmark with empty alt text.');
</script>

@ -1,5 +0,0 @@
This is a testharness.js-based test.
[FAIL] appearance:base-select options should have a checkmark with empty alt text.
assert_equals: expected "\\"✓\\" / \\"\\"" but got "none"
Harness: the test ran to completion.

@ -1,5 +0,0 @@
This is a testharness.js-based test.
[FAIL] appearance:base-select options should have a checkmark with empty alt text.
assert_equals: expected "\\"✓\\" / \\"\\"" but got "none"
Harness: the test ran to completion.