Bug 266804

Summary:

AX: Slotted accessible name affected by CSS flex display

Product:

WebKit

Reporter:

Steve Repsher <steverep+webkit>

Component:

Accessibility

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Critical

CC:

andresg_22, tyler_w, webkit-bug-importer

Priority:

Keywords:

HasReduction, InRadar, Regression

Version:

Safari 17

Hardware:

iPhone / iPad

OS:

iOS 17

See Also:

https://github.com/home-assistant/frontend/issues/18759

Attachments:

Description	Flags
Repro with block vs flex buttons in shadow vs light DOM	none

Steve Repsher

Reported 2023-12-21 20:45:04 PST

Created attachment 469169 [details] Repro with block vs flex buttons in shadow vs light DOM For ARIA roles such as buttons with slotted labels, the accessible name is affected by CSS `display: flex`. See attached minimal reproduction. VoiceOver reads the buttons with `display: block` correctly, but only reads the button for `display: flex` when it is in the light DOM. The accessible name is missing when inside a shadow root. This is a regression in Safari 17. It has contributed to breaking accessibility for several components in Home Assistant (https://www.home-assistant.io).

Attachments
Repro with block vs flex buttons in shadow vs light DOM (1.26 KB, text/html) 2023-12-21 20:45 PST, Steve Repsher	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2023-12-21 20:45:15 PST

<rdar://problem/120026933>

Tyler Wilcock

Comment 2 2023-12-29 12:20:22 PST

*** This bug has been marked as a duplicate of bug 266916 ***

Note You need to log in before you can comment on or make changes to this bug.