feat: pass pass thru valid attributes in #icon component

dnbexperience · Jan 25, 2019 · 6eded20 · 6eded20
1 parent 18b16f2
commit 6eded20
Show file tree

Hide file tree

Showing 18 changed files with 109 additions and 94 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md
@@ -59,7 +59,7 @@ Keyboard shortcuts can increase task efficiency.
 
 ##### Progressive enhancement
 
-Forms, navigation and other essential components and actions should work on older browsers and devices. Styling comes second to content and accessibilty.
+Forms, navigation and other essential components and actions should work on older browsers and devices. Styling comes second to content and accessibility.
 
 #### Understandable
 

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js b/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
@@ -146,9 +146,6 @@ class LiveCode extends PureComponent {
             </>
           )}
           <Toolbar>
-            {!hideCode && (
-              <LiveError className="dnb-form-status dnb-form-status--text dnb-form-status--error" />
-            )}
             {hidePreview && (
               <Button
                 className="toggle-button"
@@ -162,6 +159,9 @@ class LiveCode extends PureComponent {
             )}
           </Toolbar>
           {!hideCode && <LiveEditor language="jsx" />}
+          {!hideCode && (
+            <LiveError className="dnb-form-status dnb-form-status--text dnb-form-status--error" />
+          )}
         </LiveProvider>
       </LiveCodeEditor>
     )
@@ -192,6 +192,13 @@ const LiveCodeEditor = styled.div`
       border-color: transparent transparent #222 transparent;
     }
   }
+
+  .dnb-form-status:last-child {
+    max-width: 40rem;
+    height: auto;
+    white-space: normal;
+    line-height: var(--input-height);
+  }
 `
 
 const Toolbar = styled.div`
@@ -208,18 +215,11 @@ const Toolbar = styled.div`
 
   padding: 0 1rem 1rem;
 
-  pointer-events: none;
+  ${'' /* pointer-events: none;
   button,
   .dnb-form-status {
     pointer-events: all;
-  }
-
-  .dnb-form-status {
-    max-width: 40rem;
-    height: auto;
-    white-space: normal;
-    line-height: var(--input-height);
-  }
+  } */}
 `
 
 /** Removes the last token from a code example if it's empty. */

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/ComponentBox.js b/packages/dnb-design-system-portal/src/shared/inlineTags/ComponentBox.js
@@ -11,10 +11,7 @@ import { getComponents } from 'dnb-ui-lib/src/components'
 
 const ComponentBox = ({ children, scope = {}, ...rest }) => {
   return (
-    <CodeBlock
-      scope={{ ...getComponents(), styled, React, ...scope }}
-      {...rest}
-    >
+    <CodeBlock scope={{ ...getComponents(), styled, ...scope }} {...rest}>
       {children}
     </CodeBlock>
   )

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -489,7 +489,7 @@ class ListItem extends PureComponent {
         >
           <span>
             {icon && graphics[icon] && (
-              <Icon icon={graphics[icon]} size="medium" />
+              <Icon icon={graphics[icon]} size="medium" aria_hidden />
             )}
             {children}
           </span>

diff --git a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
@@ -95,9 +95,13 @@ export default class StickyMenuBar extends PureComponent {
                       on_click={this.toggleMenuHandler}
                     >
                       {/* <Logo height={48} /> */}
-                      <Icon icon={PortalLogo} size={48} />
+                      <Icon icon={PortalLogo} size={48} aria_hidden />
                       {slogan}
-                      <IconPrimary icon="chevron_down" size="small" />
+                      <IconPrimary
+                        icon="chevron_down"
+                        size="small"
+                        aria_hidden
+                      />
                     </Button>
 
                     <span>

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -268,7 +268,7 @@ class Content extends PureComponent {
           icon={icon}
           size={icon_size}
           alt={alt}
-          area_hidden={isIconOnly ? false : Boolean(alt)}
+          aria_hidden={isIconOnly ? false : Boolean(alt)}
         />
       )
     }

diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -61,7 +61,7 @@ exports[`Button component have to match default button snapshot 1`] = `
       </span>
       <IconPrimary
         alt="This is a button title"
-        area_hidden={true}
+        aria_hidden={true}
         attributes={null}
         class={null}
         className="dnb-button__icon"
@@ -75,11 +75,10 @@ exports[`Button component have to match default button snapshot 1`] = `
         width={null}
       >
         <span
-          aria-hidden={true}
+          aria-hidden="true"
           aria-label="This is a button title"
           className="dnb-icon dnb-button__icon"
           role="img"
-          title={null}
         >
           <question>
             <svg
@@ -163,7 +162,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
       </span>
       <IconPrimary
         alt="This is a button title"
-        area_hidden={true}
+        aria_hidden={true}
         attributes={null}
         class={null}
         className="dnb-button__icon"
@@ -177,11 +176,10 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         width={null}
       >
         <span
-          aria-hidden={true}
+          aria-hidden="true"
           aria-label="This is a button title"
           className="dnb-icon dnb-button__icon"
           role="img"
-          title={null}
         >
           <question>
             <svg

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -39,7 +39,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
     >
       <IconPrimary
         alt={null}
-        area_hidden={false}
+        aria_hidden={false}
         attributes={null}
         class={null}
         className={null}

diff --git a/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
@@ -21,7 +21,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
   >
     <IconPrimary
       alt={null}
-      area_hidden={false}
+      aria_hidden={false}
       attributes={null}
       class={null}
       className={null}
@@ -37,7 +37,6 @@ exports[`FormStatus component have to match snapshot 1`] = `
         aria-label="exclamation"
         className="dnb-icon"
         role="img"
-        title={null}
       >
         <exclamation>
           <svg

diff --git a/...s/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap b/...s/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap
@@ -3,7 +3,7 @@
 exports[`IconPrimary component have to match snapshot 1`] = `
 <IconPrimary
   alt={null}
-  area_hidden={false}
+  aria_hidden={false}
   attributes={null}
   class={null}
   className={null}
@@ -19,17 +19,11 @@ exports[`IconPrimary component have to match snapshot 1`] = `
     aria-label="question"
     className="dnb-icon dnb-icon--default"
     role="img"
-    title={null}
   >
-    <question
-      height={null}
-      width={null}
-    >
+    <question>
       <svg
         fill="none"
-        height={null}
         viewBox="0 0 16 16"
-        width={null}
       >
         <path
           clipRule="evenodd"

diff --git a/packages/dnb-ui-lib/src/components/icon/Icon.js b/packages/dnb-ui-lib/src/components/icon/Icon.js
@@ -39,7 +39,7 @@ export const propTypes = {
   color: PropTypes.string,
   alt: PropTypes.string,
   title: PropTypes.string,
-  area_hidden: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  aria_hidden: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   class: PropTypes.string,
   // React props
@@ -60,7 +60,7 @@ export const defaultProps = {
   color: null,
   alt: null,
   title: null,
-  area_hidden: false,
+  aria_hidden: false,
   attributes: null,
   class: null,
   // React props
@@ -224,19 +224,24 @@ export default class Icon extends PureComponent {
   }
 
   static prerender(props) {
-    const icon = Icon.getIcon(props)
-
     const {
+      icon,
+      size,
       color,
       modifier,
       alt: _alt,
       title,
       class: _className,
       className,
-      area_hidden
+      aria_hidden,
+      ...attributes
     } = props
 
-    const { sizeAsString, svgParams } = Icon.calcSize(props)
+    const { sizeAsString, svgParams } = Icon.calcSize({
+      icon, // because to have a clean "attributes"
+      size, // because to have a clean "attributes"
+      ...props
+    })
 
     if (color) {
       svgParams.color = color
@@ -254,16 +259,14 @@ export default class Icon extends PureComponent {
     // also used for code markup simulation
     const wrapperParams = validateDOMAttributes(props, {
       role: 'img',
-      // as we use aria-label, we do not provide an alt as well
+      // because we use aria-label, we do not provide an alt as well
       // alt,
       ['aria-label']: alt,
-      title
+      ['aria-hidden']: aria_hidden ? 'true' : null,
+      title,
+      ...attributes
     })
 
-    if (area_hidden) {
-      // wrapperParams['role'] = 'presentation' // almost the same as aria-hidden
-      wrapperParams['aria-hidden'] = area_hidden
-    }
     wrapperParams.className = classnames(
       'dnb-icon',
       modifier ? `dnb-icon--${modifier}` : null,
@@ -274,7 +277,7 @@ export default class Icon extends PureComponent {
 
     return {
       ...props,
-      icon,
+      icon: Icon.getIcon(props),
       alt,
       svgParams,
       wrapperParams

diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Icon component have to match snapshot 1`] = `
 <Icon
   alt="alt"
-  area_hidden={true}
+  aria_hidden={true}
   attributes="attributes"
   class="class"
   className="className"
@@ -16,11 +16,14 @@ exports[`Icon component have to match snapshot 1`] = `
   width="width"
 >
   <span
-    aria-hidden={true}
+    aria-hidden="true"
     aria-label="alt"
+    attributes="attributes"
     className="dnb-icon dnb-icon--modifier class className"
+    height="height"
     role="img"
     title="title"
+    width="width"
   >
     <SvgComponent
       color="color"

diff --git a/packages/dnb-ui-lib/src/components/icon/details.md b/packages/dnb-ui-lib/src/components/icon/details.md
@@ -5,5 +5,5 @@
 | `size`        | _(optional)_ the dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium` or `large` |
 | `color`       | _(optional)_ sets a color property to the `svg` markup. Default is no color, witch means _black_                                                                 |
 | `modifier`    | _(optional)_ modifier class to define e.g. sizes.                                                                                                                |
-| `area_hidden` | _(optional)_ To declare that the icon should not be visible to screen readers.                                                                                   |
+| `aria_hidden` | _(optional)_ To declare that the icon should not be visible to screen readers. Can also be defined as `aria-hidden`.                                             |
 | `attributes`  | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes.                                                                 |
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -11,7 +11,6 @@ exports[`Input component have to match type="search" snapshot 1`] = `
   >
     <input
       aria-describedby="id-description"
-      autoComplete={null}
       className="dnb-input__input input_class"
       id="id"
       name="id"

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -91,7 +91,6 @@ exports[`Modal component have to match snapshot 1`] = `
       >
         <button
           className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon"
-          id={null}
           onClick={[Function]}
           onMouseOut={[Function]}
           title="Open Modal"
@@ -121,7 +120,7 @@ exports[`Modal component have to match snapshot 1`] = `
           >
             <IconPrimary
               alt="Open Modal"
-              area_hidden={false}
+              aria_hidden={false}
               attributes={null}
               class={null}
               className="dnb-button__icon"
@@ -138,17 +137,11 @@ exports[`Modal component have to match snapshot 1`] = `
                 aria-label="Open Modal"
                 className="dnb-icon dnb-icon--default dnb-button__icon"
                 role="img"
-                title={null}
               >
-                <question
-                  height={null}
-                  width={null}
-                >
+                <question>
                   <svg
                     fill="none"
-                    height={null}
                     viewBox="0 0 16 16"
-                    width={null}
                   >
                     <path
                       clipRule="evenodd"
@@ -336,7 +329,6 @@ exports[`Modal component have to match snapshot 1`] = `
               >
                 <button
                   className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-modal__close-button"
-                  id={null}
                   onClick={[Function]}
                   onMouseOut={[Function]}
                   title="Close"
@@ -366,7 +358,7 @@ exports[`Modal component have to match snapshot 1`] = `
                   >
                     <IconPrimary
                       alt="Close"
-                      area_hidden={false}
+                      aria_hidden={false}
                       attributes={null}
                       class={null}
                       className="dnb-button__icon"
@@ -383,17 +375,11 @@ exports[`Modal component have to match snapshot 1`] = `
                         aria-label="Close"
                         className="dnb-icon dnb-icon--default dnb-button__icon"
                         role="img"
-                        title={null}
                       >
-                        <close
-                          height={null}
-                          width={null}
-                        >
+                        <close>
                           <svg
                             fill="none"
-                            height={null}
                             viewBox="0 0 16 16"
-                            width={null}
                           >
                             <path
                               clipRule="evenodd"