[Button] keypress, keydown, and keyup events

[tmlayton]

WHY are these changes introduced?

Porting over from https://github.com/Shopify/polaris-react-deprecated/pull/1820

WHAT is this pull request doing?

Add events for the aforementioned.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, Button} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page title="Playground">
        <Button onKeyPress={log} onKeyDown={log} onKeyUp={log}>
          Test
        </Button>
      </Page>
    );
  }
}

function log(event: KeyboardEvent) {
  console.log(event.keyCode);
}

🎩 checklist

• 🎩
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[danrosenthal]

Code and tests LGTM!

[dpersing]

I think we will want to provide some README.md/style guide documentation around giving merchants instructions if non-standard button events are used. I can draft something as part of the accessibility guidelines for buttons (current draft here), but I think it might warrant expanding that into an section on non-standard interactions on the Interaction states page in the style guide.

@danrosenthal @francinen What would you think about that type of guidance, and/or perhaps working on a pattern guide around events? We could use the drag-and-drop interaction as an example.

I think it would also be worthwhile to consider making a drag-and-drop component.

cc @tmlayton

[francinen]

@dpersing I think that would be worth investing in. Is there a specific approach to providing that context to merchants that the documentation should endorse, e.g., using aria-describedby to point to a node containing text instructions for interacting with the component?

[dpersing]

using aria-describedby to point to a node containing text instructions for interacting with the component

@francinen I think having visible instructions (for sighted keyboard users) tied to the feature with aria-describedby or similar would be a great example. To conserve space, maybe the instructions are in a tooltip that comes before the drag-and-drop controls?

[tmlayton]

I think we will want to provide some README.md/style guide documentation around giving merchants instructions if non-standard button events are used

@dpersing do you think we should make it part of this PR?

[dpersing]

@tmlayton I think it would make sense to include in component-level accessibility documentation, which is dependent on https://github.com/Shopify/polaris-styleguide/pull/2493. I think shipping before that's complete would be totally fine. I've included a call-out for non-standard button events in what will get published when we can.

[francinen]

Thank you!