💅 False positive error for `noInteractiveElementToNoninteractiveRole` and custom element

[edoardocavazza]

Environment information

CLI:
  Version:                      1.7.3
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v18.19.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "yarn/4.1.0"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 true

Linter:
  Recommended:                  true
  All:                          false
  Rules:                        a11y/noRedundantAlt = "warn"
                                a11y/useButtonType = "warn"
                                complexity/noForEach = "off"
                                complexity/useArrowFunction = "warn"
                                complexity/useFlatMap = "warn"
                                complexity/useLiteralKeys = "off"
                                complexity/useOptionalChain = "warn"
                                correctness/useJsxKeyInIterable = "off"
                                performance/noAccumulatingSpread = "warn"
                                performance/noDelete = "warn"
                                style/noInferrableTypes = "warn"
                                style/noNamespace = "off"
                                style/noParameterAssign = "warn"
                                style/noUselessElse = "warn"
                                style/useConst = "warn"
                                style/useImportType = "warn"
                                style/useSelfClosingElements = "warn"
                                style/useSingleCaseStatement = "off"
                                style/useSingleVarDeclarator = "warn"
                                style/useTemplate = "warn"
                                suspicious/noAssignInExpressions = "warn"
                                suspicious/noClassAssign = "off"
                                suspicious/noConfusingLabels = "warn"
                                suspicious/noConsoleLog = "warn"
                                suspicious/noExplicitAny = "warn"

Workspace:
  Open Documents:               0

Rule name

noInteractiveElementToNoninteractiveRole

Playground link

https://biomejs.dev/playground/?code=ZgB1AG4AYwB0AGkAbwBuACAAcgBlAG4AZABlAHIAQwB1AHMAdABvAG0ARQBsAGUAbQBlAG4AdABXAGkAdABoAFIAbwBsAGUAKAApACAAewAKACAAIAByAGUAdAB1AHIAbgAgADwAeAAtAGUAbABlAG0AZQBuAHQACgAgACAAIAAgACAAcgBvAGwAZQA9ACIAZwByAG8AdQBwACIAIAAgACAAIAAgACAACgAgACAAIAAvAD4ACgB9AA%3D%3D

Expected result

Autonomous custom elements should be treated as non-interactive elements.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

Autonomous custom elements should be treated as non-interactive elements.

Do you have some link that we can use as a source of truth?

[edoardocavazza]

I admit that the statement may have been a bit strong, but I believe it to be fundamentally accurate.
Autonomous custom elements, as described here Using custom elements, directly extend the HTMLElement class, and thus, they do not possess any inherent interactivity.
On the other hand, customized built-in elements extend classes of interactive elements like <button>, <a>, etc., which is a different case.

[ematipico]

The reason I'm asking is because this needs to be documented, in case this is a valid bug. So a W3C link that explains this is beneficial for us developers and end users

[Sec-ant]

From the W3C spec, autonoumous custom elements can have any role or none, so I think it's reasonable to ignore custom elements in this rule.

[scriptcoded]

This should probably also apply to noStaticElementInteractions: https://biomejs.dev/playground/?tab=formatter&pane=Diagnostics&code=ZgB1AG4AYwB0AGkAbwBuACAAcgBlAG4AZABlAHIAQwB1AHMAdABvAG0ARQBsAGUAbQBlAG4AdABXAGkAdABoAFIAbwBsAGUAKAApACAAewAKACAAIAByAGUAdAB1AHIAbgAgADwAeAAtAGUAbABlAG0AZQBuAHQACgAgACAAIAAgACAAbwBuAEMAbABpAGMAawA9ACIAIgAgACAAIAAgAAoAIAAgACAALwA%2BAAoAfQA%3D

[Th3S4mur41]

See also an example we are using, where the custom element, is not a web component, so no JS nor role. We just use the custom element for better visibility compared to a class...
https://biomejs.dev/playground/?tab=formatter&pane=Console&code=PABsAGEAYgBlAGwAPgAKACAAIAA8AHMAcABhAG4APgBJAG4AcAB1AHQAIAAxADwALwBzAHAAYQBuAD4ACgAgACAAPABpAG4AcAB1AHQAIAB0AHkAcABlAD0AIgB0AGUAeAB0ACIAIABhAHIAaQBhAC0AZQByAHIAbwByAG0AZQBzAHMAYQBnAGUAPQAiAGkAbgBwAHUAdAAtADEALQBlAHIAcgBvAHIAIgAgAHIAZQBxAHUAaQByAGUAZAAgAC8APgAKACAAIAA8AHMAcABhAG4AIABjAGwAYQBzAHMAPQAiAGUAcgByAG8AcgAiACAAcgBvAGwAZQA9ACIAYQBsAGUAcgB0ACIAIAAgAGkAZAA9ACIAaQBuAHAAdQB0AC0AMQAtAGUAcgByAG8AcgAiAD4ASQBuAHAAdQB0ACAAMQAgAGkAcwAgAHIAZQBxAHUAaQByAGUAZAA8AC8AcwBwAGEAbgA%2BAAoAPAAvAGwAYQBiAGUAbAA%2BAAoACgA8AGwAYQBiAGUAbAA%2BAAoAIAAgADwAcwBwAGEAbgA%2BAEkAbgBwAHUAdAA8AC8AcwBwAGEAbgA%2BAAoAIAAgADwAaQBuAHAAdQB0ACAAdAB5AHAAZQA9ACIAdABlAHgAdAAiACAAYQByAGkAYQAtAGUAcgByAG8AcgBtAGUAcwBzAGEAZwBlAD0AIgBpAG4AcAB1AHQALQAyAC0AZQByAHIAbwByACIAIAByAGUAcQB1AGkAcgBlAGQAIAAvAD4ACgAgACAAPABsAGwALQBlAHIAcgBvAHIAIAByAG8AbABlAD0AIgBhAGwAZQByAHQAIgAgAGkAZAA9ACIAaQBuAHAAdQB0AC0AMgAtAGUAcgByAG8AcgAiAD4ASQBuAHAAdQB0ACAAMgAgAGkAcwAgAHIAZQBxAHUAaQByAGUAZAA8AC8AbABsAC0AZQByAHIAbwByAD4ACgA8AC8AbABhAGIAZQBsAD4A&language=html