Lack of interest Accessibility Enhancements: Style properties for focus-states

[willl]

While XenForo does a nice job on focus states, providing dedicated controls for them beyond search & basic inputs would be ideal. In some customization cases additional CSS must be added to ensure focus states for links and buttons are visible (such as monochromatic designs), and most users aren't aware of the importance of focus states. Providing a direct control for them via style properties would assist in that regard, allowing control of colors and borders (as well as an extra css/less box). Ideally, this would include separation for focus states on nav items, buttons and links.

 

[Merri]

Likely the wrong place to reply, but here's some code for anyone interested on having better focus indicators for keyboard use. This code is a patch rather than a "proper" fix. What you get are default focus indicators on all elements.

Open normalize.css

Locate this string:

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}

Remove that particular piece of code. It ruins button focus indicators on Firefox. Or actually let's be easy for you, the resulting line looks like this!

button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

Then you can add the following to the end of the same file:

:root {
    --focus-indicator: 3px solid CanvasText;
}

:where(:focus-visible, .inputTypes-input:focus-visible + .inputTypes-display, .iconic:has(:focus-visible)) {
    border-radius: 4px;
    opacity: 1 !important;
    outline: var(--focus-indicator);
    outline-offset: 3px;
    position: relative;
    z-index: 1;
}

:where(
    :is(.hScroller, .menu-linkRow, .node-extra-row, .pairs):focus-visible,
    :is(.hScroller, .menu-linkRow, .node-extra-row, .pairs) :focus-visible,
    .inputTypes-input:focus-visible + .inputTypes-display
) {
    outline-offset: -3px;
}

:where(a:has(> picture, > img, > svg)) {
    display: inline-block;
}

The code uses :where() that does it with zero specificity, or in other words, it very likely does not mess up with any of the existing styling by having the least priority. Any other CSS easily overrides it.

You can customize --focus-indicator with other colors, such as Highlight instead of CanvasText



The first set of styles is :where(:focus-visible), but other selectors are also included to "relocate" focus indicator to another element as the actual element with focus has been visually hidden.



As for the actual styles here is a comment why each exists:

:where(:focus-visible) {
    /* rounded rectangle looks nice */
    border-radius: 4px;
    /* override any other style to guarantee full opacity so that the element stands out when it has focus */
    opacity: 1 !important;
    /* set the style */
    outline: var(--focus-indicator);
    /* add some spacing as that looks nicer than having it tightly around the element edge */
    outline-offset: 3px;
    /* make it possible to control the z-index */
    position: relative;
    /* try to bring the element above other elements so that the outline is drawn on top */
    z-index: 1;
}

The next set of styles target elements where the focus indicator needs to be shown inside the element, because the element is located on a container that clips painting outside.



This way we can fully see the focus indicator even in those cases.

:where(
    :is(.hScroller, .menu-linkRow, .node-extra-row, .pairs):focus-visible,
    :is(.hScroller, .menu-linkRow, .node-extra-row, .pairs) :focus-visible,
    .inputTypes-input:focus-visible + .inputTypes-display
) {
    outline-offset: -3px;
}

The final piece of code fixes focus indicator to go around images.

:where(a:has(> picture, > img, > svg)) {
    display: inline-block;
}

Note that there are places elsewhere in Xenforo's styles that ruin the outline style either by having a style to remove the outline, or by having a custom case specific focus indicator style.