Accessibility fixes for the modal component:

- ESC to close
- closing-x tab-navigable, enter to trigger
  - Added aria label for closing-x
- Added dialog role

src/components/modal.vue

@@ -1,14 +1,19 @@
 <template>
   <transition name="modal">
     <div class="modal-mask"
-         @click.self="() => {click_outside_to_close ? $emit('close') : null}">
+         @click.self="() => {click_outside_to_close ? $emit('close') : null}"
+         @keyup.esc="$emit('close')">
       <div class="modal-container"
            :class="size"
-           :style="custom_width ? {width: custom_width} : ''">
+           :style="custom_width ? {width: custom_width} : ''"
+           role="dialog">
         <slot></slot>
         <div v-if="include_closing_x"
                 class="close-button"
-                @click="$emit('close')">
+                @click="$emit('close')"
+                @keyup.enter="$emit('close')"
+                tabindex="0"
+                aria-label="close-dialog">
           &#10005;
         </div>
       </div>

tests/test_components/test_modal.ts

@@ -39,6 +39,32 @@ describe('Modal.vue', () => {
         expect(wrapper.findComponent({ref: 'modal'}).exists()).toBe(false);
     });
 
+    test('Close modal with ESC key', async () => {
+        const component = {
+            template:  `<modal ref="modal"
+                               v-if="show_modal"
+                               @close="show_modal = false">
+                            <input type="text" data-testid="input" />
+                        </modal>`,
+            components: {
+                'modal': Modal
+            },
+            data: () => {
+                return {
+                    show_modal: false
+                };
+            }
+        };
+
+        const wrapper = mount(component);
+        await wrapper.setData({show_modal: true});
+        expect(wrapper.findComponent({ref: 'modal'}).exists()).toBe(true);
+
+        await wrapper.find('[data-testid=input]').trigger('keyup.esc');
+
+        expect(wrapper.findComponent({ref: 'modal'}).exists()).toBe(false);
+    });
+
     test('Ensure content is only displayed if external boolean is true', async () => {
         const component = {
             template:  `<modal ref="modal"