feat: automatically add aria-hidden="true" to the container element…

… of the Icon to improve accessibility by hiding decorative SVG elements
lin-stephanie · Dec 18, 2024 · a7953c5 · a7953c5
1 parent 5259bfa
commit a7953c5
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 38 deletions.
diff --git a/src/utils.ts b/src/utils.ts
@@ -210,7 +210,11 @@ export function getIndicator(
     fragment: true,
   })
 
-  return h(iconTagName, { className: 'callout-icon' }, indicatorElement)
+  return h(
+    iconTagName,
+    { className: 'callout-icon', ariaHidden: 'true' },
+    indicatorElement
+  )
 }
 
 /**
@@ -229,5 +233,9 @@ export function getFoldIcon(iconTagName: string): Element {
     fragment: true,
   })
 
-  return h(iconTagName, { className: 'callout-fold' }, foldIconElement)
+  return h(
+    iconTagName,
+    { className: 'callout-fold', ariaHidden: 'true' },
+    foldIconElement
+  )
 }
diff --git a/test/fixtures/collapsibleCallouts/output.html b/test/fixtures/collapsibleCallouts/output.html
@@ -5,7 +5,7 @@
 >
   <summary class="callout-title">
     <div class="callout-title-inner">Note</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -33,7 +33,7 @@
 >
   <summary class="callout-title">
     <div class="callout-title-inner">Tip</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -61,7 +61,7 @@
 >
   <summary class="callout-title">
     <div class="callout-title-inner">Double space after title</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -89,7 +89,7 @@
 >
   <summary class="callout-title">
     <div class="callout-title-inner">Warning</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"

diff --git a/test/fixtures/customCallouts/output.html b/test/fixtures/customCallouts/output.html
@@ -4,7 +4,7 @@
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -34,7 +34,7 @@
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -92,7 +92,7 @@
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -122,7 +122,7 @@
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"

diff --git a/test/fixtures/customTheme/output.html b/test/fixtures/customTheme/output.html
@@ -4,7 +4,7 @@
   style="--callout-color-light: rgb(142, 150, 170); --callout-color-dark: rgb(101, 117, 133);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -31,7 +31,7 @@
   style="--callout-color-light: rgb(100, 108, 255); --callout-color-dark: rgb(100, 108, 255);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1em"
@@ -61,7 +61,7 @@
   style="--callout-color-light: rgb(159, 122, 234); --callout-color-dark: rgb(159, 122, 234);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -91,7 +91,7 @@
   style="--callout-color-light: rgb(234, 179, 8); --callout-color-dark: rgb(234, 179, 8);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1em"

diff --git a/test/fixtures/fromHtml/output.html b/test/fixtures/fromHtml/output.html
@@ -31,7 +31,7 @@
 >
   <summary class="callout-title">
     <div class="callout-title-inner">This is a collapsible warning callout</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"

diff --git a/test/fixtures/htmlTagName/output.html b/test/fixtures/htmlTagName/output.html
@@ -4,7 +4,7 @@
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
   <h6 class="callout-title">
-    <span class="callout-icon">
+    <span class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -33,7 +33,7 @@ <h6 class="callout-title">
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
   <summary class="callout-title">
-    <span class="callout-icon">
+    <span class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -51,7 +51,7 @@ <h6 class="callout-title">
       </svg>
     </span>
     <div class="callout-title-inner">This is a <strong>collapsible</strong> callout</div>
-    <span class="callout-fold">
+    <span class="callout-fold" aria-hidden="true">
       <svg
           xmlns="http://www.w3.org/2000/svg"
           width="1em"

diff --git a/test/fixtures/modifyCallouts/output.html b/test/fixtures/modifyCallouts/output.html
@@ -4,7 +4,7 @@
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -33,7 +33,7 @@
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -63,7 +63,7 @@
   style="--callout-color-light: #e36ba7; --callout-color-dark: #f86bb7;"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"

diff --git a/test/fixtures/nestedCallouts/output.html b/test/fixtures/nestedCallouts/output.html
@@ -52,7 +52,7 @@
 >
   <summary class="callout-title">
     <div class="callout-title-inner">This is a nested note callout</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -77,7 +77,7 @@
     >
       <summary class="callout-title">
         <div class="callout-title-inner">Tip</div>
-        <div class="callout-fold">
+        <div class="callout-fold" aria-hidden="true">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="1em"

diff --git a/test/fixtures/openOrClose/output.html b/test/fixtures/openOrClose/output.html
@@ -4,7 +4,7 @@
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
   <summary class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -24,7 +24,7 @@
       </svg>
     </div>
     <div class="callout-title-inner">This is a <strong>collapsible</strong> callout, initially close.</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -52,7 +52,7 @@
   open
 >
   <summary class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -72,7 +72,7 @@
       </svg>
     </div>
     <div class="callout-title-inner">This is a <strong>collapsible</strong> callout, initially open.</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"

diff --git a/test/fixtures/readmeExample/output.html b/test/fixtures/readmeExample/output.html
@@ -4,7 +4,7 @@
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -33,7 +33,7 @@
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
   <summary class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -53,7 +53,7 @@
       </svg>
     </div>
     <div class="callout-title-inner">This is a <strong>collapsible</strong> callout</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"

diff --git a/test/fixtures/showIndicator/output.html b/test/fixtures/showIndicator/output.html
@@ -4,7 +4,7 @@
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -33,7 +33,7 @@
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -63,7 +63,7 @@
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -93,7 +93,7 @@
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
   <div class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -127,7 +127,7 @@
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
   <summary class="callout-title">
-    <div class="callout-icon">
+    <div class="callout-icon" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -144,7 +144,7 @@
       </svg>
     </div>
     <div class="callout-title-inner">This is a nested note callout</div>
-    <div class="callout-fold">
+    <div class="callout-fold" aria-hidden="true">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -168,7 +168,7 @@
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >
       <summary class="callout-title">
-        <div class="callout-icon">
+        <div class="callout-icon" aria-hidden="true">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="1em"
@@ -186,7 +186,7 @@
           </svg>
         </div>
         <div class="callout-title-inner">Tip</div>
-        <div class="callout-fold">
+        <div class="callout-fold" aria-hidden="true">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="1em"