Add keyboard handles to click tray buttons

The buttons in the course links and course documents panels
are actually divs with role="button" and were missing a keyboard
event handler to click

closes CORE-3042

test plan:
  - load a course page with the rce
  - select Links > Course Links
  - tab until you're on a link
  - type <Enter> or <Space>
  > expect the link to be added to the rce
  - repeat from Documents > Course Documents

Change-Id: Icc6f251327ce424e8debaaf23b516668f9c5584b
Reviewed-on: https://gerrit.instructure.com/196698
Tested-by: Jenkins
Reviewed-by: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>

packages/canvas-rce/src/rce/plugins/instructure_documents/components/Link.js

@@ -51,6 +51,13 @@ export default function Link(props) {
     });
   }
 
+  function handleLinkKey(e) {
+    // press the button on enter or space
+    if (e.keyCode === 13 || e.keyCode === 32) {
+      handleLinkClick(e)
+    }
+  }
+
   function handleDragStart(e) {
     dragHtml(e, renderDocHtml(props));
   }
@@ -85,6 +92,7 @@ export default function Link(props) {
         padding="x-small"
         width="100%"
         onClick={handleLinkClick}
+        onKeyDown={handleLinkKey}
       >
         <div style={{pointerEvents: 'none'}}>
           <Flex>

packages/canvas-rce/src/rce/plugins/instructure_documents/components/__tests__/Link.test.js

@@ -119,8 +119,32 @@ describe('RCE "Documents" Plugin > Document', () => {
       btn.click()
       expect(onClick).toHaveBeenCalled()
     })
+
+    it('calls onClick on <Enter>', () => {
+      const onClick = jest.fn()
+      const {getByText} = renderComponent({display_name: 'click me', onClick: onClick})
+
+      const btn = getByText('click me')
+      fireEvent.keyDown(btn, {keyCode: 13})
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('calls onClick on <Space>', () => {
+      const onClick = jest.fn()
+      const {getByText} = renderComponent({display_name: 'click me', onClick: onClick})
+
+      const btn = getByText('click me')
+      fireEvent.keyDown(btn, {keyCode: 32})
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('only shows drag handle on hover', () => {
+      const {container, getByTestId} = renderComponent()
+
+      expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(0)
+      fireEvent.mouseEnter(getByTestId('instructure_links-Link'))
+      expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(1)
+    })
   })
-
-
 })
 

packages/canvas-rce/src/rce/plugins/instructure_links/components/Link.js

@@ -106,6 +106,13 @@ export default function Link(props) {
     props.onClick(props.link);
   }
 
+  function handleLinkKey(e) {
+    // press the button on enter or space
+    if (e.keyCode === 13 || e.keyCode === 32) {
+      handleLinkClick(e)
+    }
+  }
+
   function handleDragStart(e) {
     dragHtml(e, renderLinkHtml(props.link));
   }
@@ -135,6 +142,7 @@ export default function Link(props) {
         padding="x-small"
         aria-describedby={props.describedByID}
         onClick={handleLinkClick}
+        onKeyDown={handleLinkKey}
         elementRef={props.elementRef}
       >
         <div style={{pointerEvents: 'none'}}>

packages/canvas-rce/src/rce/plugins/instructure_links/components/__tests__/Link.test.js

@@ -173,13 +173,41 @@ describe('RCE "Links" Plugin > Link', () => {
       btn.click()
       expect(onClick).toHaveBeenCalled()
     })
-  })
 
-  it('only shows drag handle on hover', () => {
-    const {container, getByTestId} = renderComponent()
+    it('calls onClick on <Enter>', () => {
+      const onClick = jest.fn()
+      const link = {
+        href: 'the_url',
+        title: 'object title',
+        published: true
+      }
+      const {getByText} = renderComponent({link, onClick})
 
-    expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(0)
-    fireEvent.mouseEnter(getByTestId('instructure_links-Link'))
-    expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(1)
+      const btn = getByText(link.title)
+      fireEvent.keyDown(btn, {keyCode: 13})
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('calls onClick on <Space>', () => {
+      const onClick = jest.fn()
+      const link = {
+        href: 'the_url',
+        title: 'object title',
+        published: true
+      }
+      const {getByText} = renderComponent({link, onClick})
+
+      const btn = getByText(link.title)
+      fireEvent.keyDown(btn, {keyCode: 32})
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('only shows drag handle on hover', () => {
+      const {container, getByTestId} = renderComponent()
+
+      expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(0)
+      fireEvent.mouseEnter(getByTestId('instructure_links-Link'))
+      expect(container.querySelectorAll('svg[name="IconDragHandle"]')).toHaveLength(1)
+    })
   })
 })