Button component accessibility

[dirtyredz]

Feature

Button component needs accessibility

Why is this feature being added?

Accessibility is very important!

What should your feature do?

Accept aria props.
Handle "onKeyPress" the same as "onClick"

[kylemh]

I love that you care about accessibility. As you can see, we have a lot to improve on the live site.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Unless there's a clear need for ARIA attributes (we depart from semantic HTML), I think we can move past this.

Since we're not providing onKeyDown, hitting the Enter key will activate a button. If the button type is changed to "submit" it will submit a form. I think we should be good here! 👍

You can investigate for yourself at http://storybook.operationcode.org/

[dirtyredz]

My main motivation for the aria attribute was for #196 (The "Show All" button) screen readers don't detect the additional links unless the button reads as a toggle.
I'm still learning a lot about accessibility and trying my best to make sure I include it whenever possible.

[kylemh]

Ah. Thank you for the context. In that situation, I wonder if an input is more semantically correct. This article says no, yet they don't touch upon input of type "button". 🤔

More succinctly, in that situation, I think you can simply unmount the button once clicked, avoiding the issue entirely. If we develop enough content to the point where we'd want the user to be able to "unreveal" the massive list of articles they've just opened up, we'll tackle it then.

[dirtyredz]

You can treat a button as a toggle to a screen read with the "aria-pressed" attribute.
Used specifically for situations like this (I think)
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#Toggle_buttons