diff --git a/packages/blade/src/components/Tooltip/Tooltip.web.tsx b/packages/blade/src/components/Tooltip/Tooltip.web.tsx index 55572a62ed4..34e443f91c8 100644 --- 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 && ( diff --git a/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx b/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx index 50d98cc0ea2..d8d247bdc18 100644 --- 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('', () => { it('should render tooltip with custom zIndex', () => { const buttonText = 'Hover me'; - const { container, getByRole, queryByRole } = renderWithTheme( + const { baseElement, getByRole, queryByRole } = renderWithTheme( , @@ -63,7 +63,7 @@ describe('', () => { 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('', () => { }); 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( + + + , + ); + + 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 index 32e96348a51..86ce973d898 100644 --- 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[` should not override trigger's aria-label attribute 1`] = ` +
+ +
+`; + exports[` should render 1`] = ` .c1 { display: -webkit-box; @@ -275,6 +285,33 @@ exports[` 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[` 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[` 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; + } } -
- +
+
- -
+ + `; exports[` should render with title 1`] = `