266804 2023-12-21 20:45:04 -0800 AX: Slotted accessible name affected by CSS flex display 2023-12-29 12:20:22 -0800 1 1 1 Unclassified WebKit Accessibility Safari 17 iPhone / iPad iOS 17 RESOLVED DUPLICATE 266916 https://github.com/home-assistant/frontend/issues/18759 HasReduction, InRadar, Regression P1 Critical --- 1 steverep+webkit webkit-unassigned andresg_22 tyler_w webkit-bug-importer oldest_to_newest 2001547 0 469169 steverep+webkit 2023-12-21 20:45:04 -0800 Created attachment 469169 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). 2001548 1 webkit-bug-importer 2023-12-21 20:45:15 -0800 <rdar://problem/120026933> 2002249 2 tyler_w 2023-12-29 12:20:22 -0800 *** This bug has been marked as a duplicate of bug 266916 *** 469169 2023-12-21 20:45:04 -0800 2023-12-21 20:45:04 -0800 Repro with block vs flex buttons in shadow vs light DOM voiceover-flex-in-shadow-repro.html text/html 1286 steverep+webkit PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5Ib21l PC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmll d3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIiAvPgog IDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPkNTUyBmbGV4IGRpc3BsYXkgYWZmZWN0cyBidXR0b24n cyBhY2Nlc3NpYmxlIG5hbWUgaW4gc2hhZG93IERPTTo8L3A+CiAgICA8bXktc2ltcGxlPjwvbXkt c2ltcGxlPgogICAgPHA+U2FtZSBjb2RlIGluIGxpZ2h0IERPTSB3b3Jrczo8L3A+CiAgICA8bXkt YnV0dG9ucz4KICAgICAgPHNwYW4gc2xvdD0iZmxleCI+ZmxleCB0ZXN0PC9zcGFuPgogICAgICA8 c3BhbiBzbG90PSJibG9jayI+YmxvY2sgdGVzdDwvc3Bhbj4KICAgIDwvbXktYnV0dG9ucz4KICAg IDxzY3JpcHQ+CiAgICAgIGNsYXNzIE15U2ltcGxlIGV4dGVuZHMgSFRNTEVsZW1lbnQgewogICAg ICAgIGNvbnN0cnVjdG9yKCkgewogICAgICAgICAgc3VwZXIoKTsKICAgICAgICAgIGNvbnN0IHJv b3QgPSB0aGlzLmF0dGFjaFNoYWRvdyh7IG1vZGU6ICJvcGVuIiB9KTsKICAgICAgICAgIHJvb3Qu aW5uZXJIVE1MID0gYAogICAgICAgICAgPG15LWJ1dHRvbnM+CiAgICAgIDxzcGFuIHNsb3Q9ImZs ZXgiPmZsZXggdGVzdDwvc3Bhbj4KICAgICAgPHNwYW4gc2xvdD0iYmxvY2siPmJsb2NrIHRlc3Q8 L3NwYW4+CiAgICA8L215LWJ1dHRvbnM+CmA7CiAgICAgICAgfQogICAgICB9CiAgICAgIGN1c3Rv bUVsZW1lbnRzLmRlZmluZSgibXktc2ltcGxlIiwgTXlTaW1wbGUpOwogICAgICBjbGFzcyBNeUJ1 dHRvbnMgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICAgICAgY29uc3RydWN0b3IoKSB7CiAgICAg ICAgICBzdXBlcigpOwogICAgICAgICAgY29uc3Qgcm9vdCA9IHRoaXMuYXR0YWNoU2hhZG93KHsg bW9kZTogIm9wZW4iIH0pOwogICAgICAgICAgcm9vdC5pbm5lckhUTUwgPSBgCiAgICAgICAgICA8 YnV0dG9uIHN0eWxlPSJkaXNwbGF5OiBmbGV4OyI+PHNsb3QgbmFtZT0iZmxleCI+PC9zbG90Pjwv YnV0dG9uPgogICAgICAgICAgPGJ1dHRvbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7Ij48c2xvdCBu YW1lPSJibG9jayI+PC9zbG90PjwvYnV0dG9uPgogICAgICAgICAgYDsKICAgICAgICB9CiAgICAg IH0KICAgICAgY3VzdG9tRWxlbWVudHMuZGVmaW5lKCJteS1idXR0b25zIiwgTXlCdXR0b25zKTsK ICAgIDwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPgo=