Why is the focus visible when a lightDom element in a web component is clicked?
Garcia-Christophe opened this issue · comments
I've created a simple web component that lets you create a custom button.
When clicked, I want the page title to be focused.
With button tag and a simple text content inside, the title is not visually focused. Same with my web component (in slot). That's cool.
With button tag and a tag span inside, the title is not visually focused. But, the title is visually focused with my web component (in slot). That's not cool.
I don't understand why the title is visually focused (which I don't want it to be), when I click on the lightDom element (e.g. the span). This doesn't happen when I click on my component directly (the shadowDOM part).
I expect my title to be focus but not visible-focus, without hiding by forcing.
I tried to look at this thread too: Why is focus-visible applied on page load
// Template web component
const template = document.createElement('template');
template.innerHTML = `
<style>
button {
background-color: lightgreen;
padding: 10px;
}
</style>
<button>
<slot></slot>
</button>`;
// Class web component
class MyBtn extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: 'open'
});
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
// web component definition
window.customElements.define('my-btn', MyBtn);
// Set focus to title on click
function focusTitle() {
const h1 = document.getElementById('title');
h1.setAttribute('tabindex', -1);
h1.focus();
}
// Add click event listener
document.getElementById('btn1').addEventListener('click', focusTitle);
document.getElementById('btn2').addEventListener('click', focusTitle);
<h1 id="title">Test redirection focus</h1>
<button id="btn1" style="padding: 10px">
<span>(button > span) Click me and I don't visually focus title</span>
(button > simple text content) Click me and I don't visually focus title
</button>
<my-btn id="btn2">
<span>(MyBtn > span) Click me and I DO visually focus title</span>
(MyBtn > simple text content) Click me and I don't visually focus title
</my-btn>