{"html_url": "https://github.com/simonw/datasette/issues/1771#issuecomment-1356694671", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1771", "id": 1356694671, "node_id": "IC_kwDOBm6k_c5Q3YSP", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-12-18T06:34:20Z", "updated_at": "2022-12-18T06:34:20Z", "author_association": "OWNER", "body": "Now live on https://latest.datasette.io/fixtures/attraction_characteristic", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1306984363, "label": "minor a11y: <select> has no visual indicator when tabbed to"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1771#issuecomment-1356680769", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1771", "id": 1356680769, "node_id": "IC_kwDOBm6k_c5Q3U5B", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-12-18T05:56:05Z", "updated_at": "2022-12-18T05:56:05Z", "author_association": "OWNER", "body": "This does the trick:\r\n\r\n```css\r\ndiv.select-wrapper:focus-within {\r\n  border: 1px solid black;\r\n}\r\n```\r\n![tab-select-border-fix](https://user-images.githubusercontent.com/9599/208283826-de48212f-a213-40fc-9b37-9d66f0858f21.gif)\r\n", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1306984363, "label": "minor a11y: <select> has no visual indicator when tabbed to"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1771#issuecomment-1356657451", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1771", "id": 1356657451, "node_id": "IC_kwDOBm6k_c5Q3PMr", "user": {"value": 1473102, "label": "mustafa0x"}, "created_at": "2022-12-18T04:04:32Z", "updated_at": "2022-12-18T04:04:32Z", "author_association": "NONE", "body": "the problem is:\r\n```\r\n.select-wrapper select:focus {\r\n  outline: none;\r\n}\r\n```\r\n\r\nI sometimes add this js:\r\n```\r\nwindow.addEventListener('keydown', function check_tab(e) {\r\n    if (e.key === 'Tab') {\r\n        document.documentElement.classList.add('user-is-tabbing')\r\n        window.removeEventListener('keydown', check_tab)\r\n    }\r\n})\r\n```\r\n\r\nand then in the css, using a `html.user-is-tabbing` selector undo any outlines I removed.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1306984363, "label": "minor a11y: <select> has no visual indicator when tabbed to"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1771#issuecomment-1356655630", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1771", "id": 1356655630, "node_id": "IC_kwDOBm6k_c5Q3OwO", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-12-18T03:43:12Z", "updated_at": "2022-12-18T03:43:12Z", "author_association": "OWNER", "body": "The border is actually on the div that wraps the select box:\r\n\r\n<img width=\"1171\" alt=\"image\" src=\"https://user-images.githubusercontent.com/9599/208280249-9d9848b5-6e33-46c3-ad99-bc1948e08f25.png\">\r\n\r\nI tried adding a `border: 1px dotted black` to `select:focus` but it's not quite right - it jumps around a bit like this:\r\n\r\n![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)\r\n\r\n", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1306984363, "label": "minor a11y: <select> has no visual indicator when tabbed to"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1771#issuecomment-1356655217", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1771", "id": 1356655217, "node_id": "IC_kwDOBm6k_c5Q3Opx", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-12-18T03:38:16Z", "updated_at": "2022-12-18T03:38:16Z", "author_association": "OWNER", "body": "OK I see what you mean:\r\n\r\nhttps://latest.datasette.io/fixtures/attraction_characteristic\r\n\r\n![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)\r\n", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1306984363, "label": "minor a11y: <select> has no visual indicator when tabbed to"}, "performed_via_github_app": null}