📝 Spec issue: incorrect role mappings

[cmorten]

Specification reference(s)

HTML-AAM 1.0 Working Draft:

• https://www.w3.org/TR/html-aam-1.0/#el-aside-ancestorbodymain - aside "scoped to the body or main element" must have a "complementary role"
• https://www.w3.org/TR/html-aam-1.0/#el-aside - aside "scoped to a sectioning content element)" must have a "complementary role if the aside element has an accessible name. Otherwise, generic role."
• https://www.w3.org/TR/html-aam-1.0/#el-section
• https://www.w3.org/TR/html-aam-1.0/#el-th-rowheader

HTML-ARIA Recommendation:

• https://www.w3.org/TR/html-aria/#el-aside

  This somewhat contradicts the HTML-AAM 1.0 spec, but in my experience it is often an oversight than deliberate - worth raising an issue to see if HTML-ARIA needs an update to have a conditional role, similar to footer etc.

• https://www.w3.org/TR/html-aria/#el-section

• https://www.w3.org/TR/html-aria/#el-th

  Would suggest the spec is ambiguous here in not defining exactly what role to take when - the HTML-AAM 1.0 spec is more precise here.

SVG-AAM 1.0 Working Draft:

• https://www.w3.org/TR/svg-aam-1.0/#mapping_role_table - notably for a, g, and image, but potentially other role mappings as well.

WPT:

• https://github.com/web-platform-tests/wpt/blob/master/html-aam/roles-contextual.html
• https://github.com/web-platform-tests/wpt/blob/master/html-aam/table-roles.html
• https://github.com/web-platform-tests/wpt/blob/master/svg-aam/role/roles.html

Output

JSDOM WPT output:

  3) web-platform-tests
       html-aam
         roles-contextual.html:
     Error: 6/22 errors in test:

Failed in "el-aside-in-article-in-main":
assert_false: Computed Role: "complementary" does not match any of the acceptable role strings in ["generic", "", "none"]: <aside data-testname="el-aside-in-article-in-main" class="ex-generic">x</aside> expected false got true

    at Test.<anonymous> (http://web-platform.test:9000/wai-aria/scripts/aria-utils.js:95:16)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Failed in "el-aside-in-article":
assert_false: Computed Role: "complementary" does not match any of the acceptable role strings in ["generic", "", "none"]: <aside data-testname="el-aside-in-article" class="ex-generic">x</aside> expected false got true

    at Test.<anonymous> (http://web-platform.test:9000/wai-aria/scripts/aria-utils.js:95:16)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Failed in "el-aside-in-aside":
assert_false: Computed Role: "complementary" does not match any of the acceptable role strings in ["generic", "", "none"]: <aside data-testname="el-aside-in-aside" class="ex-generic">x</aside> expected false got true

    at Test.<anonymous> (http://web-platform.test:9000/wai-aria/scripts/aria-utils.js:95:16)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Failed in "el-aside-in-nav":
assert_false: Computed Role: "complementary" does not match any of the acceptable role strings in ["generic", "", "none"]: <aside data-testname="el-aside-in-nav" class="ex-generic">x</aside> expected false got true

    at Test.<anonymous> (http://web-platform.test:9000/wai-aria/scripts/aria-utils.js:95:16)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Failed in "el-aside-in-section":
assert_false: Computed Role: "complementary" does not match any of the acceptable role strings in ["generic", "", "none"]: <aside data-testname="el-aside-in-section" class="ex-generic">x</aside> expected false got true

    at Test.<anonymous> (http://web-platform.test:9000/wai-aria/scripts/aria-utils.js:95:16)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Failed in "el-section-no-name":
assert_false: Computed Role: "region" does not match any of the acceptable role strings in ["generic", "", "none"]: <section data-testname="el-section-no-name" class="ex-generic">x</section> expected false got true

  6) web-platform-tests
       html-aam
         table-roles.html:
     Error: 1/7 errors in test:

Failed in "el-th-in-row":
assert_equals: <th data-testname="el-th-in-row" data-expectedrole="rowheader" class="ex">1</th> expected "rowheader" but got "columnheader"

  8) web-platform-tests
       svg-aam
         role/roles.html:
     Error: 3/4 errors in test:

Failed in "el-a[xlink:href]":
assert_equals: <a xlink:href="#" data-testname="el-a[xlink:href]" data-expectedrole="link" aria-label="label" class="ex">x</a> expected "link" but got "generic"

    at Test.<anonymous> (http://web-platform.test:9000/wai-aria/scripts/aria-utils.js:55:9)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Failed in "el-g":
assert_equals: <g fill="white" stroke="green" stroke-width="2" data-testname="el-g" data-expectedrole="group" aria-label="label" class="ex">
    <circle cx="40" cy="40" r="25"></circle>
  </g> expected "group" but got ""

    at Test.<anonymous> (http://web-platform.test:9000/wai-aria/scripts/aria-utils.js:55:9)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

Failed in "el-image":
assert_equals: <image data-testname="el-image" data-expectedrole="image" aria-label="label" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></image> expected "image" but got ""

Notes

This issue is raised off the back of guidepup/virtual-screen-reader#113 where I've copied only the stable (non-"tentative") test failures across, loosely summarised as:

• aside element roles when in different contexts being incorrect
• section element having an incorrect role when it has no accessible name
• th element having an incorrect role when it has a row ancestor
• SVG link element having an incorrect role
• SVG g element having an incorrect role
• SVG image element having an incorrect role

Happy to split into separate issues! Appreciate some of this is relating to context, some for naming conditions, and others are just missing roles. I've got a feeling that this lib might also be missing https://www.w3.org/TR/dpub-aam-1.0/ role mappings as well?

Also please contest if one of these issues actually lies downstream in @guidepup/virtual-screen-reader and I'm incorrect in pointing here.

Contributing

• I am willing to open a Pull Request

[drwpow-figma]

These are all great test cases I need to add! One issue like this is fine. I haven’t gone through the referenced specs fully but I suspect most if not all of the test failures are valid and could be addressed in this library. After reading through everything, will let you know if I interpret anything differently than you have. Thank you!

[cmorten]

For completeness / future reference, see the following html-aria issues for the areas where html-aria has yet to mirror the html-aam spec for implicit role definitions:

• Updates to aside element w3c/html-aria#411
• Implicit aria semantics for <th> with set scope attribute w3c/html-aria#495

[drwpow]

Thanks! Yeah when implementing my goal was to follow the complete spec, but I wasn’t aware the HTML AAM spec had all the guidance it does. We can just use this (and PR #38) to track the bulk implementation of that doc. And I’m sure I’ll miss a thing here or there that we can fix in followups

[drwpow]

Whoops—seems “Partially fix [issue]” in PR description is interpreted as “fix [issue]”. Noted for next time.

[cmorten]

Yeah have to be careful with word choice 😅

REF: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests

I’ve settled on “Relates to” as a “Partially fixes” alternative.