Fix/a11y alert icon hidden

Given the icon on the <Alert/> component is mainly used to visually represent a message status, I'd suggest to remove it as it doesn't enhance the readability when using assistive technologies. Also, props such as title and a description via children should be descriptive enough for the User to understand the kind of alert they are receiving.

Result with aria-hidden:

How to test locally: Copy and Paste these snippets on the Alert code area at http://localhost:3000/components/alert?theme=default

<Component initialState={{ alert: false }}>
  {({ state, setState }) => (
  <div>
  <Button onClick={() => setState({ alert: !state.alert})}>send</Button>
    {state.alert && <Alert hasIcon type="danger">Something went wrong!
    </Alert>}
</div>
  )}
</Component>

<Component initialState={{ alert: false }}>
  {({ state, setState }) => (
  <div>
  <Button onClick={() => setState({ alert: !state.alert})}>send</Button>
    {state.alert && <Alert hasIcon type="success"> Data successfully saved!
    </Alert>}
</div>
  )}
</Component>

jxom / fannypack

Fix/a11y alert icon hidden #112

Preview releases deployed with Linc