Bug 237102 - AX: SVG with tabindex="-1" nested inside of link label not announced by VoiceOver
Summary: AX: SVG with tabindex="-1" nested inside of link label not announced by Voice...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-02-23 12:05 PST by Joe Watkins
Modified: 2022-02-23 12:12 PST (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Joe Watkins 2022-02-23 12:05:56 PST
When an SVG is nested inside of an <a> and this SVG owns role="img", aria-label="some label here", and tabindex="-1", it appears that the SVG is not included in calculating the accessible name for the control.  Removal of the tabindex="-1" results in the SVG's label being calculated as part of the parent link's accessible name.

Attributes such as aria-hidden="true" or CSS display:none; should have this effect, but should a negative tabindex on a naturally non-focusable element? 

This isn't a common approach and one would probably not recommend a negative tabindex on and SVG anyways, but feels like a name calculation bug (or an Apple-only opinion thing?). I'm not able to reference anywhere in the Accessible Name Calculation algorithm that the SVG should be taken out. 

Tnx!

1. Visit: https://cdpn.io/pen/debug/abVKxaX
2. Using Safari (or Chrome) with VoiceOver activated, traverse the links and listen for how they are announced.
3. Expected result: The first link should announce like the second. 

Tnx!
Comment 1 Radar WebKit Bug Importer 2022-02-23 12:06:07 PST
<rdar://problem/89370402>
Comment 2 Joe Watkins 2022-02-23 12:12:01 PST
Rewording expected result:

3. Expected result: Both links should announce the nested SVG's label regardless of tabindex attribute presence.