fix(Tooltip): prevent overriding the aria-label attribute (#1635)

razorpay · Oct 12, 2023 · b8a52e0 · b8a52e0
1 parent f38f7c0
commit b8a52e0
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 22 deletions.
diff --git a/packages/blade/src/components/Tooltip/Tooltip.web.tsx b/packages/blade/src/components/Tooltip/Tooltip.web.tsx
@@ -97,8 +97,8 @@ const Tooltip = ({
       {/* Cloning the trigger children to enhance it with ref and event handler */}
       {React.cloneElement(children, {
         ref: refs.setReference,
-        ...mergeProps(children.props, getReferenceProps()),
         ...makeAccessible({ label: content }),
+        ...mergeProps(children.props, getReferenceProps()),
       })}
       {isMounted && (
         <FloatingPortal>

diff --git a/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx b/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx
@@ -53,7 +53,7 @@ describe('<Tooltip />', () => {
 
   it('should render tooltip with custom zIndex', () => {
     const buttonText = 'Hover me';
-    const { container, getByRole, queryByRole } = renderWithTheme(
+    const { baseElement, getByRole, queryByRole } = renderWithTheme(
       <Tooltip content="Hello world" zIndex={9999}>
         <Button>{buttonText}</Button>
       </Tooltip>,
@@ -63,7 +63,7 @@ describe('<Tooltip />', () => {
     fireEvent.focus(getByRole('button', { name: buttonText }));
     expect(queryByRole('tooltip')).toBeInTheDocument();
     expect(queryByRole('tooltip')).toHaveStyle({ 'z-index': 9999 });
-    expect(container).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('should open on hovering over', async () => {
@@ -311,4 +311,17 @@ describe('<Tooltip />', () => {
     });
     expect(queryByRole('tooltip')).toHaveAttribute('data-blade-component', MetaConstants.Tooltip);
   });
+
+  // https://github.com/razorpay/blade/issues/1386
+  it("should not override trigger's aria-label attribute", () => {
+    const tooltipContent = 'Hello world';
+    const { container, getByLabelText } = renderWithTheme(
+      <Tooltip content={tooltipContent}>
+        <input aria-label="Email Address" type="email" placeholder="Enter email" />
+      </Tooltip>,
+    );
+
+    expect(getByLabelText('Email Address')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap
@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Tooltip /> should not override trigger's aria-label attribute 1`] = `
+<div>
+  <input
+    aria-label="Email Address"
+    placeholder="Enter email"
+    type="email"
+  />
+</div>
+`;
+
 exports[`<Tooltip /> should render 1`] = `
 .c1 {
   display: -webkit-box;
@@ -275,6 +285,33 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
   justify-content: center;
 }
 
+.c4 {
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.c5 {
+  position: relative;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-right: 12px;
+  padding-left: 12px;
+  max-width: 200px;
+}
+
+.c6 {
+  background-color: hsla(216,33%,29%,1);
+  border-width: 1px;
+  border-radius: 4px;
+  border-color: hsla(216,27%,36%,1);
+  border-style: solid;
+  box-shadow: 0 4px 8px -2px hsla(217,56%,17%,0.1),0 2px 4px -2px hsla(217,56%,17%,0.06);
+  opacity: 0;
+  -webkit-transform: translateY(4px);
+  -ms-transform: translateY(4px);
+  transform: translateY(4px);
+}
+
 .c3 {
   color: hsla(0,0%,100%,1);
   font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
@@ -289,6 +326,19 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
   padding: 0;
 }
 
+.c7 {
+  color: hsla(0,0%,100%,1);
+  font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
 .c0 {
   min-height: 36px;
   width: auto;
@@ -356,46 +406,114 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
 }
 
 @media screen and (min-width:320px) {
-
+  .c4 {
+    pointer-events: none;
+  }
 }
 
 @media screen and (min-width:480px) {
-
+  .c4 {
+    pointer-events: none;
+  }
 }
 
 @media screen and (min-width:768px) {
-
+  .c4 {
+    pointer-events: none;
+  }
 }
 
 @media screen and (min-width:1024px) {
-
+  .c4 {
+    pointer-events: none;
+  }
 }
 
 @media screen and (min-width:1200px) {
-
+  .c4 {
+    pointer-events: none;
+  }
 }
 
-<div>
-  <button
-    aria-describedby=":r8:"
-    class="c0"
-    data-blade-component="button"
-    role="button"
-    type="button"
+<body>
+  <div>
+    <button
+      aria-describedby=":r8:"
+      class="c0"
+      data-blade-component="button"
+      role="button"
+      type="button"
+    >
+      <div
+        class="c1 c2"
+        data-blade-component="base-box"
+      >
+        <div
+          class="c3"
+          data-blade-component="base-text"
+        >
+          Hover me
+        </div>
+      </div>
+    </button>
+  </div>
+  <div
+    data-floating-ui-portal=""
+    id=":ra:"
   >
     <div
-      class="c1 c2"
-      data-blade-component="base-box"
+      class="c4"
+      data-blade-component="tooltip"
+      id=":r8:"
+      pointer-events="none"
+      role="tooltip"
+      style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"
+      tabindex="-1"
     >
       <div
-        class="c3"
-        data-blade-component="base-text"
+        class="c5 c6"
+        data-blade-component="base-box"
       >
-        Hover me
+        <p
+          class="c7"
+          data-blade-component="text"
+        >
+          Hello world
+        </p>
+        <svg
+          aria-hidden="true"
+          fill="hsla(216, 33%, 29%, 1)"
+          height="14"
+          style="position: absolute; pointer-events: none; top: 100%;"
+          viewBox="0 0 14 14"
+          width="16"
+        >
+          <path
+            clip-path="url(#:rb:)"
+            d="M0,0 H14 L7,7 Q7,7 7,7 Z"
+            fill="none"
+            stroke="hsla(216, 27%, 36%, 1)"
+            stroke-width="3"
+          />
+          <path
+            d="M0,0 H14 L7,7 Q7,7 7,7 Z"
+            stroke="hsla(216, 33%, 29%, 1)"
+          />
+          <clippath
+            id=":rb:"
+          >
+            <rect
+              height="14"
+              width="16"
+              x="-1"
+              y="1"
+            />
+          </clippath>
+        </svg>
       </div>
     </div>
-  </button>
-</div>
+  </div>
+</body>
 `;
 
 exports[`<Tooltip /> should render with title 1`] = `