You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This means that even though the HTML elements have no implicit or explicit role, if they have a minimum role provided by the focusgroup attribute, they effectively have a role. This behavior affects static lint analytics.
Example: radiogroup
We can implemenet a radiogroup with the following sample code using focusgroup.
<divfocusgroup="radiogroup block wrap"
aria-label="Favorite color"
class="radio-group"
><spanaria-checked="true"
tabIndex="0"
class="radio-option checked"
focusgroupstart>
Red
</span><spantabIndex="0" class="radio-option">
Green
</span><spanaria-checked="false" tabIndex="0" class="radio-option">
Blue
</span><spanaria-checked="false" tabIndex="0" class="radio-option">
Purple
</span></div>
Here, <div class="radio-group"> is a focusgroup container with a minimum role of radiogroup, and <span class="radio-option"> is a focusgroup child with a minimum role of radio.
Even though the radio role with tabIndex="0" is valid and radio role requires the aria-checked attribute, for now Biome mistakenly detects tabIndex="0" as an invalid declaration and overlooks the fact that the Green radio item is missing the aria-checked attribute.
Therefore, in order to support focusgroup minimum roles, we need to reconsider some lint rules that deal with ARIA roles.
While focusgroup has not yet shipped in Chrome stable and other browsers, investigating the scope of impact and considering ways to address this issue will make it easier to adopt this new feature when it becomes available.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
A new
focusgroupHTML attribute has been proposed and implemented in browsers, and yesterday Chromium announced an Intent to Ship for Chromium v150.This feature makes it easier to implement the Roving tabindex UI pattern for elements such as radio groups, tabs, toolbars, and etc.
Request for developer feedback: focusgroup | Blog | Chrome for Developers
Once developers provide the
focusgroupattribute with a "behavior" token such astoolbar,tablist,radiogroup, and so on to a focusgroup container, the container is given a minimum container role and its children are given a minimum child role.behavior tokens table: https://developer.chrome.com/blog/focusgroup-rfc#behavior_tokens
minimum role: https://w3c.github.io/html-aam/#minimum-role
This means that even though the HTML elements have no implicit or explicit role, if they have a minimum role provided by the
focusgroupattribute, they effectively have a role. This behavior affects static lint analytics.Example: radiogroup
We can implemenet a radiogroup with the following sample code using
focusgroup.Here,
<div class="radio-group">is a focusgroup container with a minimum role ofradiogroup, and<span class="radio-option">is a focusgroup child with a minimum role ofradio.Even though the
radiorole withtabIndex="0"is valid andradiorole requires thearia-checkedattribute, for now Biome mistakenly detectstabIndex="0"as an invalid declaration and overlooks the fact that theGreenradio item is missing thearia-checkedattribute.Therefore, in order to support focusgroup minimum roles, we need to reconsider some lint rules that deal with ARIA roles.
While
focusgrouphas not yet shipped in Chrome stable and other browsers, investigating the scope of impact and considering ways to address this issue will make it easier to adopt this new feature when it becomes available.Beta Was this translation helpful? Give feedback.
All reactions