1896047 - Expose CSS content alt text in the a11y tree

Status: RESOLVED FIXED

(Core :: Disability Access APIs, enhancement)

Description

[James Teh [:Jamie]]

Spun off bug 1878355 comment 4.

Now that bug 1281158 is fixed, we can get alt text from the CSS content property from layout. However, this isn't sufficient alone to get this exposed in the a11y tree.

Simple test case for pseudo-element:

data:text/html,<style> button::before { content: url("https://via.placeholder.com/10x10.png") / "before"; } </style><button>button

For this case, we should expose an image Accessible in the tree.

Simple test case for replaced element:

data:text/html,<blockquote style="content: url('https://via.placeholder.com/10x10.png') / 'before';">replaced

This one is a bit trickier. Layout creates an image frame for the replacement image, but that frame becomes the primary frame for the blockquote element. There is no child DOM node (not even an anonymous one), so we can't create a child Accessible. We can't use an image accessible because we'd lose the semantics of this being a blockquote element. So, we need to expose a block quote accessible, but with the CSS alt text as the name. This is also what Chromium does.

Comment 1

[James Teh [:Jamie]]

There is a third case: alt text for text content:

data:text/html,<style>button::before { content: "before" / "alt-before"; } </style><button>content

This seems like a terrible use case IMO, but it is what it is. 😒

Unfortunately, the WPT tests in accname/name/comp_name_from_content.html test exactly this case.

Comment 2

[James Teh [:Jamie]]

All of these cases can have multiple alt strings:

data:text/html,<style> button::before { content: url("https://via.placeholder.com/10x10.png") / "be" "fore"; } </style><button>button

Comment 3

[James Teh [:Jamie]]

The alt text can also come from an attribute:

data:text/html,<style> button::before { content: url("https://via.placeholder.com/10x10.png") / attr(alt); } </style><button alt="before">button

Comment 4

[James Teh [:Jamie]]

Attachment: Bug 1896047 part 1: Enclose TreeWalker implementation in a namespace block.

Without this, a new source file introduced in a subsequent patch causes the compiler to become confused about which TreeWalker we mean: a11y::TreeWalker or dom::TreeWalker.
I don't really understand why this starts happening, but I'm guessing it is related to our unified builds.

Comment 5

[James Teh [:Jamie]]

Attachment: Bug 1896047 part 2: Introduce CssAltContent class to query alternative text specified in the CSS content property.

This allows us to check for alt text and also to output all of it to a string.
For now, this only supports plain strings.

Comment 6

[James Teh [:Jamie]]

Attachment: Bug 1896047 part 3: Use CSS alt text as the name for an Accessible if all else fails.

This directly handles the case where the CSS content property replaces the content of an element with an image plus alt text.
It is also needed to correctly return the alt text for a pseudo-element ImageAccessible, as implemented in a subsequent patch.

Comment 7

[James Teh [:Jamie]]

Attachment: Bug 1896047 part 4: Create an ImageAccessible for a pseudo-element image if there is CSS alt text.

Comment 8

[James Teh [:Jamie]]

Attachment: Bug 1896047 part 5: Support CSS alt text for text content.

CSS alt text makes most sense for an image.
However, even when the content property specifies text, you can still specify alt text!
To support this, this patch does two things:

1. Uses the alt text for the TextLeafAccessible instead of the primary text.
2. Tweaks nsTextEquivUtils to use the alt text when gathering text from a subtree.

Comment 9

[James Teh [:Jamie]]

Attachment: Bug 1896047 part 6: Support the CSS attr() function in CssAltContent.

As well as plain strings, alt text items can get their text from an attribute on the Element.

Comment 10

[Eitan Isaacson [:eeejay]]

I feel nervous introducing this stuff without proper change notification and cache updates, as uncommon as this type of content is. How hard would it be to do that in a followup?

Comment 11

[James Teh [:Jamie]]

That's fair. I'm mostly just trying to get us over the Interop hump without investing a lot of time in rare edge cases, but I agree it's not ideal to not handle changes correctly. Some cases probably already work, but handling the others could be a bit tricky. I'll put some time into at least writing tests for the cases that do work and scoping out the effort for a follow-up.

Comment 12

[James Teh [:Jamie]]

I ended up just updating all the patches to support changes.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/23d81ef2bcec
part 1: Enclose TreeWalker implementation in a namespace block. r=eeejay
https://hg.mozilla.org/integration/autoland/rev/dd7609ef8621
part 2: Introduce CssAltContent class to query alternative text specified in the CSS content property. r=eeejay
https://hg.mozilla.org/integration/autoland/rev/d1e948377369
part 3: Use CSS alt text as the name for an Accessible if all else fails. r=eeejay
https://hg.mozilla.org/integration/autoland/rev/0a769799cf8f
part 4: Create an ImageAccessible for a pseudo-element image if there is CSS alt text. r=eeejay
https://hg.mozilla.org/integration/autoland/rev/b0624a5487a0
part 5: Support CSS alt text for text content. r=eeejay
https://hg.mozilla.org/integration/autoland/rev/64e531b3346f
part 6: Support the CSS attr() function in CssAltContent. r=eeejay

Comment 14

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/23d81ef2bcec
https://hg.mozilla.org/mozilla-central/rev/dd7609ef8621
https://hg.mozilla.org/mozilla-central/rev/d1e948377369
https://hg.mozilla.org/mozilla-central/rev/0a769799cf8f
https://hg.mozilla.org/mozilla-central/rev/b0624a5487a0
https://hg.mozilla.org/mozilla-central/rev/64e531b3346f