- From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
- Date: Wed, 30 Aug 2017 14:45:51 +0000
- To: public-css-archive@w3.org
If you want to test out what using a `tab-index:;` property would be like, I've explored this idea before and written a plugin that allows CSS authors to set `tabindex=""` properties on elements from CSS, even responsively.
The plugin works as intended, but after actually trying out the functionality in browsers, seeing what it does and how browsers handle `tabindex=""` attributes versus how pages function without any `tabindex=""` set, I never went ahead and officially released this—I don't even use it myself.
Setting `tabindex=""` from CSS _sounds_ like a good idea and it's a lot of fun to explore, but I wasn't able to detect any usable result at the end of this exploration that I thought would be a benefit if added to CSS. Try out the plugin yourself and see.
The only use case I could think of where it might be a help is in the case where you have re-ordered items using flexbox (which you shouldn't do…) and want to 'repair' a more natural `tabindex=""`, but I fear this would allow you to repair _just_ the `tabindex=""` while keeping the reading order of the rest of the content in a messed up order. Thinking more about that use case, setting a correct `tabindex=""` on messed up content might mess it up further. Maybe it's not even good in that case! 🤔💭
## Problems
- setting `tabindex=""` in HTML takes navigational control away from users, because of this I've heard accessibility people recommend _against_ using `tabindex=""` in HTML, and I believe some accessibility tools will entirely ignore it even if it's present. Is `tabindex=""` even a useful HTML attribute today?
- If we expose the ability to set or change `tabindex=""` values from CSS wouldn't that mean taking _even more_ navigational control from the user than just setting `tabindex=""` in HTML alone?
- How do we decide which value(s) to assign when a CSS selector matches more than one element in the document, like `* { tab-index: 2; }`
## Video
- [Video Link: http://i.imgur.com/G4k6WnS.gif](http://i.imgur.com/G4k6WnS.gif)
## Code
```html
<section>
<input placeholder=first>
<input placeholder=second>
<input placeholder=third>
</section>
<style>
input {
display: block;
width: 33.33%;
float: left;
font-size: 14pt;
padding: .5em;
}
[placeholder=first] {
--tab-index: 3;
}
[placeholder=second] {
--tab-index: 2;
}
[placeholder=third] {
--tab-index: 1;
}
@media (min-width: 600px) {
body {
background: tan;
}
[placeholder=first] {
--tab-index: 2;
}
[placeholder=second] {
--tab-index: 1;
}
[placeholder=third] {
--tab-index: 3;
}
}
@media (min-width: 1200px) {
body {
background: pink;
}
[placeholder=first] {
--tab-index: 3;
}
[placeholder=second] {
--tab-index: 1;
}
[placeholder=third] {
--tab-index: 2;
}
}
</style>
<script>
/*
# Tabby
## version 0.0.1
Author: Tommy Hodgins
License: MIT
*/
const tabby = {}
tabby.load = () => {
tabby.findRules()
}
tabby.findRules = () => {
// For each stylesheet
Array.from(document.styleSheets, sheet => {
// For each rule
sheet.cssRules && Array.from(sheet.cssRules, rule => {
tabby.process(rule)
})
})
}
tabby.process = rule => {
// If rule is a qualified rule, process it
if (rule.type === 1) {
let node = tabby.transform(rule)
document.querySelector(node.tag).setAttribute('tabindex', node.value)
}
// If rule is an at-rule, find all qualified rules inside
if (rule.type === 4) {
// Remember media query text
let mediaText = rule.media.mediaText
// If there are qualified rules, find all rules
rule.cssRules && Array.from(rule.cssRules, mediaRule => {
let node = tabby.transform(mediaRule)
if (window.matchMedia(mediaText).matches) {
document.querySelector(node.tag).setAttribute('tabindex', node.value)
}
})
}
}
tabby.transform = rule => {
let selector = rule.selectorText.replace(/(.*)\s{/gi, '$1')
let ruleText = rule.cssText.replace(/.*\{(.*)\}/gi, '$1')
// For each rule, search for `--tab-index`
let index = ruleText.replace(/(--tab-index:\s*)(\d*)(\s*\!important)*\s*(?:;|\})/i, (string, property, value, important) => {
return parseInt(value)
})
return {"tag": selector, "value": index}
}
// Update every `load`, `resize`, `input`, and `click`
window.addEventListener('load', tabby.load)
window.addEventListener('resize', tabby.load)
window.addEventListener('input', tabby.load)
window.addEventListener('click', tabby.load)
</script>
```
--
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1748#issuecomment-326013602 using your GitHub account
Received on Wednesday, 30 August 2017 14:45:51 UTC