A11y design enhancements

addons/a11y/package.json

@@ -40,6 +40,7 @@
     "memoizerific": "^1.11.3",
     "react": "^16.8.4",
     "react-redux": "^6.0.1",
+    "react-sizeme": "^2.5.2",
     "redux": "^4.0.1",
     "util-deprecate": "^1.0.2"
   },

addons/a11y/src/components/A11YPanel.tsx

@@ -175,10 +175,9 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Violations>{violations.length} Violations</Violations>,
                     panel: (
                       <Report
-                        passes={false}
                         items={violations}
                         type={RuleType.VIOLATION}
-                        empty="No a11y violations found."
+                        empty="No accessibility violations found."
                       />
                     ),
                     items: violations,
@@ -188,10 +187,9 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Passes>{passes.length} Passes</Passes>,
                     panel: (
                       <Report
-                        passes
                         items={passes}
                         type={RuleType.PASS}
-                        empty="No a11y check passed."
+                        empty="No accessibility checks passed."
                       />
                     ),
                     items: passes,
@@ -201,10 +199,9 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
                     panel: (
                       <Report
-                        passes={false}
                         items={incomplete}
                         type={RuleType.INCOMPLETION}
-                        empty="No a11y incomplete found."
+                        empty="No accessibility checks incomplete."
                       />
                     ),
                     items: incomplete,

addons/a11y/src/components/Report/Elements.tsx

@@ -14,25 +14,25 @@ const Item = styled.li({
 const ItemTitle = styled.span(({ theme }) => ({
   borderBottom: `1px solid ${theme.appBorderColor}`,
   width: '100%',
-  display: 'inline-block',
+  display: 'flex',
   paddingBottom: '6px',
   marginBottom: '6px',
+  justifyContent: 'space-between',
 }));
 
 const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
-  float: 'right',
+  alignSelf: 'center',
   paddingRight: '15px',
   input: { margin: 0 },
 });
 
 interface ElementProps {
   element: NodeResult;
-  passes: boolean;
   type: RuleType;
 }
 
-const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) => {
+const Element: FunctionComponent<ElementProps> = ({ element, type }) => {
   const { any, all, none } = element;
   const rules = [...any, ...all, ...none];
   const highlightToggleId = `${type}-${element.target[0]}`;
@@ -51,21 +51,20 @@ const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) =>
           />
         </HighlightToggleElement>
       </ItemTitle>
-      <Rules rules={rules} passes={passes} />
+      <Rules rules={rules} />
     </Item>
   );
 };
 
 interface ElementsProps {
   elements: NodeResult[];
-  passes: boolean;
   type: RuleType;
 }
 
-export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes, type }) => (
+export const Elements: FunctionComponent<ElementsProps> = ({ elements, type }) => (
   <ol>
     {elements.map((element, index) => (
-      <Element passes={passes} element={element} key={index} type={type} />
+      <Element element={element} key={index} type={type} />
     ))}
   </ol>
 );

addons/a11y/src/components/Report/Item.tsx

@@ -12,6 +12,7 @@ import HighlightToggle from './HighlightToggle';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
+  width: '100%',
   borderBottom: `1px solid ${theme.appBorderColor}`,
   '&:hover': {
     background: theme.background.hoverable,
@@ -49,14 +50,12 @@ const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   float: 'right',
   marginRight: '15px',
-  marginTop: '10px',
-
+  alignSelf: 'center',
   input: { margin: 0 },
 });
 
 interface ItemProps {
   item: Result;
-  passes: boolean;
   type: RuleType;
 }
 
@@ -75,7 +74,7 @@ export class Item extends Component<ItemProps, ItemState> {
     }));
 
   render() {
-    const { item, passes, type } = this.props;
+    const { item, type } = this.props;
     const { open } = this.state;
     const highlightToggleId = `${type}-${item.id}`;
 
@@ -104,7 +103,7 @@ export class Item extends Component<ItemProps, ItemState> {
         {open ? (
           <Fragment>
             <Info item={item} key="info" />
-            <Elements elements={item.nodes} passes={passes} type={type} key="elements" />
+            <Elements elements={item.nodes} type={type} key="elements" />
             <Tags tags={item.tags} key="tags" />
           </Fragment>
         ) : null}

addons/a11y/src/components/Report/Rules.tsx

@@ -1,8 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
-
-import { Icons } from '@storybook/components';
+import { Badge, Icons } from '@storybook/components';
 import { CheckResult } from 'axe-core';
+import { RuleType } from '../A11YPanel';
+import { SizeMe } from 'react-sizeme';
 
 const impactColors = {
   minor: '#f1c40f',
@@ -15,18 +16,30 @@ const impactColors = {
 const List = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  padding: '4px',
+  paddingBottom: '4px',
+  paddingRight: '4px',
+  paddingTop: '4px',
   fontWeight: '400',
 } as any);
 
-const Item = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  marginBottom: '6px',
-});
+const Item = styled.div(({ elementWidth }: { elementWidth: number }) => ({
+  flexDirection: elementWidth > 407 ? 'row' : 'inherit',
+  marginBottom: elementWidth > 407 ? '6px' : '12px',
+  display: elementWidth > 407 ? 'flex' : 'block',
+}));
+
+const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
+  padding: '2px 8px',
+  marginBottom: '3px',
+  minWidth: '65px',
+  maxWidth: 'fit-content',
+  width: '100%',
+  textAlign: 'center',
+}));
 
 const Message = styled.div({
   paddingLeft: '6px',
+  paddingRight: '23px',
 });
 
 const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
@@ -40,30 +53,63 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
   },
 }));
 
+export enum ImpactValue {
+  MINOR = 'minor',
+  MODERATE = 'moderate',
+  SERIOUS = 'serious',
+  CRITICAL = 'critical',
+}
+
 interface RuleProps {
   rule: CheckResult;
-  passes: boolean;
 }
 
-const Rule: FunctionComponent<RuleProps> = ({ rule, passes }) => (
-  <Item>
-    <Status passes={passes || undefined} impact={rule.impact}>
-      {passes ? <Icons icon="check" /> : <Icons icon="cross" />}
-    </Status>
-    <Message>{rule.message}</Message>
-  </Item>
-);
+const formatSeverityText = (severity: string) => {
+  return severity
+    .charAt(0)
+    .toUpperCase()
+    .concat(severity.slice(1));
+};
+
+const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
+  let badgeType = '';
+  switch (rule.impact) {
+    case ImpactValue.CRITICAL:
+      badgeType = 'critical';
+      break;
+    case ImpactValue.SERIOUS:
+      badgeType = 'negative';
+      break;
+    case ImpactValue.MODERATE:
+      badgeType = 'warning';
+      break;
+    case ImpactValue.MINOR:
+      badgeType = 'neutral';
+      break;
+    default:
+      break;
+  }
+  return (
+    <SizeMe refreshMode="debounce">
+      {({ size }: { size: any }) => (
+        <Item elementWidth={size.width}>
+          <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
+          <Message>{rule.message}</Message>
+        </Item>
+      )}
+    </SizeMe>
+  );
+};
 
 interface RulesProps {
   rules: CheckResult[];
-  passes: boolean;
 }
 
-export const Rules: FunctionComponent<RulesProps> = ({ rules, passes }) => {
+export const Rules: FunctionComponent<RulesProps> = ({ rules }) => {
   return (
     <List>
       {rules.map((rule, index) => (
-        <Rule passes={passes} rule={rule} key={index} />
+        <Rule rule={rule} key={index} />
       ))}
     </List>
   );

addons/a11y/src/components/Report/index.tsx

@@ -7,14 +7,13 @@ import { RuleType } from '../A11YPanel';
 export interface ReportProps {
   items: Result[];
   empty: string;
-  passes: boolean;
   type: RuleType;
 }
 
-export const Report: FunctionComponent<ReportProps> = ({ items, empty, type, passes }) => (
+export const Report: FunctionComponent<ReportProps> = ({ items, empty, type }) => (
   <Fragment>
     {items && items.length ? (
-      items.map(item => <Item passes={passes} item={item} key={`${type}:${item.id}`} type={type} />)
+      items.map(item => <Item item={item} key={`${type}:${item.id}`} type={type} />)
     ) : (
       <Placeholder key="placeholder">{empty}</Placeholder>
     )}