fix: accessible-tooltips (#344)

* fix: add role to react tooltip and add a aria title * hide tooltip on press escape * add changeset * avoid using aria-label * Fix class to className in Tooltip component
cypress-io · Nov 16, 2023 · 4fcb9f6 · 4fcb9f6 · vercel · Nov 16, 2023
1 parent 2868018
commit 4fcb9f6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/a11y-tooltips.md b/.changeset/a11y-tooltips.md
@@ -0,0 +1,6 @@
+---
+"@cypress-design/react-tooltip": patch
+"@cypress-design/vue-tooltip": patch
+---
+
+fix: accessible-tooltips
diff --git a/components/Tooltip/react/Tooltip.tsx b/components/Tooltip/react/Tooltip.tsx
@@ -186,6 +186,7 @@ export const Tooltip: React.FC<
                   ...(interactive ? { padding: '16px' } : {}),
                 },
               })}
+              role="tooltip"
             >
               <div
                 className={clsx('rounded shadow-tooltip border', [
@@ -225,6 +226,7 @@ export const Tooltip: React.FC<
                     colors.background,
                   )}
                 >
+                  <span className="sr-only">Tooltip: </span>
                   {popper}
                 </div>
               </div>

diff --git a/components/Tooltip/vue/Tooltip.vue b/components/Tooltip/vue/Tooltip.vue
@@ -184,6 +184,7 @@ onMounted(() => {
     @focus="placeTooltip"
     @blur="show = false"
     @mouseout="show = false"
+    @keydown.escape="show = false"
   >
     <!-- @slot element to hover on to open the tooltip -->
     <slot />
@@ -246,6 +247,7 @@ onMounted(() => {
             class="rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20"
             :class="colors.background"
           >
+            <span class="sr-only">Tooltip: </span>
             <!-- @slot content of the tooltip -->
             <slot name="popper" />
           </div>