fix(Anchor): ensure id is passed down (#2016)

dnbexperience · May 31, 2023 · 2405779 · 2405779
1 parent e69b43d
commit 2405779
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -361,6 +361,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
       "current": <a
         class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
         href="https://url"
+        id="button"
         rel="rel"
         target="target"
         title="This is a button title"
@@ -407,6 +408,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
       "current": <a
         class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
         href="https://url"
+        id="button"
         rel="rel"
         target="target"
         title="This is a button title"
@@ -488,6 +490,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
           "current": <a
             class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
             href="https://url"
+            id="button"
             rel="rel"
             target="target"
             title="This is a button title"
@@ -541,11 +544,13 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         className="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
         disabled={false}
         href="https://url"
+        id="button"
         innerRef={
           {
             "current": <a
               class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
               href="https://url"
+              id="button"
               rel="rel"
               target="target"
               title="This is a button title"
@@ -599,11 +604,13 @@ exports[`Button component have to match href="..." snapshot 1`] = `
           className="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
           disabled={false}
           href="https://url"
+          id="button"
           innerRef={
             {
               "current": <a
                 class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
                 href="https://url"
+                id="button"
                 rel="rel"
                 target="target"
                 title="This is a button title"
@@ -656,6 +663,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
             className="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
             disabled={false}
             href="https://url"
+            id="button"
             onClick={[Function]}
             rel="rel"
             target="target"
@@ -681,6 +689,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
                   "current": <a
                     class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
                     href="https://url"
+                    id="button"
                     rel="rel"
                     target="target"
                     title="This is a button title"
@@ -727,6 +736,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
                   "current": <a
                     class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
                     href="https://url"
+                    id="button"
                     rel="rel"
                     target="target"
                     title="This is a button title"

diff --git a/packages/dnb-eufemia/src/elements/Anchor.tsx b/packages/dnb-eufemia/src/elements/Anchor.tsx
@@ -72,14 +72,16 @@ export function AnchorInstance(localProps: AnchorAllProps) {
   const internalId = id || 'id' + makeUniqueId()
 
   // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html
-  const showTooltip = allProps.target === '_blank' && !allProps.title
+  const showTooltip =
+    tooltip || (allProps.target === '_blank' && !allProps.title)
 
   const as = (element || 'a') as string
 
   return (
     <>
       <E
         as={as}
+        id={id}
         className={classnames(
           omitClass !== true && 'dnb-anchor',
           className,

diff --git a/packages/dnb-eufemia/src/elements/__tests__/Anchor.test.tsx b/packages/dnb-eufemia/src/elements/__tests__/Anchor.test.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react'
 import { fakeProps, axeComponent } from '../../core/jest/jestSetup'
-import { act, render } from '@testing-library/react'
+import { act, fireEvent, render } from '@testing-library/react'
 import Anchor from '../Anchor'
 
 const props = fakeProps(require.resolve('../Anchor'), {
@@ -26,6 +26,61 @@ describe('Anchor element', () => {
     expect(document.querySelector('[href]')).toBeTruthy()
   })
 
+  it('should forward id', () => {
+    render(
+      <Anchor href="/url" id="unique-id">
+        text
+      </Anchor>
+    )
+    expect(document.querySelector('a').getAttribute('id')).toBe(
+      'unique-id'
+    )
+  })
+
+  it('should have tooltip markup in DOM', () => {
+    render(
+      <Anchor href="/url" id="unique-id" tooltip="Tooltip">
+        text
+      </Anchor>
+    )
+
+    expect(
+      document.querySelector('#unique-id-tooltip.dnb-tooltip__content')
+        .textContent
+    ).toBe('Tooltip')
+  })
+
+  it('should aria-describedby set by tooltip', () => {
+    render(
+      <Anchor href="/url" id="unique-id" tooltip="Tooltip">
+        text
+      </Anchor>
+    )
+
+    const element = document.getElementById('unique-id')
+
+    expect(element.getAttribute('aria-describedby')).toBe(
+      'unique-id-tooltip'
+    )
+  })
+
+  it('should show tooltip on mouseover', () => {
+    render(
+      <Anchor href="/url" id="unique-id" tooltip="Tooltip">
+        text
+      </Anchor>
+    )
+
+    const element = document.getElementById('unique-id')
+    fireEvent.mouseEnter(element)
+
+    expect(
+      document
+        .querySelector('#unique-id-tooltip.dnb-tooltip__content')
+        .parentElement.classList.contains('dnb-tooltip--active')
+    ).toBeTruthy()
+  })
+
   it('has no-icon class when element was given', () => {
     render(
       <Anchor href="/url" target="_blank">