fix(Badge): enhance semantic / accessibility and inherit skeleton fro…

…m provider (#1967)
dnbexperience · Feb 11, 2023 · d82b18a · d82b18a
1 parent 3739fd9
commit d82b18a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 29 deletions.
diff --git a/packages/dnb-eufemia/src/components/badge/Badge.tsx b/packages/dnb-eufemia/src/components/badge/Badge.tsx
@@ -12,6 +12,7 @@ import { SkeletonShow } from '../skeleton/Skeleton'
 import {
   warn,
   extendPropsWithContext,
+  validateDOMAttributes,
 } from '../../shared/component-helper'
 
 export interface BadgeProps {
@@ -82,31 +83,45 @@ function Badge(localProps: BadgeAndSpacingProps) {
   const context = React.useContext(Context)
 
   // Extract additional props from global context
-  const { children, ...props } = extendPropsWithContext(
+  const allProps = extendPropsWithContext(
     localProps,
     defaultProps,
-    context?.Badge
+    context?.Badge,
+    { skeleton: context?.skeleton }
   )
 
-  const BadgeRoot = ({ children }: { children: React.ReactNode }) => (
-    <span className="dnb-badge__root">{children}</span>
-  )
+  const {
+    label,
+    className,
+    children, // eslint-disable-line
+    skeleton,
+    horizontal,
+    vertical,
+    content: contentProp,
+    variant,
+    ...props
+  } = allProps
 
-  const BadgeElem = (localProps: BadgeAndSpacingProps) => {
-    const {
-      label,
-      className,
-      children,
-      skeleton,
-      horizontal,
-      vertical,
-      content: contentProp,
-      variant,
-      ...props
-    } = localProps
+  validateDOMAttributes(allProps, props)
 
+  if (children) {
+    return (
+      <BadgeRoot>
+        {children}
+        <BadgeElem />
+      </BadgeRoot>
+    )
+  }
+
+  return <BadgeElem />
+
+  function BadgeRoot({ children }: { children: React.ReactNode }) {
+    return <span className="dnb-badge__root">{children}</span>
+  }
+
+  function BadgeElem() {
     const skeletonClasses = createSkeletonClass('shape', skeleton, context)
-    const spacingClasses = createSpacingClasses(props)
+    const spacingClasses = createSpacingClasses(allProps)
     const contentIsNum = typeof contentProp === 'number'
     const variantIsNotification = variant === 'notification'
 
@@ -128,6 +143,7 @@ function Badge(localProps: BadgeAndSpacingProps) {
 
     return (
       <span
+        role="status"
         className={classnames(
           'dnb-badge',
           `dnb-badge--variant-${variant}`,
@@ -144,17 +160,6 @@ function Badge(localProps: BadgeAndSpacingProps) {
       </span>
     )
   }
-
-  if (children) {
-    return (
-      <BadgeRoot>
-        {children}
-        <BadgeElem {...props} />
-      </BadgeRoot>
-    )
-  }
-
-  return <BadgeElem {...props} />
 }
 
 export default Badge
diff --git a/packages/dnb-eufemia/src/components/badge/__tests__/Badge.test.tsx b/packages/dnb-eufemia/src/components/badge/__tests__/Badge.test.tsx
@@ -10,6 +10,7 @@ import {
   axeComponent,
   mount,
 } from '../../../core/jest/jestSetup'
+import { Provider } from '../../../shared'
 
 describe('Badge', () => {
   it('renders without properties', () => {
@@ -108,6 +109,53 @@ describe('Badge', () => {
     expect(global.console.log).not.toBeCalled()
   })
 
+  it('should support spacing props', () => {
+    render(
+      <Badge
+        top="2rem"
+        aria-label="Info about the badge"
+        content="content"
+      />
+    )
+
+    const element = document.querySelector('.dnb-badge')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['role', 'class', 'aria-label'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-badge',
+      'dnb-badge--variant-information',
+      'dnb-space__top--large',
+    ])
+  })
+
+  it('should have role="status"', () => {
+    render(<Badge content="content" />)
+
+    const element = document.querySelector('.dnb-badge')
+
+    expect(element.getAttribute('role')).toBe('status')
+  })
+
+  it('should inherit skeleton prop from provider', () => {
+    render(
+      <Provider skeleton>
+        <Badge content="content" />
+      </Provider>
+    )
+
+    const element = document.querySelector('.dnb-badge')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-badge',
+      'dnb-badge--variant-information',
+      'dnb-skeleton',
+      'dnb-skeleton--shape',
+    ])
+  })
+
   describe('default values', () => {
     it('has variant information as default', () => {
       render(<Badge />)