html_url,issue_url,id,node_id,user,user_label,created_at,updated_at,author_association,body,reactions,issue,issue_label,performed_via_github_app
https://github.com/simonw/datasette/issues/1771#issuecomment-1356655217,https://api.github.com/repos/simonw/datasette/issues/1771,1356655217,IC_kwDOBm6k_c5Q3Opx,9599,simonw,2022-12-18T03:38:16Z,2022-12-18T03:38:16Z,OWNER,"OK I see what you mean:

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

![Animated GIF of the table page hitting tab a bunch - the cog icon highlights and so does the text input but the two select boxes do not](https://user-images.githubusercontent.com/9599/208280176-1e2de671-fe69-43e8-8d62-bf7aa8f4d36e.gif)
","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1306984363,minor a11y: <select> has no visual indicator when tabbed to,
https://github.com/simonw/datasette/issues/1771#issuecomment-1356655630,https://api.github.com/repos/simonw/datasette/issues/1771,1356655630,IC_kwDOBm6k_c5Q3OwO,9599,simonw,2022-12-18T03:43:12Z,2022-12-18T03:43:12Z,OWNER,"The border is actually on the div that wraps the select box:

<img width=""1171"" alt=""image"" src=""https://user-images.githubusercontent.com/9599/208280249-9d9848b5-6e33-46c3-ad99-bc1948e08f25.png"">

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

![Tabbing to the selects shows a 1px border but the element expands in size by one pixel, causing a visual jump](https://user-images.githubusercontent.com/9599/208280271-41a07f68-b8b1-4908-a4e2-aac4304d6c09.gif)

","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1306984363,minor a11y: <select> has no visual indicator when tabbed to,
https://github.com/simonw/datasette/issues/1771#issuecomment-1356657451,https://api.github.com/repos/simonw/datasette/issues/1771,1356657451,IC_kwDOBm6k_c5Q3PMr,1473102,mustafa0x,2022-12-18T04:04:32Z,2022-12-18T04:04:32Z,NONE,"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.","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1306984363,minor a11y: <select> has no visual indicator when tabbed to,
https://github.com/simonw/datasette/issues/1771#issuecomment-1356680769,https://api.github.com/repos/simonw/datasette/issues/1771,1356680769,IC_kwDOBm6k_c5Q3U5B,9599,simonw,2022-12-18T05:56:05Z,2022-12-18T05:56:05Z,OWNER,"This does the trick:

```css
div.select-wrapper:focus-within {
  border: 1px solid black;
}
```
![tab-select-border-fix](https://user-images.githubusercontent.com/9599/208283826-de48212f-a213-40fc-9b37-9d66f0858f21.gif)
","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1306984363,minor a11y: <select> has no visual indicator when tabbed to,
https://github.com/simonw/datasette/issues/1771#issuecomment-1356694671,https://api.github.com/repos/simonw/datasette/issues/1771,1356694671,IC_kwDOBm6k_c5Q3YSP,9599,simonw,2022-12-18T06:34:20Z,2022-12-18T06:34:20Z,OWNER,Now live on https://latest.datasette.io/fixtures/attraction_characteristic,"{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1306984363,minor a11y: <select> has no visual indicator when tabbed to,