Interact with install buttons with keyboard only

src/disco/containers/InstallButton.js

@@ -39,7 +39,7 @@ export class InstallButton extends React.Component {
   }
 
   render() {
-    const { status, downloadProgress } = this.props;
+    const { downloadProgress, slug, status } = this.props;
 
     if (!validStates.includes(status)) {
       throw new Error('Invalid add-on status');
@@ -49,17 +49,19 @@ export class InstallButton extends React.Component {
     const isDisabled = status === UNKNOWN;
     const isDownloading = status === DOWNLOADING;
     const switchClasses = `switch ${status}`;
+    const identifier = `install-button-${slug}`;
 
     return (
       <div className={switchClasses} onClick={this.handleClick}
         data-download-progress={isDownloading ? downloadProgress : 0}>
         <input
+          id={identifier}
           className="visually-hidden"
           checked={isInstalled}
           disabled={isDisabled}
           onChange={this.props.handleChange}
           type="checkbox" />
-        <label>
+        <label htmlFor={identifier}>
           {isDownloading ? <div className="progress"></div> : null}
           <span className="visually-hidden">{_('Install')}</span>
         </label>

src/disco/css/InstallButton.scss

@@ -1,3 +1,6 @@
+@import "~disco/css/inc/vars";
+@import "~core/css/inc/mixins";
+
 $size: 26px;
 $borderSize: 1px;
 
@@ -59,6 +62,10 @@ $installStripeColor2: #00C42E;
     width: 16px;
   }
 
+  input:focus + label {
+    @include focus();
+  }
+
   input + label {
     background: #919191;
     border-radius: $size;

tests/client/disco/containers/TestInstallButton.js

@@ -97,6 +97,15 @@ describe('<InstallButton />', () => {
     assert.ok(!uninstall.called);
   });
 
+  it('should associate the label and input with id and for attributes', () => {
+    const button = renderButton({status: UNINSTALLED, slug: 'foo'});
+    const root = findDOMNode(button);
+    assert.equal(root.querySelector('input').getAttribute('id'),
+                 'install-button-foo', 'id is set');
+    assert.equal(root.querySelector('label').getAttribute('for'),
+                 'install-button-foo', 'for attribute matches id');
+  });
+
   it('should throw on bogus status', () => {
     assert.throws(() => {
       renderButton({status: 'BOGUS'});