Bugzilla

(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)

(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)

(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)