minor a11y: <select> has no visual indicator when tabbed to

[mustafa0x]

No description provided.

[simonw]

OK I see what you mean:

https://latest.datasette.io/fixtures/attraction_characteristic

[simonw]

The border is actually on the div that wraps the select box:

I tried adding a border: 1px dotted black to select:focus but it's not quite right - it jumps around a bit like this:

[mustafa0x]

the problem is:

.select-wrapper select:focus {
  outline: none;
}

I sometimes add this js:

window.addEventListener('keydown', function check_tab(e) {
    if (e.key === 'Tab') {
        document.documentElement.classList.add('user-is-tabbing')
        window.removeEventListener('keydown', check_tab)
    }
})

and then in the css, using a html.user-is-tabbing selector undo any outlines I removed.

[simonw]

This does the trick:

div.select-wrapper:focus-within {
  border: 1px solid black;
}

[simonw]

Now live on https://latest.datasette.io/fixtures/attraction_characteristic