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.

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

[Accessibility] - Test for elements not in viewport contained within content-visibility: auto CSS property #50004

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

giacomo-petri
Copy link
Contributor

Closes: web-platform-tests/interop-accessibility#168

Relates: w3c/html-aam#572

This PR introduces tests for elements outside the viewport that are contained within another element with the content-visibility: auto CSS property. The console log output includes:

  • el.textContent
  • computedRole
  • computedLabel

Note: The test outcomes are simply logs to observe browser behavior. There are no set expectations at this point, as these will be discussed in relation to w3c/html-aam#572.

@giacomo-petri
Copy link
Contributor Author

Results:

  • WebKit:
    • [Log] el-text-content: test heading; comp-role-f: heading; comp-label-f:
    • [Log] el-text-content: test button; comp-role-f: button; comp-label-f:
    • [Log] el-text-content: test link; comp-role-f: link; comp-label-f:
  • Chromium:
    • el-text-content: test heading; comp-role-f: heading; comp-label-f: test heading
    • el-text-content: test button; comp-role-f: button; comp-label-f: test button
    • el-text-content: test link; comp-role-f: link; comp-label-f: test link
  • Gecko:
    • Action get_computed_label completed with result, Action get_computed_role completed with result heading
    • Action get_computed_label completed with result, Action get_computed_role completed with result button
    • Action get_computed_label completed with result, Action get_computed_role completed with result link

Comment on lines 39 to 43
promise_test(async t => {
let computedLabel = await test_driver.get_computed_label(el);
let computedRole = await test_driver.get_computed_role(el);

console.log('el-text-content: '+el.textContent+'; comp-role-f: '+computedRole+'; comp-label-f: '+computedLabel);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can still use the existing aria utils logging to abstract this... Just leave the expected role and labels as something no engine will ever use, like data-expectedrole="SPEC_AMBIGUOUS_LOG_VALUE" and all engines will log a message like ~"Role for for element was group; Expected: SPEC_AMBIGUOUS_LOG_VALUE"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it acceptable for all engines to fail, even if the outcome is uncertain?

Comment on lines 27 to 29
<h2 class="el">test heading</h2>
<button class="el">test button</button>
<a class="el" href="#">test link</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs data-expectedrole="heading", etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

content-visibility: auto CSS property inconsistently supported
4 participants