1848781 - Minor: Voiceover says previous button name when using figure + figcaption

Status: UNCONFIRMED

(Core :: Disability Access APIs, defect)

Description

[gosha.evtushenko]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0

Steps to reproduce:

When using Firefox 117.0b7 on mac os + voiceover

1. go to https://developer.mozilla.org/en-US/play
2. use this html:

<button>This is a button</button>

<div class="card">
  <figure>
    <figcaption class="h5">This is a figure</figcaption>
    <img src="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure/favicon-192x192.png" alt="The beautiful MDN logo." />

    <div>some more text around</div>
  </figure>
</div>

3. focus on a button

Actual results:

4. voiceover says "This is a button, button"
5. go to next element (control + option + right arrow). voiceover says "This is a figure, figure"
6. go to next element. voiceover says "button"

Expected results:

on step 6 voiceover should say "This is a figure", the next element's text

Removing class="h5" on figcaption seems to fix the issue

Comment 1

[gosha.evtushenko]

If figcaption is moved to the end, unable to hear the text in it (when using control + option + right arrow)

Html example:

<button>This is a button</button>

<div class="card">
  <figure>
    <img
      src="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure/favicon-192x192.png"
      alt="The beautiful MDN logo."
    />

    <div>some more text around</div>

    <figcaption class="h1">This is a figure</figcaption>
  </figure>
</div>

Chrome and Safari don't have this issue, I assume this might be a firefox bug

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Disability Access APIs' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[James Teh [:Jamie]]

VoiceOver does report the figcaption when the cursor lands on the figure. As per the spec, the figure is considered to be "labelled by" the figcaption. The figcaption is definitely exposed in the raw accessibility tree, so my guess is that VoiceOver is choosing to skip the label (figcaption), since the label is already reported by the target being labelled (the figure).

Morgan, does this track with your understanding of how VO does things?

In contrast, Chrome does not follow the spec and does not expose a figcaption as labelling the figure.

Comment 4

[Morgan Reschenberg [:morgan]]

(In reply to James Teh [:Jamie] from comment #3)

VoiceOver does report the figcaption when the cursor lands on the figure. As per the spec, the figure is considered to be "labelled by" the figcaption. The figcaption is definitely exposed in the raw accessibility tree, so my guess is that VoiceOver is choosing to skip the label (figcaption), since the label is already reported by the target being labelled (the figure).

Morgan, does this track with your understanding of how VO does things?

In contrast, Chrome does not follow the spec and does not expose a figcaption as labelling the figure.

This is really odd :)

You're right that VO will skip redundant labels, but I don't think that's what's happening here.
VO seems to be reporting a button where there isn't one (it thinks the figcaption is a button) exclusively when navigating from the HTML button to the figure, and then to the figcaption. If you navigate from the figure to the figcaption without naving through the button, things work fine. Things are also fine if you nav up from the bottom of the page instead of from the top.

Removing the "class" designation on the figcaption doesn't seem to fix this issue for me, I suspect it has no bearing on the acc because the class is undefined (unless there's a CSS file I'm missing). FWIW I've tested this as a data URI and the issue persists, so it isn't an artifact of the MDN environment.

Interestingly, the visual cursor that bounds the fake button seems to span from the "s" in "is" of "This is a button" to the "f" in "This is a figure". When I activate the button, VO reads "a" and the visual cursor bounds the "a " in "This is a figure" (space inclusive). Naving next takes me to the image, and naving back takes me to the (correctly bounded this time) "This is a figure" text string, which VO no longer considers a button :))

This fake button doesn't show up in the inspector.

Further still, if I modify the HTML to the following (replacing the button with a heading):
data:text/html,<h1>This is a heading</h1><div class="card"><figure><figcaption class="h5">This is a figure</figcaption><img src="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure/favicon-192x192.png" alt="The beautiful MDN logo." /><div>some more text around</div></figure></div>

VO now considers the "bad" invisible element to be a heading and not a button :)))

I think the root of this issue is that we're inserting a group into the tree where Safari seems to not. Our tree is:

Button (This is a button)
Figure (This is a figure)

Group (This is a figure) <--- bad

Text (This is a figure)

Image (The beautiful MDN logo)
Group (no description)

Text (some more text around)

Safari's tree looks like this:

Button (This is a button)
Figure (This is a figure)

Text (This is a figure)
Image (The beautiful MDN logo)
Group (no description)

Text (some more text around)

Comment 5

[James Teh [:Jamie]]

That "bad" group is the figcaption. If I understand you correctly, it looks like Safari just prunes that from the tree? That does not match the spec, but I suppose I shouldn't be too surprised.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:Jamie, could you have a look please?

For more information, please visit BugBot documentation.

Comment 7

[Morgan Reschenberg [:morgan]]

I tried using the ignore functions to get the text leaf displayed as a child of the figure rather than a child of the caption (which descends from the figure). Although the tree looks right, VO still doesn't want to navigate the text leaf. It skips over it, going straight to the image on "VO + next" instead. I'm not sure what else needs to happen here for VO to be happy, maybe there are other attributes we're missing.

My best guess is that, although we're skipping the caption by not including it in the children of the figure or the parent of the text leaf, the text leaf still appears in its children, and the figure still appears as its parent. For correctness, we probably shouldn't be creating a MOX accessible for this at all. We don't currently have the ability to do that though, we can only avoid creating natives for leaves.