feat: #button: pass props along to the button markup

Author: tujoworker

packages/dnb-ui-lib/src/components/button/Button.js

@@ -133,42 +133,51 @@ export default class Button extends PureComponent {
       class: class_name,
       className,
       type,
+      variant,
+      size,
       title,
       id,
       disabled,
       text,
       icon,
       icon_position,
       href,
+      attributes, // eslint-disable-line
+      innerRef, // eslint-disable-line
       ...props
     } = this.props
 
-    let { variant, size } = props
+    let usedVariant = variant
+    let usedSize = size
+
+    // let {  size } = props
 
     // if only has Icon, then resize it and define it as secondary
     const isIconOnly = Boolean(!text && icon)
     if (isIconOnly) {
-      if (!variant) {
-        variant = 'secondary'
+      if (!usedVariant) {
+        usedVariant = 'secondary'
       }
-      if (!size) {
-        size = 'medium'
+      if (!usedSize) {
+        usedSize = 'medium'
       }
     } else if (text) {
-      if (!variant) {
-        variant = 'primary'
+      if (!usedVariant) {
+        usedVariant = 'primary'
       }
-      if (!size) {
-        size = 'default'
+      if (!usedSize) {
+        usedSize = 'default'
       }
     }
 
     const content = Button.getContent(this.props)
 
     const classes = classnames(
       'dnb-button',
-      `dnb-button--${variant}`,
-      size && size !== 'default' ? `dnb-button--size-${size}` : null,
+      `dnb-button--${usedVariant}`,
+      usedSize && usedSize !== 'default'
+        ? `dnb-button--size-${usedSize}`
+        : null,
       icon && icon_position
         ? `dnb-button--icon-position-${icon_position}`
         : null,
@@ -185,10 +194,12 @@ export default class Button extends PureComponent {
       className: classes,
       type,
       title: title || text,
+      ['aria-label']: title || text,
       id,
       disabled,
-      onMouseOut: this.onMouseOutHandler,
-      onClick: this.onClickHandler
+      onMouseOut: this.onMouseOutHandler, // for resetting the button to the default state
+      onClick: this.onClickHandler,
+      ...props
     }
 
     // also used for code markup simulation

packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -22,6 +22,7 @@ exports[`Button component have to match default button snapshot 1`] = `
   variant="primary"
 >
   <button
+    aria-label="This is a button title"
     className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className"
     disabled="disabled"
     id="id"
@@ -122,6 +123,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
   variant="primary"
 >
   <a
+    aria-label="This is a button title"
     className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className dnb-no-anchor-underline dnb-no-anchor-hover"
     disabled="disabled"
     href="https://url"

packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -90,6 +90,7 @@ exports[`Modal component have to match snapshot 1`] = `
         variant="secondary"
       >
         <button
+          aria-label="Open Modal"
           className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon"
           onClick={[Function]}
           onMouseOut={[Function]}
@@ -328,6 +329,7 @@ exports[`Modal component have to match snapshot 1`] = `
                 variant="secondary"
               >
                 <button
+                  aria-label="Close"
                   className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-modal__close-button"
                   onClick={[Function]}
                   onMouseOut={[Function]}