fix(ld-tooltip): lighthouse issue buttons do not have an accessible name

emdgroup-liquid · Sep 1, 2021 · a8fb585 · a8fb585
1 parent 6827df6
commit a8fb585
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/src/liquid/components/ld-tooltip/ld-tooltip.tsx b/src/liquid/components/ld-tooltip/ld-tooltip.tsx
@@ -229,6 +229,7 @@ export class LdTooltip {
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
+              <title>Info</title>
               <path
                 fill-rule="evenodd"
                 clip-rule="evenodd"

diff --git a/src/liquid/components/ld-tooltip/test/__snapshots__/ld-tooltip.spec.ts.snap b/src/liquid/components/ld-tooltip/test/__snapshots__/ld-tooltip.spec.ts.snap
@@ -9,6 +9,9 @@ exports[`ld-tooltip renders custom trigger 1`] = `
     </div>
     <slot-fb hidden="" name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -31,6 +34,9 @@ exports[`ld-tooltip renders default 1`] = `
   <button aria-describedby="ld-tooltip-1" class="ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -53,6 +59,9 @@ exports[`ld-tooltip renders with arrow 1`] = `
   <button aria-describedby="ld-tooltip-3" class="ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -75,6 +84,9 @@ exports[`ld-tooltip renders with position bottom center 1`] = `
   <button aria-describedby="ld-tooltip-4" class="ld-tether-element-attached-center ld-tether-element-attached-top ld-tether-enabled ld-tether-target ld-tether-target-attached-bottom ld-tether-target-attached-center ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -92,6 +104,9 @@ exports[`ld-tooltip renders with position bottom left 1`] = `
   <button aria-describedby="ld-tooltip-5" class="ld-tether-element-attached-left ld-tether-element-attached-top ld-tether-enabled ld-tether-target ld-tether-target-attached-bottom ld-tether-target-attached-left ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -109,6 +124,9 @@ exports[`ld-tooltip renders with position bottom right 1`] = `
   <button aria-describedby="ld-tooltip-6" class="ld-tether-element-attached-right ld-tether-element-attached-top ld-tether-enabled ld-tether-target ld-tether-target-attached-bottom ld-tether-target-attached-right ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -126,6 +144,9 @@ exports[`ld-tooltip renders with position left bottom 1`] = `
   <button aria-describedby="ld-tooltip-7" class="ld-tether-element-attached-bottom ld-tether-element-attached-right ld-tether-enabled ld-tether-target ld-tether-target-attached-bottom ld-tether-target-attached-left ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -143,6 +164,9 @@ exports[`ld-tooltip renders with position left middle 1`] = `
   <button aria-describedby="ld-tooltip-8" class="ld-tether-element-attached-middle ld-tether-element-attached-right ld-tether-enabled ld-tether-target ld-tether-target-attached-left ld-tether-target-attached-middle ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -160,6 +184,9 @@ exports[`ld-tooltip renders with position left top 1`] = `
   <button aria-describedby="ld-tooltip-9" class="ld-tether-element-attached-right ld-tether-element-attached-top ld-tether-enabled ld-tether-target ld-tether-target-attached-left ld-tether-target-attached-top ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -177,6 +204,9 @@ exports[`ld-tooltip renders with position right bottom 1`] = `
   <button aria-describedby="ld-tooltip-10" class="ld-tether-element-attached-bottom ld-tether-element-attached-left ld-tether-enabled ld-tether-target ld-tether-target-attached-bottom ld-tether-target-attached-right ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -194,6 +224,9 @@ exports[`ld-tooltip renders with position right middle 1`] = `
   <button aria-describedby="ld-tooltip-11" class="ld-tether-element-attached-left ld-tether-element-attached-middle ld-tether-enabled ld-tether-target ld-tether-target-attached-middle ld-tether-target-attached-right ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -211,6 +244,9 @@ exports[`ld-tooltip renders with position right top 1`] = `
   <button aria-describedby="ld-tooltip-12" class="ld-tether-element-attached-left ld-tether-element-attached-top ld-tether-enabled ld-tether-target ld-tether-target-attached-right ld-tether-target-attached-top ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -228,6 +264,9 @@ exports[`ld-tooltip renders with position top center 1`] = `
   <button aria-describedby="ld-tooltip-13" class="ld-tether-element-attached-bottom ld-tether-element-attached-center ld-tether-enabled ld-tether-target ld-tether-target-attached-center ld-tether-target-attached-top ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -245,6 +284,9 @@ exports[`ld-tooltip renders with position top left 1`] = `
   <button aria-describedby="ld-tooltip-14" class="ld-tether-element-attached-bottom ld-tether-element-attached-left ld-tether-enabled ld-tether-target ld-tether-target-attached-left ld-tether-target-attached-top ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>
@@ -262,6 +304,9 @@ exports[`ld-tooltip renders with position top right 1`] = `
   <button aria-describedby="ld-tooltip-15" class="ld-tether-element-attached-bottom ld-tether-element-attached-right ld-tether-enabled ld-tether-target ld-tether-target-attached-right ld-tether-target-attached-top ld-tooltip__trigger" type="button">
     <slot-fb name="trigger">
       <svg class="ld-tooltip__icon" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <title>
+          Info
+        </title>
         <path clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.9249 18.0751 1 12 1C5.9249 1 1 5.9249 1 12C1 18.0751 5.9249 23 12 23Z" fill="currentcolor" fill-rule="evenodd"></path>
         <path clip-rule="evenodd" d="M11.9996 8.6477C12.9254 8.6477 13.6758 7.8973 13.6758 6.9715C13.6758 6.0458 12.9254 5.2953 11.9996 5.2953C11.0739 5.2953 10.3235 6.0458 10.3235 6.9715C10.3235 7.8973 11.0739 8.6477 11.9996 8.6477ZM10.8453 17.8038C11.1932 18.1517 11.6736 18.3256 12.2865 18.3256H13.4545C13.6864 18.3256 13.8023 18.2263 13.8023 18.0275V12.2873C13.8023 11.6744 13.6284 11.1939 13.2805 10.8461C12.9326 10.4982 12.4522 10.3242 11.8393 10.3242H10.6713C10.4394 10.3242 10.3235 10.4236 10.3235 10.6224V16.3626C10.3235 16.9755 10.4974 17.456 10.8453 17.8038Z" fill="white" fill-rule="evenodd"></path>
       </svg>