From 28f1c82bbe77ff457061867d3b384f471c7065ae Mon Sep 17 00:00:00 2001
From: Jason Miazga <jmiazga@gmail.com>
Date: Fri, 22 Jun 2018 21:56:53 -0400
Subject: [PATCH] used IoChevronRight instead of css arrow for a11y addon
 HeaderBar

---
 addons/a11y/package.json                  |  3 ++-
 addons/a11y/src/components/Report/Item.js | 22 +++++++++-------------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index e7d37166fa2..496bf07e5f8 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -34,7 +34,8 @@
     "emotion": "^9.1.3",
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
-    "react-emotion": "^9.1.3"
+    "react-emotion": "^9.1.3",
+    "react-icons": "^2.2.7"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/addons/a11y/src/components/Report/Item.js b/addons/a11y/src/components/Report/Item.js
index f0508b7e1b4..8ef46573847 100644
--- a/addons/a11y/src/components/Report/Item.js
+++ b/addons/a11y/src/components/Report/Item.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import styled from 'react-emotion';
+import IoChevronRight from 'react-icons/lib/io/chevron-right';
 
 import Info from './Info';
 import Tags from './Tags';
@@ -21,18 +22,6 @@ const HeaderBar = styled('button')({
   background: 'none',
 });
 
-const Arrow = styled('span')(props => ({
-  display: 'inline-block',
-  width: 0,
-  height: 0,
-  borderStyle: 'solid',
-  borderWidth: '5px 0 5px 8.7px',
-  borderColor: 'transparent transparent transparent #828282',
-  paddingRight: 5,
-  transformOrigin: '25% 50%',
-  transform: `rotate(${props.open ? 90 : 0}deg)`,
-}));
-
 class Item extends Component {
   static propTypes = {
     item: PropTypes.shape({
@@ -59,7 +48,14 @@ class Item extends Component {
     return (
       <Wrapper>
         <HeaderBar onClick={this.onToggle}>
-          <Arrow open={open} />
+          <IoChevronRight
+            size={10}
+            color="#9DA5AB"
+            style={{
+              marginRight: '5px',
+              transform: `rotate(${open ? 90 : 0}deg)`,
+            }}
+          />
           {item.description}
         </HeaderBar>
         {open && <Info item={item} />}