Start integrating accessibility changes to storybook feature

Author: catarak

client/common/Button.jsx

@@ -153,11 +153,11 @@ const StyledIconButton = styled.button`
 const Button = ({
   children, href, iconAfterName, iconBeforeName, kind, label, to, type, ...props
 }) => {
-  const iconAfter = iconAfterName && <Icon name={iconAfterName} />;
-  const iconBefore = iconBeforeName && <Icon name={iconBeforeName} />;
+  const IconAfter = Icon[iconAfterName];
+  const IconBefore = Icon[iconBeforeName];
   const hasChildren = React.Children.count(children) > 0;
 
-  const content = <>{iconBefore}{hasChildren && <span>{children}</span>}{iconAfter}</>;
+  const content = <>{IconBefore}{hasChildren && <span>{children}</span>}{IconAfter}</>;
 
   let StyledComponent = StyledButton;
 
@@ -190,7 +190,7 @@ Button.defaultProps = {
   type: 'button',
 };
 
-Button.iconNames = Icon.names;
+Button.iconNames = Object.keys(Icon);
 Button.kinds = kinds;
 
 Button.propTypes = {

client/common/Button.stories.jsx

@@ -36,17 +36,17 @@ export const ReactRouterLink = () => (
 );
 
 export const ButtonWithIconBefore = () => (
-  <Button iconBeforeName={Button.iconNames.github}>Create</Button>
+  <Button iconBeforeName={Button.iconNames.Github}>Create</Button>
 );
 
 export const ButtonWithIconAfter = () => (
-  <Button iconAfterName={Button.iconNames.github}>Create</Button>
+  <Button iconAfterName={Button.iconNames.Github}>Create</Button>
 );
 
 export const InlineButtonWithIconAfter = () => (
-  <Button kind={Button.kinds.inline} iconAfterName={Button.iconNames.sortArrowDown}>File name</Button>
+  <Button kind={Button.kinds.inline} iconAfterName={Button.iconNames.SortArrowDown}>File name</Button>
 );
 
 export const InlineIconOnlyButton = () => (
-  <Button kind={Button.kinds.inline} iconAfterName={Button.iconNames.plus} label="Add to collection" />
+  <Button kind={Button.kinds.inline} iconAfterName={Button.iconNames.Plus} label="Add to collection" />
 );

client/common/Icon.jsx

@@ -1,48 +1,25 @@
-/* eslint-disable global-require */
-import InlineSVG from 'react-inlinesvg';
 import PropTypes from 'prop-types';
-import React from 'react';
-import lodash from 'lodash';
-import styled from 'styled-components';
 
-const icons = {
-  sortArrowUp: require('../images/sort-arrow-up.svg'),
-  sortArrowDown: require('../images/sort-arrow-down.svg'),
-  github: require('../images/github.svg'),
-  google: require('../images/google.svg'),
-  plus: require('../images/plus-icon.svg'),
-  close: require('../images/close.svg'),
+import SortArrowUp from '../images/sort-arrow-up.svg';
+import SortArrowDown from '../images/sort-arrow-down.svg';
+import Github from '../images/github.svg';
+import Google from '../images/google.svg';
+import Plus from '../images/plus-icon.svg';
+import Close from '../images/close.svg';
+
+// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
+// could do something like, if there's an aria-label prop, give it role="img" focusable="false"
+// otherwise, give it aria-hidden="true" focusable="false"
+
+const Icons = {
+  SortArrowUp,
+  SortArrowDown,
+  Github,
+  Google,
+  Plus,
+  Close
 };
 
-/*
-  names will be an mirror-object of icon names:
-    {
-      github: 'github',
-      ...
-    }
-*/
-const names = lodash.mapValues(icons, (value, key) => key);
+export default Icons;
 
-export const ValidIconNameType = PropTypes.oneOf(Object.keys(names));
-
-const StyledInlineSVG = styled(InlineSVG)`
-  > svg {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-function Icon({ name, ...props }) {
-  return (
-    <StyledInlineSVG src={icons[name]} {...props} />
-  );
-}
-
-
-Icon.names = names;
-
-Icon.propTypes = {
-  name: ValidIconNameType.isRequired
-};
-
-export default Icon;
+export const ValidIconNameType = PropTypes.oneOf(Object.keys(Icons));

client/common/Icon.stories.jsx

@@ -9,9 +9,10 @@ export default {
 };
 
 export const AllIcons = () => {
-  const firstIconName = Object.keys(Icon.names)[0];
+  const names = Object.keys(Icon);
 
+  const SelectedIcon = Icon[select('name', names, names[0])];
   return (
-    <Icon name={select('name', Icon.names, firstIconName)} />
+    <SelectedIcon />
   );
 };

client/modules/User/components/APIKeyForm.jsx

@@ -80,7 +80,7 @@ class APIKeyForm extends React.Component {
               value={this.state.keyLabel}
             />
             <Button
-              iconBeforeName={Button.iconNames.plus}
+              iconBeforeName={Button.iconNames.Plus}
               disabled={this.state.keyLabel === ''}
               type="submit"
               label="Create new key"

client/modules/User/components/Collection.jsx

@@ -53,7 +53,7 @@ const ShareURL = ({ value }) => {
   return (
     <div className="collection-share" ref={node}>
       <Button
-        iconAfterName={Button.iconNames.sortArrowDown}
+        iconAfterName={Button.iconNames.SortArrowDown}
         onClick={() => setShowURL(!showURL)}
       >Share
       </Button>

client/modules/User/components/SocialAuthButton.jsx

@@ -7,18 +7,18 @@ import { remSize } from '../../../theme';
 import Button from '../../../common/Button';
 
 const authUrls = {
-  github: '/auth-github',
-  google: '/auth/google/'
+  Github: '/auth-github',
+  Google: '/auth/google/'
 };
 
 const labels = {
-  github: 'Login with GitHub',
-  google: 'Login with Google'
+  Github: 'Login with GitHub',
+  Google: 'Login with Google'
 };
 
 const services = {
-  github: 'github',
-  google: 'google'
+  Github: 'github',
+  Google: 'google'
 };
 
 const StyledButton = styled(Button)`
@@ -39,7 +39,7 @@ function SocialAuthButton({ service }) {
 SocialAuthButton.services = services;
 
 SocialAuthButton.propTypes = {
-  service: PropTypes.oneOf(['github', 'google']).isRequired
+  service: PropTypes.oneOf(['Github', 'Google']).isRequired
 };
 
 export default SocialAuthButton;

package-lock.json

@@ -178,7 +178,6 @@
     "react-dom": "^16.12.0",
     "react-helmet": "^5.1.3",
     "react-hot-loader": "^4.12.19",
-    "react-inlinesvg": "^1.2.0",
     "react-redux": "^5.1.2",
     "react-router": "^3.2.5",
     "react-split-pane": "^0.1.89",