Repository: biomejs/biome (language: rust)

Issue:
💅 `useSemanticElements` recommends replacing `<div role="img">` with `<img>`
<details>
<summary>

### Environment information

</summary>

```bash
CLI:
  Version:                      1.9.1
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v20.11.1"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "pnpm/9.6.0"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 true

Linter:
  JavaScript enabled:           true
  JSON enabled:                 true
  CSS enabled:                  true
  GraphQL enabled:              false
  Recommended:                  true
  All:                          false
  Enabled rules:
  performance/noDelete
  suspicious/noCatchAssign
  suspicious/noUnsafeNegation
  complexity/useLiteralKeys
  style/useImportType
  complexity/noMultipleSpacesInRegularExpressionLiterals
  a11y/useValidLang
  complexity/noUselessEmptyExport
  suspicious/useNamespaceKeyword
  suspicious/useValidTypeof
  a11y/useValidAriaRole
  correctness/noConstantCondition
  a11y/useAriaActivedescendantWithTabindex
  suspicious/noAssignInExpressions
  style/useDefaultParameterLast
  complexity/noEmptyTypeParameters
  correctness/noConstructorReturn
  style/useSelfClosingElements
  suspicious/noDuplicateParameters
  suspicious/noDuplicateSelectorsKeyframeBlock
  correctness/noUnknownProperty
  style/useTemplate
  correctness/noUnusedLabels
  complexity/noUselessTernary
  correctness/noUnreachableSuper
  suspicious/noCompareNegZero
  suspicious/noExplicitAny
  correctness/noSwitchDeclarations
  a11y/noAutofocus
  correctness/noUnsafeOptionalChaining
  correctness/noConstAssign
  suspicious/noControlCharactersInRegex
  complexity/noUselessTypeConstraint
  style/noVar
  suspicious/noDoubleEquals
  suspicious/noRedundantUseStrict
  style/useLiteralEnumMembers
  suspicious/noGlobalIsNan
  suspicious/noEmptyInterface
  suspicious/noConstEnum
  suspicious/noMisleadingCharacterClass
  correctness/noPrecisionLoss
  a11y/noLabelWithoutControl
  suspicious/noRedeclare
  correctness/noStringCaseMismatch
  correctness/noSetterReturn
  correctness/noInvalidConstructorSuper
  suspicious/noImplicitAnyLet
  suspicious/noFallthroughSwitchClause
  suspicious/noUnsafeDeclarationMerging
  correctness/noUnreachable
  a11y/useKeyWithClickEvents
  suspicious/noDuplicateObjectKeys
  complexity/noUselessThisAlias
  complexity/noThisInStatic
  complexity/useOptionalChain
  correctness/noInnerDeclarations
  style/noParameterAssign
  suspicious/noDuplicateCase
  a11y/useValidAnchor
  complexity/useRegexLiterals
  correctness/noSelfAssign
  correctness/noInvalidBuiltinInstantiation
  style/noUselessElse
  style/useShorthandFunctionType
  suspicious/noShadowRestrictedNames
  correctness/noInvalidDirectionInLinearGradient
  suspicious/noImportantInKeyframe
  a11y/useMediaCaption
  complexity/noUselessLabel
  complexity/noUselessCatch
  correctness/noUnsafeFinally
  a11y/useAriaPropsForRole
  correctness/noNonoctalDecimalEscape
  style/useEnumInitializers
  a11y/useHtmlLang
  suspicious/noDuplicateTestHooks
  complexity/noStaticOnlyClass
  style/useWhile
  complexity/useArrowFunction
  style/noInferrableTypes
  a11y/noNoninteractiveTabindex
  complexity/useSimpleNumberKeys
  correctness/useYield
  a11y/noInteractiveElementToNoninteractiveRole
  style/useNumericLiterals
  correctness/noUnnecessaryContinue
  suspicious/noApproximativeNumericConstant
  suspicious/noImportAssign
  suspicious/noLabelVar
  correctness/noGlobalObjectCalls
  suspicious/useDefaultSwitchClauseLast
  a11y/useAltText
  correctness/noEmptyCharacterClassInRegex
  correctness/noUnknownUnit
  suspicious/noSparseArray
  a11y/useIframeTitle
  complexity/noBannedTypes
  a11y/noSvgWithoutTitle
  correctness/noVoidElementsWithChildren
  style/useAsConstAssertion
  correctness/useJsxKeyInIterable
  style/useExportType
  complexity/noUselessLoneBlockStatements
  suspicious/noDebugger
  a11y/useValidAriaValues
  style/noArguments
  suspicious/noCommentText
  a11y/useFocusableInteractive
  correctness/noUnmatchableAnbSelector
  suspicious/noGlobalAssign
  suspicious/noDuplicateJsxProps
  suspicious/noMisleadingInstantiator
  a11y/noPositiveTabindex
  correctness/noEmptyPattern
  complexity/noExcessiveNestedTestSuites
  security/noDangerouslySetInnerHtmlWithChildren
  a11y/useKeyWithMouseEvents
  suspicious/noExtraNonNullAssertion
  suspicious/noPrototypeBuiltins
  correctness/noRenderReturnValue
  correctness/useExhaustiveDependencies
  security/noGlobalEval
  style/noNonNullAssertion
  a11y/noRedundantRoles
  complexity/useFlatMap
  correctness/useIsNan
  style/useConst
  suspicious/noGlobalIsFinite
  suspicious/noSelfCompare
  suspicious/noShorthandPropertyOverrides
  suspicious/noAsyncPromiseExecutor
  suspicious/noDuplicateFontNames
  suspicious/noThenProperty
  suspicious/useGetterReturn
  security/noDangerouslySetInnerHtml
  style/useNodejsImportProtocol
  a11y/noDistractingElements
  suspicious/noArrayIndexKey
  complexity/noWith
  suspicious/noDuplicateClassMembers
  complexity/noExtraBooleanCast
  performance/noAccumulatingSpread
  a11y/useValidAriaProps
  a11y/noRedundantAlt
  correctness/noChildrenProp
  correctness/noUnknownFunction
  correctness/noInvalidPositionAtImportRule
  suspicious/noConfusingLabels
  suspicious/noSuspiciousSemicolonInJsx
  suspicious/noConfusingVoidType
  suspicious/noFocusedTests
  a11y/useButtonType
  a11y/useSemanticElements
  a11y/noAriaUnsupportedElements
  correctness/noInvalidGridAreas
  correctness/noFlatMapIdentity
  a11y/noBlankTarget
  a11y/useHeadingContent
  correctness/useValidForDirection
  correctness/noVoidTypeReturn
  correctness/noInvalidUseBeforeDeclaration
  a11y/noAriaHiddenOnFocusable
  a11y/useGenericFontNames
  correctness/noUnknownMediaFeatureName
  a11y/useAnchorContent
  complexity/noUselessRename
  style/useNumberNamespace
  complexity/noUselessConstructor
  a11y/noAccessKey
  style/useExponentiationOperator
  style/noUnusedTemplateLiteral
  complexity/noUselessSwitchCase
  style/useSingleVarDeclarator
  suspicious/noExportsInTest
  a11y/noNoninteractiveElementToInteractiveRole
  style/noCommaOperator
  suspicious/noDuplicateAtImportRules
  suspicious/useIsArray
  a11y/noHeaderScope
  complexity/noUselessFragments
  suspicious/noMisrefactoredShorthandAssign
  complexity/noForEach
  suspicious/noClassAssign
  suspicious/noEmptyBlock
  suspicious/noFunctionAssign

Workspace:
  Open Documents:               0
```

</details>


### Rule name

`lint/a11y/useSemanticElements`

### Playground link

[reproduction](https://biomejs.dev/playground/?code=ZQB4AHAAbwByAHQAIABmAHUAbgBjAHQAaQBvAG4AIABNAHkASQBtAGEAZwBlACgAKQAgAHsACgAgACAAcgBlAHQAdQByAG4AIAAoAAoAIAAgACAAIAA8AGQAaQB2ACAAcgBvAGwAZQA9ACIAaQBtAGcAIgAgAGEAcgBlAGEALQBsAGEAYgBlAGwAPQAiAGYAbwByACAAcwBjAHIAZQBlAG4AIAByAGUAYQBkAGUAcgBzACIAPgAKACAAIAAgACAAIAAgADwAaQBtAGcAIABzAHIAYwA9ACIAZwByAGEAcABoAGkAYwAxAC4AcABuAGcAIgAgAGEAbAB0AD0AIgBmAG8AcgAgAHMAaQBnAGgAdABlAGQAIAByAGUAYQBkAGUAcgBzACIAIAAvAD4ACgAgACAAIAAgACAAIAA8AGkAbQBnACAAcwByAGMAPQAiAGcAcgBhAHAAaABpAGMAMgAuAHAAbgBnACIAIABhAGwAdAA9ACIAdwBoAGUAbgAgAGkAbQBhAGcAZQBzACAAZABvAG4AJwB0ACAAbABvAGEAZAAiACAALwA%2BAAoAIAAgACAAIAA8AC8AZABpAHYAPgAKACAAIAApAAoAfQA%3D)

### Expected result

The rule should not report `<div role="img">` as a problem when the `<div>` has child elements, as `<img>` is a void element and cannot have child elements. 

See also:
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role

### Code of Conduct

- [X] I agree to follow Biome's Code of Conduct


Discussion / hints:
I Wonder if we should not completely ignore `img` role like the `presentation` role. We recently fixed a closely related issue: #3828
Also had issues regarding the rule suggesting to use `<dialog>` in favour of `<div role="dialog">`. The `<dialog>` is placed in the top-layer, while you sometimes want some different behaviour using the z-index

Fix patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c5c600807ec..0ada9b949977 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,21 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
   Contributed by @Conaclos
 
+- [useSemanticElements](https://biomejs.dev/linter/rules/use-semantic-elements/) now ignores elements with the `img` role ([#3994](https://github.com/biomejs/biome/issues/3994)).
+
+  [MDN recommends](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role) using `role="img"` for grouping images or creating an image from other elements.
+  The following code is no longer reported:
+
+  ```jsx
+  <div role="img" aria-label="That cat is so cute">
+    <p>&#x1F408; &#x1F602;</p>
+  </div>
+  ```
+
+  Contributed by @Conaclos
+
+- [useSemanticElements](https://biomejs.dev/linter/rules/use-semantic-elements/) now ignores `alert` and `alertdialog` roles ([#3858](https://github.com/biomejs/biome/issues/3858)). Contributed by @Conaclos
+
 ### Parser
 
 ## v1.9.2 (2024-09-19)
@@ -143,8 +158,6 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 #### Bug fixes
 
-- [useSemanticElements](https://biomejs.dev/linter/rules/use-semantic-elements/) now ignores `alert` and `alertdialog` roles ([3858](https://github.com/biomejs/biome/issues/3858)). Contributed by @Conaclos
-
 - [noUndeclaredDependencies](https://biomejs.dev/linter/rules/no-undeclared-dependencies/) now ignores `@/` imports and recognizes type imports from Definitely Typed and `bun` imports. Contributed by @Conaclos
 
 ## v1.9.0 (2024-09-12)
diff --git a/crates/biome_aria/src/roles.rs b/crates/biome_aria/src/roles.rs
index 7350f963dda1..a88435f20a9c 100644
--- a/crates/biome_aria/src/roles.rs
+++ b/crates/biome_aria/src/roles.rs
@@ -1170,23 +1170,6 @@ impl<'a> AriaRoles {
             return false;
         }
 
-        // Allow SVG elements with role="img" attribute
-        // This is recommended for accessibility purposes
-        // Example:
-        // ```
-        // <svg role="img" aria-label="Description of your SVG image"></svg>;
-        // ```
-        // For more information, see:
-        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role#svg_and_roleimg
-        if element_name == "svg"
-            && attributes
-                .as_ref()
-                .and_then(|a| a.get("role"))
-                .map_or(false, |values| values.iter().any(|x| x == "img"))
-        {
-            return false;
-        }
-
         // SVG elements, by default, do not have interactive semantics.
         // They are primarily used for graphics and visual rendering. While they can be made interactive with additional
         // attributes and JavaScript, inherently they don't provide user interaction capabilities.
diff --git a/crates/biome_js_analyze/src/lint/a11y/use_semantic_elements.rs b/crates/biome_js_analyze/src/lint/a11y/use_semantic_elements.rs
index e4e66abebdbc..048041011834 100644
--- a/crates/biome_js_analyze/src/lint/a11y/use_semantic_elements.rs
+++ b/crates/biome_js_analyze/src/lint/a11y/use_semantic_elements.rs
@@ -51,26 +51,19 @@ impl Rule for UseSemanticElements {
 
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let node = ctx.query();
-
-        let role_attribute = node.find_attribute_by_name("role").ok().flatten();
-
-        if let Some(attr) = role_attribute {
-            // check is not interactive element
-            let element = node.name().ok()?.as_jsx_name()?.value_token().ok()?;
-            let element_name = element.text_trimmed();
-
-            let aria_roles = ctx.aria_roles();
-            let extract_attributes = ctx.extract_attributes(&node.attributes());
-            let extract_attributes = ctx.convert_all_attribute_values(extract_attributes);
-            let is_not_interactive =
-                aria_roles.is_not_interactive_element(element_name, extract_attributes);
-
-            if is_not_interactive {
-                return Some(attr);
-            }
+        let role = node.find_attribute_by_name("role").ok().flatten()?;
+        let role_value = role.as_static_value()?;
+        let role_value = role_value.as_string_constant()?;
+
+        // Allow `role="img"` on any element. For more information, see:
+        // <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role>
+        if role_value == "img" {
+            return None;
         }
 
-        None
+        let aria_roles = ctx.aria_roles();
+        let mut elements = aria_roles.get_elements_by_role(role_value)?;
+        elements.next().map(|_| role)
     }
 
     fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {


Test patch:
diff --git a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx
index 1782aa9dc908..3472c2ac396f 100644
--- a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx
+++ b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx
@@ -18,7 +18,6 @@
     <div role="grid" ></div>
     <div role="gridcell" ></div>
     <div role="group" ></div>
-    <div role="img" ></div>
     <div role="link" ></div>
     <div role="list" ></div>
     <div role="listbox" ></div>
diff --git a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx.snap
index dacd58fd35a9..f5b8d2d44dab 100644
--- a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx.snap
+++ b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/invalid.jsx.snap
@@ -24,7 +24,6 @@ expression: invalid.jsx
     <div role="grid" ></div>
     <div role="gridcell" ></div>
     <div role="group" ></div>
-    <div role="img" ></div>
     <div role="link" ></div>
     <div role="list" ></div>
     <div role="listbox" ></div>
@@ -400,7 +399,7 @@ invalid.jsx:19:10 lint/a11y/useSemanticElements ━━━━━━━━━━
   > 19 │     <div role="gridcell" ></div>
        │          ^^^^^^^^^^^^^^^
     20 │     <div role="group" ></div>
-    21 │     <div role="img" ></div>
+    21 │     <div role="link" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -418,8 +417,8 @@ invalid.jsx:20:10 lint/a11y/useSemanticElements ━━━━━━━━━━
     19 │     <div role="gridcell" ></div>
   > 20 │     <div role="group" ></div>
        │          ^^^^^^^^^^^^
-    21 │     <div role="img" ></div>
-    22 │     <div role="link" ></div>
+    21 │     <div role="link" ></div>
+    22 │     <div role="list" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -429,36 +428,17 @@ invalid.jsx:20:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 invalid.jsx:21:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-  ! The elements with the following roles can be changed to the following elements:
-    <img>
-  
-  
-    19 │     <div role="gridcell" ></div>
-    20 │     <div role="group" ></div>
-  > 21 │     <div role="img" ></div>
-       │          ^^^^^^^^^^
-    22 │     <div role="link" ></div>
-    23 │     <div role="list" ></div>
-  
-  i For examples and more information, see WAI-ARIA Roles
-  
-
-```
-
-```
-invalid.jsx:22:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
   ! The elements with the following roles can be changed to the following elements:
     <a>
     <link>
   
   
+    19 │     <div role="gridcell" ></div>
     20 │     <div role="group" ></div>
-    21 │     <div role="img" ></div>
-  > 22 │     <div role="link" ></div>
+  > 21 │     <div role="link" ></div>
        │          ^^^^^^^^^^^
-    23 │     <div role="list" ></div>
-    24 │     <div role="listbox" ></div>
+    22 │     <div role="list" ></div>
+    23 │     <div role="listbox" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -466,19 +446,19 @@ invalid.jsx:22:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:23:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:22:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <ol>
     <ul>
   
   
-    21 │     <div role="img" ></div>
-    22 │     <div role="link" ></div>
-  > 23 │     <div role="list" ></div>
+    20 │     <div role="group" ></div>
+    21 │     <div role="link" ></div>
+  > 22 │     <div role="list" ></div>
        │          ^^^^^^^^^^^
-    24 │     <div role="listbox" ></div>
-    25 │     <div role="listitem" ></div>
+    23 │     <div role="listbox" ></div>
+    24 │     <div role="listitem" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -486,18 +466,18 @@ invalid.jsx:23:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:24:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:23:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <select>
   
   
-    22 │     <div role="link" ></div>
-    23 │     <div role="list" ></div>
-  > 24 │     <div role="listbox" ></div>
+    21 │     <div role="link" ></div>
+    22 │     <div role="list" ></div>
+  > 23 │     <div role="listbox" ></div>
        │          ^^^^^^^^^^^^^^
-    25 │     <div role="listitem" ></div>
-    26 │     <div role="navigation" ></div>
+    24 │     <div role="listitem" ></div>
+    25 │     <div role="navigation" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -505,18 +485,18 @@ invalid.jsx:24:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:25:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:24:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <li>
   
   
-    23 │     <div role="list" ></div>
-    24 │     <div role="listbox" ></div>
-  > 25 │     <div role="listitem" ></div>
+    22 │     <div role="list" ></div>
+    23 │     <div role="listbox" ></div>
+  > 24 │     <div role="listitem" ></div>
        │          ^^^^^^^^^^^^^^^
-    26 │     <div role="navigation" ></div>
-    27 │     <div role="row" ></div>
+    25 │     <div role="navigation" ></div>
+    26 │     <div role="row" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -524,18 +504,18 @@ invalid.jsx:25:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:26:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:25:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <nav>
   
   
-    24 │     <div role="listbox" ></div>
-    25 │     <div role="listitem" ></div>
-  > 26 │     <div role="navigation" ></div>
+    23 │     <div role="listbox" ></div>
+    24 │     <div role="listitem" ></div>
+  > 25 │     <div role="navigation" ></div>
        │          ^^^^^^^^^^^^^^^^^
-    27 │     <div role="row" ></div>
-    28 │     <div role="rowgroup" ></div>
+    26 │     <div role="row" ></div>
+    27 │     <div role="rowgroup" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -543,18 +523,18 @@ invalid.jsx:26:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:27:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:26:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <tr>
   
   
-    25 │     <div role="listitem" ></div>
-    26 │     <div role="navigation" ></div>
-  > 27 │     <div role="row" ></div>
+    24 │     <div role="listitem" ></div>
+    25 │     <div role="navigation" ></div>
+  > 26 │     <div role="row" ></div>
        │          ^^^^^^^^^^
-    28 │     <div role="rowgroup" ></div>
-    29 │     <div role="rowheader" ></div>
+    27 │     <div role="rowgroup" ></div>
+    28 │     <div role="rowheader" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -562,7 +542,7 @@ invalid.jsx:27:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:28:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:27:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <tbody>
@@ -570,12 +550,12 @@ invalid.jsx:28:10 lint/a11y/useSemanticElements ━━━━━━━━━━
     <thead>
   
   
-    26 │     <div role="navigation" ></div>
-    27 │     <div role="row" ></div>
-  > 28 │     <div role="rowgroup" ></div>
+    25 │     <div role="navigation" ></div>
+    26 │     <div role="row" ></div>
+  > 27 │     <div role="rowgroup" ></div>
        │          ^^^^^^^^^^^^^^^
-    29 │     <div role="rowheader" ></div>
-    30 │     <div role="search" ></div>
+    28 │     <div role="rowheader" ></div>
+    29 │     <div role="search" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -583,18 +563,18 @@ invalid.jsx:28:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:29:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:28:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <th scope="row">
   
   
-    27 │     <div role="row" ></div>
-    28 │     <div role="rowgroup" ></div>
-  > 29 │     <div role="rowheader" ></div>
+    26 │     <div role="row" ></div>
+    27 │     <div role="rowgroup" ></div>
+  > 28 │     <div role="rowheader" ></div>
        │          ^^^^^^^^^^^^^^^^
-    30 │     <div role="search" ></div>
-    31 │     <div role="searchbox" ></div>
+    29 │     <div role="search" ></div>
+    30 │     <div role="searchbox" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -602,18 +582,18 @@ invalid.jsx:29:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:30:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:29:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <input type="search">
   
   
-    28 │     <div role="rowgroup" ></div>
-    29 │     <div role="rowheader" ></div>
-  > 30 │     <div role="search" ></div>
+    27 │     <div role="rowgroup" ></div>
+    28 │     <div role="rowheader" ></div>
+  > 29 │     <div role="search" ></div>
        │          ^^^^^^^^^^^^^
-    31 │     <div role="searchbox" ></div>
-    32 │     <div role="table" ></div>
+    30 │     <div role="searchbox" ></div>
+    31 │     <div role="table" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -621,18 +601,18 @@ invalid.jsx:30:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:31:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:30:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <input type="search">
   
   
-    29 │     <div role="rowheader" ></div>
-    30 │     <div role="search" ></div>
-  > 31 │     <div role="searchbox" ></div>
+    28 │     <div role="rowheader" ></div>
+    29 │     <div role="search" ></div>
+  > 30 │     <div role="searchbox" ></div>
        │          ^^^^^^^^^^^^^^^^
-    32 │     <div role="table" ></div>
-    33 │     <div role="term" ></div>
+    31 │     <div role="table" ></div>
+    32 │     <div role="term" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -640,18 +620,18 @@ invalid.jsx:31:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:32:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:31:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <table>
   
   
-    30 │     <div role="search" ></div>
-    31 │     <div role="searchbox" ></div>
-  > 32 │     <div role="table" ></div>
+    29 │     <div role="search" ></div>
+    30 │     <div role="searchbox" ></div>
+  > 31 │     <div role="table" ></div>
        │          ^^^^^^^^^^^^
-    33 │     <div role="term" ></div>
-    34 │     <div role="textbox" ></div>
+    32 │     <div role="term" ></div>
+    33 │     <div role="textbox" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -659,18 +639,18 @@ invalid.jsx:32:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:33:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:32:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <dt>
   
   
-    31 │     <div role="searchbox" ></div>
-    32 │     <div role="table" ></div>
-  > 33 │     <div role="term" ></div>
+    30 │     <div role="searchbox" ></div>
+    31 │     <div role="table" ></div>
+  > 32 │     <div role="term" ></div>
        │          ^^^^^^^^^^^
-    34 │     <div role="textbox" ></div>
-    35 │     <div role="generic" ></div>
+    33 │     <div role="textbox" ></div>
+    34 │     <div role="generic" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -678,19 +658,19 @@ invalid.jsx:33:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:34:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:33:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <textarea>
     <input type="search">
   
   
-    32 │     <div role="table" ></div>
-    33 │     <div role="term" ></div>
-  > 34 │     <div role="textbox" ></div>
+    31 │     <div role="table" ></div>
+    32 │     <div role="term" ></div>
+  > 33 │     <div role="textbox" ></div>
        │          ^^^^^^^^^^^^^^
-    35 │     <div role="generic" ></div>
-    36 │     <div role="caption" ></div>
+    34 │     <div role="generic" ></div>
+    35 │     <div role="caption" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -698,19 +678,19 @@ invalid.jsx:34:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:35:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:34:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <div>
     <span>
   
   
-    33 │     <div role="term" ></div>
-    34 │     <div role="textbox" ></div>
-  > 35 │     <div role="generic" ></div>
+    32 │     <div role="term" ></div>
+    33 │     <div role="textbox" ></div>
+  > 34 │     <div role="generic" ></div>
        │          ^^^^^^^^^^^^^^
-    36 │     <div role="caption" ></div>
-    37 │     <div role="main" ></div>
+    35 │     <div role="caption" ></div>
+    36 │     <div role="main" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -718,7 +698,7 @@ invalid.jsx:35:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:36:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:35:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <caption>
@@ -726,12 +706,12 @@ invalid.jsx:36:10 lint/a11y/useSemanticElements ━━━━━━━━━━
     <legend>
   
   
-    34 │     <div role="textbox" ></div>
-    35 │     <div role="generic" ></div>
-  > 36 │     <div role="caption" ></div>
+    33 │     <div role="textbox" ></div>
+    34 │     <div role="generic" ></div>
+  > 35 │     <div role="caption" ></div>
        │          ^^^^^^^^^^^^^^
-    37 │     <div role="main" ></div>
-    38 │     <div role="time" ></div>
+    36 │     <div role="main" ></div>
+    37 │     <div role="time" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -739,18 +719,18 @@ invalid.jsx:36:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:37:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:36:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <main>
   
   
-    35 │     <div role="generic" ></div>
-    36 │     <div role="caption" ></div>
-  > 37 │     <div role="main" ></div>
+    34 │     <div role="generic" ></div>
+    35 │     <div role="caption" ></div>
+  > 36 │     <div role="main" ></div>
        │          ^^^^^^^^^^^
-    38 │     <div role="time" ></div>
-    39 │     <div role="p" ></div>
+    37 │     <div role="time" ></div>
+    38 │     <div role="p" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -758,18 +738,18 @@ invalid.jsx:37:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:38:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:37:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <time>
   
   
-    36 │     <div role="caption" ></div>
-    37 │     <div role="main" ></div>
-  > 38 │     <div role="time" ></div>
+    35 │     <div role="caption" ></div>
+    36 │     <div role="main" ></div>
+  > 37 │     <div role="time" ></div>
        │          ^^^^^^^^^^^
-    39 │     <div role="p" ></div>
-    40 │     <div role="aside" ></div>
+    38 │     <div role="p" ></div>
+    39 │     <div role="aside" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -777,18 +757,18 @@ invalid.jsx:38:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:39:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:38:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <p>
   
   
-    37 │     <div role="main" ></div>
-    38 │     <div role="time" ></div>
-  > 39 │     <div role="p" ></div>
+    36 │     <div role="main" ></div>
+    37 │     <div role="time" ></div>
+  > 38 │     <div role="p" ></div>
        │          ^^^^^^^^
-    40 │     <div role="aside" ></div>
-    41 │     <div role="blockquote" ></div>
+    39 │     <div role="aside" ></div>
+    40 │     <div role="blockquote" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -796,18 +776,18 @@ invalid.jsx:39:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:40:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:39:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <aside>
   
   
-    38 │     <div role="time" ></div>
-    39 │     <div role="p" ></div>
-  > 40 │     <div role="aside" ></div>
+    37 │     <div role="time" ></div>
+    38 │     <div role="p" ></div>
+  > 39 │     <div role="aside" ></div>
        │          ^^^^^^^^^^^^
-    41 │     <div role="blockquote" ></div>
-    42 │     <div role="associationlist" ></div>
+    40 │     <div role="blockquote" ></div>
+    41 │     <div role="associationlist" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -815,18 +795,18 @@ invalid.jsx:40:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:41:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:40:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <blockquote>
   
   
-    39 │     <div role="p" ></div>
-    40 │     <div role="aside" ></div>
-  > 41 │     <div role="blockquote" ></div>
+    38 │     <div role="p" ></div>
+    39 │     <div role="aside" ></div>
+  > 40 │     <div role="blockquote" ></div>
        │          ^^^^^^^^^^^^^^^^^
-    42 │     <div role="associationlist" ></div>
-    43 │     <div role="status" ></div>
+    41 │     <div role="associationlist" ></div>
+    42 │     <div role="status" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -834,18 +814,18 @@ invalid.jsx:41:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:42:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:41:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <dl>
   
   
-    40 │     <div role="aside" ></div>
-    41 │     <div role="blockquote" ></div>
-  > 42 │     <div role="associationlist" ></div>
+    39 │     <div role="aside" ></div>
+    40 │     <div role="blockquote" ></div>
+  > 41 │     <div role="associationlist" ></div>
        │          ^^^^^^^^^^^^^^^^^^^^^^
-    43 │     <div role="status" ></div>
-    44 │     <div role="contentinfo" ></div>
+    42 │     <div role="status" ></div>
+    43 │     <div role="contentinfo" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -853,18 +833,18 @@ invalid.jsx:42:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:43:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:42:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <output>
   
   
-    41 │     <div role="blockquote" ></div>
-    42 │     <div role="associationlist" ></div>
-  > 43 │     <div role="status" ></div>
+    40 │     <div role="blockquote" ></div>
+    41 │     <div role="associationlist" ></div>
+  > 42 │     <div role="status" ></div>
        │          ^^^^^^^^^^^^^
-    44 │     <div role="contentinfo" ></div>
-    45 │     <div role="region" ></div>
+    43 │     <div role="contentinfo" ></div>
+    44 │     <div role="region" ></div>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -872,18 +852,18 @@ invalid.jsx:43:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:44:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:43:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <footer>
   
   
-    42 │     <div role="associationlist" ></div>
-    43 │     <div role="status" ></div>
-  > 44 │     <div role="contentinfo" ></div>
+    41 │     <div role="associationlist" ></div>
+    42 │     <div role="status" ></div>
+  > 43 │     <div role="contentinfo" ></div>
        │          ^^^^^^^^^^^^^^^^^^
-    45 │     <div role="region" ></div>
-    46 │ </>
+    44 │     <div role="region" ></div>
+    45 │ </>
   
   i For examples and more information, see WAI-ARIA Roles
   
@@ -891,18 +871,18 @@ invalid.jsx:44:10 lint/a11y/useSemanticElements ━━━━━━━━━━
 ```
 
 ```
-invalid.jsx:45:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.jsx:44:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   ! The elements with the following roles can be changed to the following elements:
     <section>
   
   
-    43 │     <div role="status" ></div>
-    44 │     <div role="contentinfo" ></div>
-  > 45 │     <div role="region" ></div>
+    42 │     <div role="status" ></div>
+    43 │     <div role="contentinfo" ></div>
+  > 44 │     <div role="region" ></div>
        │          ^^^^^^^^^^^^^
-    46 │ </>
-    47 │ 
+    45 │ </>
+    46 │ 
   
   i For examples and more information, see WAI-ARIA Roles
   
diff --git a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx
index 90ac4cb9f061..a7d1845e689f 100644
--- a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx
+++ b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx
@@ -13,10 +13,15 @@ export const Component2 = () => (
     </div>
 );
 
-export const C = <svg role="img" aria-label="Description of your SVG image">
-</svg>;
+<>
+    <svg role="img" aria-label="Description of your SVG image"></svg>
+    <div role="img" aria-label="Description of the overall image">
+    <img src="graphic1.png" alt="" />
+    <img src="graphic2.png" />
+    </div>
+</>;
 
 <>
     <div role="alert"></div>
     <div role="alertdialog"></div>
-</>
\ No newline at end of file
+</>;
\ No newline at end of file
diff --git a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx.snap b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx.snap
index 784d8c3ef89d..27650d1704f3 100644
--- a/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx.snap
+++ b/crates/biome_js_analyze/tests/specs/a11y/useSemanticElements/valid.jsx.snap
@@ -19,44 +19,16 @@ export const Component2 = () => (
     </div>
 );
 
-export const C = <svg role="img" aria-label="Description of your SVG image">
-</svg>;
+<>
+    <svg role="img" aria-label="Description of your SVG image"></svg>
+    <div role="img" aria-label="Description of the overall image">
+    <img src="graphic1.png" alt="" />
+    <img src="graphic2.png" />
+    </div>
+</>;
 
 <>
     <div role="alert"></div>
     <div role="alertdialog"></div>
-</>
-```
-
-# Diagnostics
-```
-valid.jsx:20:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ! The element with this role can be changed to a DOM element that already this role.
-  
-    19 │ <>
-  > 20 │     <div role="alert"></div>
-       │          ^^^^^^^^^^^^
-    21 │     <div role="alertdialog"></div>
-    22 │ </>
-  
-  i For examples and more information, see WAI-ARIA Roles
-  
-
-```
-
-```
-valid.jsx:21:10 lint/a11y/useSemanticElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ! The element with this role can be changed to a DOM element that already this role.
-  
-    19 │ <>
-    20 │     <div role="alert"></div>
-  > 21 │     <div role="alertdialog"></div>
-       │          ^^^^^^^^^^^^^^^^^^
-    22 │ </>
-  
-  i For examples and more information, see WAI-ARIA Roles
-  
-
+</>;
 ```