Feature/spinbutton

[codekipple]

This component fits well as spinbutton as defined in the WAI-ARIA Authoring Practices 1.1 https://www.w3.org/TR/wai-aria-practices-1.1/#spinbutton

I've implemented the spinbutton pattern based on the spec and their example demo:- https://www.w3.org/TR/wai-aria-practices-1.1/examples/spinbutton/datepicker-spinbuttons.html

Changes

• Use <button> for keyboard focusable buttons
• Add aria label prop for buttons
• Turn .int-pm-value into a spinbutton
  • Added aria-valuenow aria-valuemin and aria-valuemax
  • Added prop for aria-label
• Added keyboard functionality as per the WAI-ARIA spec
  • page up and up arrow increment value
  • page down and down arrow decrement value
  • home sets value to min
  • end sets value to max
• Changed default styles to use flexbox instead of display: table
• Updated docs examples to include the new aria props

Testing

• Tested the changes using keyboard navigation, now the buttons are using <button> they can be tabbed to.
• Tested using VoiceOver app on Mac. Unfortunately, the VoiceOver app seems to have some issues with the spinbutton pattern. This component now works as well as the example demo provided by w3.org (https://www.w3.org/TR/wai-aria-practices-1.1/examples/spinbutton/datepicker-spinbuttons.html)

Things to do

Test the component using JAWS screenreader.

[Keiwen]

Thanks, this make it clean :)