fix(lint): support graphics-symbol and graphics-symbol role

crates/biome_html_analyze/src/lint/a11y/no_svg_without_title.rs

@@ -53,6 +53,10 @@ declare_lint_rule! {
     /// </svg>
     /// ```
     ///
+    /// ```html,expect_diagnostic
+    /// <svg role="graphics-symbol"><rect /></svg>
+    /// ```
+    ///
     /// ### Valid
     ///
     /// ```html
@@ -81,7 +85,10 @@ declare_lint_rule! {
     /// ```
     ///
     /// ```html
-    /// <svg role="graphics-symbol"><rect /></svg>
+    /// <svg role="graphics-symbol">
+    ///     <title>Pass</title>
+    ///     <rect />
+    /// </svg>
     /// ```
     ///
     /// ```html
@@ -159,7 +166,7 @@ impl Rule for NoSvgWithoutTitle {
         };
 
         match role_attribute_text.to_ascii_lowercase_cow().as_ref() {
-            "img" => {
+            "img" | "graphics-document" | "graphics-symbol" => {
                 let aria_label = node.find_attribute_by_name("aria-label");
                 let aria_labelledby = node.find_attribute_by_name("aria-labelledby");
                 let is_valid_a11y_attribute = aria_label.is_some()

crates/biome_html_analyze/tests/specs/a11y/noSvgWithoutTitle/invalid.html

@@ -22,3 +22,6 @@
 <svg role="">
 	<span>implicit role</span>
 </svg>
+<svg role="graphics-symbol">
+	<rect />
+</svg>

crates/biome_html_analyze/tests/specs/a11y/noSvgWithoutTitle/invalid.html.snap

@@ -28,6 +28,9 @@ expression: invalid.html
 <svg role="">
 	<span>implicit role</span>
 </svg>
+<svg role="graphics-symbol">
+	<rect />
+</svg>
 
 ```
 
@@ -143,7 +146,27 @@ invalid.html:22:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━
   > 23 │ 	<span>implicit role</span>
   > 24 │ </svg>
        │ ^^^^^^
-    25 │ 
+    25 │ <svg role="graphics-symbol">
+    26 │ 	<rect />
+  
+  i For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
+  
+
+```
+
+```
+invalid.html:25:1 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Alternative text title element cannot be empty
+  
+    23 │ 	<span>implicit role</span>
+    24 │ </svg>
+  > 25 │ <svg role="graphics-symbol">
+       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  > 26 │ 	<rect />
+  > 27 │ </svg>
+       │ ^^^^^^
+    28 │ 
   
   i For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
   

crates/biome_html_analyze/tests/specs/a11y/noSvgWithoutTitle/valid.html

@@ -15,6 +15,10 @@
 <svg role="img" aria-labelledby="title">
 	<title id="title">Pass</title>
 </svg>
+<svg role="graphics-symbol">
+	<title>Pass</title>
+	<rect />
+</svg>
 <svg role="img" aria-labelledby="title">
 	<span id="title">Pass</span>
 </svg>

crates/biome_html_analyze/tests/specs/a11y/noSvgWithoutTitle/valid.html.snap

@@ -21,6 +21,10 @@ expression: valid.html
 <svg role="img" aria-labelledby="title">
 	<title id="title">Pass</title>
 </svg>
+<svg role="graphics-symbol">
+	<title>Pass</title>
+	<rect />
+</svg>
 <svg role="img" aria-labelledby="title">
 	<span id="title">Pass</span>
 </svg>

crates/biome_js_analyze/src/lint/a11y/no_svg_without_title.rs

@@ -45,6 +45,10 @@ declare_lint_rule! {
     /// </svg>
     /// ```
     ///
+    /// ```jsx,expect_diagnostic
+    /// <svg role="graphics-symbol"><rect /></svg>
+    /// ```
+    ///
     /// ### Valid
     ///
     ///
@@ -66,8 +70,12 @@ declare_lint_rule! {
     ///     <span id="title">Pass</span>
     /// </svg>
     /// ```
+    ///
     /// ```jsx
-    /// <svg role="graphics-symbol"><rect /></svg>
+    /// <svg role="graphics-symbol">
+    ///     <title>Pass</title>
+    ///     <rect />
+    /// </svg>
     /// ```
     ///
     /// ```jsx
@@ -151,7 +159,7 @@ impl Rule for NoSvgWithoutTitle {
         };
 
         match role_attribute_text.to_ascii_lowercase_cow().as_ref() {
-            "img" => {
+            "img" | "graphics-document" | "graphics-symbol" => {
                 let [aria_label, aria_labelledby] = node
                     .attributes()
                     .find_by_names(["aria-label", "aria-labelledby"]);

crates/biome_js_analyze/tests/specs/a11y/noSvgWithoutTitle/invalid.jsx

@@ -22,4 +22,7 @@
 	<svg role="">
 		<span>implicit role</span>
 	</svg>
+	<svg role="graphics-symbol">
+		<rect />
+	</svg>
 </>;

crates/biome_js_analyze/tests/specs/a11y/noSvgWithoutTitle/invalid.jsx.snap

@@ -28,6 +28,9 @@ expression: invalid.jsx
 	<svg role="">
 		<span>implicit role</span>
 	</svg>
+	<svg role="graphics-symbol">
+		<rect />
+	</svg>
 </>;
 
 ```
@@ -133,3 +136,20 @@ invalid.jsx:22:2 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━
   
 
 ```
+
+```
+invalid.jsx:25:2 lint/a11y/noSvgWithoutTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Alternative text title element cannot be empty
+  
+    23 │ 		<span>implicit role</span>
+    24 │ 	</svg>
+  > 25 │ 	<svg role="graphics-symbol">
+       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    26 │ 		<rect />
+    27 │ 	</svg>
+  
+  i For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
+  
+
+```

crates/biome_js_analyze/tests/specs/a11y/noSvgWithoutTitle/valid.jsx

@@ -17,6 +17,10 @@
 	<svg role="img" aria-labelledby="title">
 		<title id="title">Pass</title>
 	</svg>
+	<svg role="graphics-symbol">
+		<title>Pass</title>
+		<rect />
+	</svg>
 	<svg role="img" aria-labelledby="title">
 		<span id="title">Pass</span>
 	</svg>

crates/biome_js_analyze/tests/specs/a11y/noSvgWithoutTitle/valid.jsx.snap

@@ -23,6 +23,10 @@ expression: valid.jsx
 	<svg role="img" aria-labelledby="title">
 		<title id="title">Pass</title>
 	</svg>
+	<svg role="graphics-symbol">
+		<title>Pass</title>
+		<rect />
+	</svg>
 	<svg role="img" aria-labelledby="title">
 		<span id="title">Pass</span>
 	</svg>