used IoChevronRight instead of css arrow for a11y addon HeaderBar

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": "*",

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} />}