| Summary: | AX: safari is focusing twice in shadow dom using custom elements | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | snigdha <ananthulasnigdha6> | ||||
| Component: | Accessibility | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | andresg_22, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 17 | ||||||
| Hardware: | All | ||||||
| OS: | All | ||||||
| Attachments: |
|
||||||
Created attachment 468708 [details] video of the dom We are using Shadow Dom and we have custom elements. We have a structure where a custom button icon element has another custom button icon element as a child. When we navigate using keyboard, the button is focused twice, once on the child and on the parent. The articles show that we need to have "Press Tab to highlight each item on a web page" to tab through the custom elements. But even with this setting off, we are able to navigate through all our custom elements. This is reproducible only in Safari. Here is the video of the issue and below is the dom structure. If i replace the custom elements with <div>, i do not see the issue. <lightning-icon lwc-4kb6kaqheak="" class="slds-input__icon slds-input__icon_right slds-icon-utility-down slds-icon_container" icon-name="utility:down"> <span style="--sds-c-icon-color-background: var(--slds-c-icon-color-background, transparent)" part="boundary"> <lightning-primitive-icon size="xx-small" variant=""><svg class="slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="down" aria-hidden="true" viewBox="0 0 520 520" part="icon"> <g><path d="M83 140h354c10 0 17 13 9 22L273 374c-6 8-19 8-25 0L73 162c-7-9-1-22 10-22z"></path></g></svg> </lightning-primitive-icon> </span> </lightning-icon>