Merge pull request #142 from vrk-kpa/develop

Release 0.2.4

.eslintrc

@@ -1,7 +1,7 @@
 {
   "parser": "typescript-eslint-parser",
   "extends": ["plugin:jsx-a11y/recommended"],
-  "plugins": ["jsx-a11y"],
+  "plugins": ["jsx-a11y", "tree-shaking"],
   "rules": {
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/label-has-associated-control": [

.styleguidist/styleguidist.require.axe.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+if (process.env.NODE_ENV !== 'production') {
+  var axe = require('react-axe');
+  axe(React, ReactDOM, 1000);
+}

.styleguidist/styleguidist.require.js

@@ -1,9 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
 import '../src/core/theme/fontFaces.css';
-
-if (process.env.NODE_ENV !== 'production') {
-  var axe = require('react-axe');
-  axe(React, ReactDOM, 1000);
-}

.styleguidist/styleguidist.styles.js

@@ -37,6 +37,16 @@ module.exports = {
     docs: {
       order: '1',
       marginBottom: '24px',
+      '& i.semantics': {
+        '&:before': {
+          position: 'relative',
+          top: '-.75em',
+          display: 'block',
+          content: '"<contains semantic elements>"',
+          fontSize: '.8em',
+          color: 'hsl(23, 82%, 53%)',
+        },
+      },
     },
     tabs: {
       order: '3',

.styleguidist/typography.md

@@ -23,6 +23,7 @@ const Item = ({ flex, Component, ...passProps }) => (
   <div
     style={{
       flex: !!flex ? flex : '1',
+      marginRight: '0.5em',
       cursor: 'inherit'
     }}
   >

jest.setup.js

@@ -1,3 +1,6 @@
+// add some helpful assertions
+require('jest-axe/extend-expect');
+
 // add some helpful assertions
 require('jest-dom/extend-expect');
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Suomi.fi UI component library",
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
@@ -26,6 +26,7 @@
   "homepage": "https://github.com/vrk-kpa/suomifi-ui-components#readme",
   "scripts": {
     "start": "yarn styleguide",
+    "start:withaxe": "cross-env AXE=\"true\" yarn styleguidist server",
     "start:webpack": "webpack --env.development",
     "test": "jest",
     "test:updatesnapshots": "jest --u",
@@ -53,18 +54,23 @@
   "devDependencies": {
     "@types/classnames": "2.2.6",
     "@types/jest": "23.3.9",
+    "@types/jest-axe": "2.2.3",
     "@types/react": "16.8.15",
     "@types/react-dom": "16.0.9",
+    "@types/uuid": "3.4.5",
     "awesome-typescript-loader": "5.2.1",
     "clipboard-copy": "3.0.0",
     "copyfiles": "2.1.0",
+    "cross-env": "5.2.0",
     "css-loader": "2.0.0",
     "eslint": "5.9.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-tree-shaking": "1.7.4",
     "file-loader": "2.0.0",
     "gh-pages": "2.0.1",
     "husky": "1.1.4",
     "jest": "24.8.0",
+    "jest-axe": "3.1.1",
     "jest-dom": "2.1.1",
     "jest-emotion": "10.0.7",
     "lint-staged": "8.0.5",
@@ -76,7 +82,7 @@
     "react-docgen": "2.21.0",
     "react-docgen-typescript": "1.12.2",
     "react-dom": "16.6.3",
-    "react-styleguidist": "9.1.0",
+    "react-styleguidist": "9.1.13",
     "react-testing-library": "6.0.0",
     "rimraf": "2.6.2",
     "size-limit": "1.3.2",
@@ -107,7 +113,8 @@
     "normalize.cssinjs": "1.0.5",
     "polished": "3.4.0",
     "react-svg": "7.2.2",
-    "suomifi-icons": "0.0.7"
+    "suomifi-icons": "0.0.7",
+    "uuid": "3.3.2"
   },
   "peerDependencies": {
     "react": "16.6.3",

src/components/Button/Button.tsx

@@ -1,5 +1,16 @@
-import React, { Component, MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import React, {
+  Component,
+  MouseEvent,
+  KeyboardEvent,
+  ReactNode,
+  Fragment,
+} from 'react';
 import { HtmlButton, HtmlButtonProps } from '../../reset';
+import { VisuallyHidden } from '../Visually-hidden/Visually-hidden';
+import classnames from 'classnames';
+
+const baseClassName = 'fi-button';
+const disabledClassName = `${baseClassName}--disabled`;
 
 export interface MouseNonFocusProps {
   handleClick: (
@@ -39,11 +50,9 @@ export const mouseNonFocus = ({
 
   return { onMouseDown: doClick, onKeyUp: ifKeyboard };
 };
-export interface ButtonProps extends HtmlButtonProps {
+export interface ButtonProps extends AssertiveProps, HtmlButtonProps {
   /** Custom classname to extend or customize */
   className?: string;
-  /** Disable Button usage */
-  disabled?: boolean;
   /** Event handler to execute when clicked
    *  @default void
    */
@@ -63,26 +72,75 @@ export interface ButtonProps extends HtmlButtonProps {
   mouseNoFocus?: boolean;
 }
 
+interface AssertiveProps {
+  /** Disable Button usage */
+  disabled?: boolean;
+  /** aria-live text for why Button is disabled */
+  ariaAssertiveDisabled?: string;
+  /** aria-live text when Button changed from disabled to enabled */
+  ariaAssertiveUnDisabled?: string;
+}
+
+export class Assertive extends Component<AssertiveProps> {
+  state = { unDisabled: false };
+
+  componentDidUpdate(prevProps: AssertiveProps) {
+    const { disabled } = this.props;
+    if (disabled !== prevProps.disabled) {
+      this.setState({ unDisabled: !disabled });
+    }
+  }
+
+  render() {
+    const { ariaAssertiveDisabled, ariaAssertiveUnDisabled } = this.props;
+    const { unDisabled } = this.state;
+    if (!ariaAssertiveDisabled && !ariaAssertiveUnDisabled) return null;
+    const text = !!unDisabled ? ariaAssertiveUnDisabled : ariaAssertiveDisabled;
+    return !!text ? (
+      <VisuallyHidden aria-live="assertive">{text}</VisuallyHidden>
+    ) : null;
+  }
+}
+
 export class Button extends Component<ButtonProps> {
   render() {
     const {
+      className,
       disabled = false,
       mouseNoFocus,
       onClick,
+      ariaAssertiveDisabled,
+      ariaAssertiveUnDisabled,
       ...passProps
     } = this.props;
-    if (!!mouseNoFocus && !!onClick) {
-      const doClick = mouseNonFocus({ handleClick: onClick });
-      return (
+    const ifMouseNoFocus =
+      !!mouseNoFocus && !!onClick
+        ? () => {
+            const doClick = mouseNonFocus({ handleClick: onClick });
+            return {
+              onMouseDown: doClick.onMouseDown,
+              onKeyUp: doClick.onKeyUp,
+            };
+          }
+        : () => ({ onClick });
+    const onClickProps = !!disabled ? {} : ifMouseNoFocus();
+    return (
+      <Fragment>
         <HtmlButton
           {...passProps}
+          {...onClickProps}
           aria-disabled={disabled}
           tabIndex={0}
-          onMouseDown={doClick.onMouseDown}
-          onKeyUp={doClick.onKeyUp}
+          className={classnames(baseClassName, className, {
+            [disabledClassName]: !!disabled,
+          })}
         />
-      );
-    }
-    return <HtmlButton {...this.props} aria-disabled={disabled} tabIndex={0} />;
+        <Assertive
+          disabled={disabled}
+          ariaAssertiveDisabled={ariaAssertiveDisabled}
+          ariaAssertiveUnDisabled={ariaAssertiveUnDisabled}
+        />
+      </Fragment>
+    );
   }
 }

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -48,7 +48,7 @@ exports[`calling render with the same component on the same container does not r
 
 <button
   aria-disabled="false"
-  class="emotion-0"
+  class="fi-button emotion-0"
   data-testid="button"
   tabindex="0"
   type="button"

src/components/Form/Toggle.tsx

@@ -6,6 +6,7 @@ import React, {
   FunctionComponent,
 } from 'react';
 import { HtmlLabel, HtmlInput, HtmlSpan } from '../../reset';
+import { idGenerator } from '../../utils/uuid';
 import classnames from 'classnames';
 
 const baseClassName = 'fi-toggle';
@@ -69,6 +70,10 @@ export interface ToggleProps {
    */
   'aria-label'?: string;
   'aria-labelledby'?: string;
+  /** Unique id
+   * @default uuidV4
+   */
+  id?: string;
 }
 
 interface ToggleState {
@@ -126,9 +131,11 @@ export class Toggle extends Component<ToggleProps> {
       checked: dissMissChecked,
       defaultChecked: dissMissDefaultChecked,
       onClick: dissMissOnClick,
+      id: propId,
       ...passProps
     } = this.props;
     const { toggleState } = this.state;
+    const id = idGenerator(propId);
     const newToggleInputProps = {
       disabled,
       'aria-label': ariaLabel,
@@ -137,6 +144,7 @@ export class Toggle extends Component<ToggleProps> {
       className: toggleInputClassName,
       onChange: this.handleClick,
       ...toggleInputProps,
+      id,
     };
 
     return (
@@ -154,6 +162,7 @@ export class Toggle extends Component<ToggleProps> {
           {...passProps}
           className={toggleLabelClassName}
           onClick={this.handleClick}
+          htmlFor={id}
         >
           {children}
         </HtmlLabel>

src/components/utils/aria.ts

@@ -6,6 +6,10 @@ export const ariaLabelOrHidden = (ariaLabel?: string) => {
     : { 'aria-hidden': true };
 };
 
+/**
+ * Set element ability to be focusable based on aria-label
+ * @param {String} ariaLabel optional aria-label
+ */
 export const ariaFocusableNoLabel = (ariaLabel?: string) => {
   return ifAriaNoLabel(ariaLabel) ? {} : { focusable: false };
 };

src/core/Block/Block.test.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import { render } from 'react-testing-library';
+import { axeTest } from '../../utils/test/axe';
 
 import { Block } from './Block';
 
+const TestBlock = (
+  <div data-testid="test-block">
+    <Block>Hey this is test</Block>
+    <Block padding="xl">Hey this is test lead</Block>
+    <Block.section>Hey this is test bold</Block.section>
+  </div>
+);
+
 test('calling render with the same component on the same container does not remount', () => {
-  const BlockRendered = render(
-    <div data-testid="test-block">
-      <Block>Hey this is test</Block>
-      <Block padding="xl">Hey this is test lead</Block>
-      <Block.section>Hey this is test bold</Block.section>
-    </div>,
-  );
+  const BlockRendered = render(TestBlock);
   const { container } = BlockRendered;
   expect(container.firstChild).toMatchSnapshot();
 });
+
+test('should not have basic accessibility issues', axeTest(TestBlock));

src/core/Block/__snapshots__/Block.test.tsx.snap

@@ -13,6 +13,8 @@ exports[`calling render with the same component on the same container does not r
   letter-spacing: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -97,6 +99,8 @@ exports[`calling render with the same component on the same container does not r
   letter-spacing: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
+  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-font-smoothing: antialiased;
 }
 

src/core/Breadcrumb/Breadcrumb.test.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import { render } from 'react-testing-library';
+import { axeTest } from '../../utils/test/axe';
 
 import { Breadcrumb } from './Breadcrumb';
 
+const TestBreadcrumb = (
+  <Breadcrumb data-testid="Breadcrumb" aria-label="breadcrumb">
+    <Breadcrumb.link href="/">Frontpage</Breadcrumb.link>
+    <Breadcrumb.link href="/sub">Sub page</Breadcrumb.link>
+    <Breadcrumb.link current={true}>Sub sub page</Breadcrumb.link>
+  </Breadcrumb>
+);
+
 test('calling render with the same component on the same container does not remount', () => {
-  const BreadcrumbRendered = render(
-    <Breadcrumb data-testid="Breadcrumb" aria-label="breadcrumb">
-      <Breadcrumb.link href="/">Frontpage</Breadcrumb.link>
-      <Breadcrumb.link href="/sub">Sub page</Breadcrumb.link>
-      <Breadcrumb.link current={true}>Sub sub page</Breadcrumb.link>
-    </Breadcrumb>,
-  );
+  const BreadcrumbRendered = render(TestBreadcrumb);
   const { container } = BreadcrumbRendered;
   expect(container.firstChild).toMatchSnapshot();
 });
+
+test('should not have basic accessibility issues', axeTest(TestBreadcrumb));

src/core/Breadcrumb/Breadcrumb.tsx

@@ -31,6 +31,7 @@ type VariantBreadcrumbProps =
   | LinkProps & { variant?: BreadcrumbVariant };
 
 /**
+ * <i class="semantics" />
  * Used for navigation path
  */
 export class Breadcrumb extends Component<VariantBreadcrumbProps> {