Improvements to make modal more accessible

changelog/unreleased/enhancement-improve-modal

@@ -0,0 +1,8 @@
+Enhancement: Improve modal component
+
+We've made the OcModal component more accessible:
+- It now features `role="dialog"` and `aria-modal="true"`
+- The modal title is now a `<h2>` 
+- Component styles have been moved from an individual stylesheet to the component file
+
+https://github.com/owncloud/owncloud-design-system/pull/1214

src/components/OcModal.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="oc-modal-background">
-    <div ref="$_ocModal" :class="classes" tabindex="0">
+    <div ref="$_ocModal" :class="classes" tabindex="0" role="dialog" aria-modal="true">
       <div class="oc-modal-title">
         <oc-icon v-if="icon" :name="icon" :variation="variation" />
-        <span v-text="title" />
+        <h2 v-text="title" />
       </div>
       <div class="oc-modal-body">
         <div v-if="$slots.content" key="modal-slot-content" class="oc-modal-body-message">
@@ -285,6 +285,106 @@ export default {
 }
 </script>
 
+<style lang="scss">
+@mixin oc-modal-variation($color) {
+  border-top-color: $color;
+
+  span {
+    color: $color;
+  }
+}
+
+.oc-modal {
+  border-radius: 8px;
+  border-top: 10px solid var(--oc-color-swatch-passive-default);
+  box-shadow: 0 2px 4px rgba(14, 30, 37, 0.25);
+  max-width: 500px;
+  overflow: hidden;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &-background {
+    align-items: center;
+    background-color: rgba(100, 100, 100, 0.3);
+    display: flex;
+    flex-flow: row wrap;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 4;
+  }
+
+  &-primary {
+    @include oc-modal-variation(var(--oc-color-swatch-primary-default));
+  }
+
+  &-success {
+    @include oc-modal-variation(var(--oc-color-swatch-success-default));
+  }
+
+  &-warning {
+    @include oc-modal-variation(var(--oc-color-swatch-warning-default));
+  }
+
+  &-danger {
+    @include oc-modal-variation(var(--oc-color-swatch-danger-default));
+  }
+
+  &-title {
+    align-items: center;
+    background-color: var(--oc-color-text-inverse);
+    display: flex;
+    flex-flow: row wrap;
+    padding: var(--oc-space-small) var(--oc-space-medium);
+
+    > .oc-icon {
+      margin-right: var(--oc-space-small);
+    }
+
+    > h2 {
+      font-size: 1rem;
+      font-weight: bold;
+      margin: 0;
+    }
+  }
+
+  &-body {
+    background-color: var(--oc-color-background-muted);
+    color: var(--oc-color-text-default);
+    padding: var(--oc-space-medium);
+
+    &-message {
+      margin-bottom: var(--oc-space-medium);
+    }
+
+    &-input {
+      /* FIXME: this is ugly, but required so that the bottom padding doesn't look off when reserving vertical space for error messages below the input. */
+      margin-bottom: -20px;
+      padding-bottom: var(--oc-space-medium);
+    }
+
+    &-actions {
+      text-align: right;
+
+      .oc-button {
+        border-radius: 4px;
+
+        &.uk-button-default {
+          background-color: var(--oc-color-text-inverse);
+          color: var(--oc-color-text-default);
+        }
+      }
+    }
+  }
+}
+</style>
+
 <docs>
 ```vue
   <oc-modal

src/components/__snapshots__/OcModal.spec.js.snap

@@ -2,9 +2,10 @@
 
 exports[`OcModal displays input 1`] = `
 <div class="oc-modal-background">
-  <div tabindex="0" class="oc-modal oc-modal-passive">
+  <div tabindex="0" role="dialog" aria-modal="true" class="oc-modal oc-modal-passive">
     <div class="oc-modal-title">
-      <!----> <span>Create new folder</span>
+      <!---->
+      <h2>Create new folder</h2>
     </div>
     <div class="oc-modal-body">
       <oc-text-input-stub id="oc-textinput-1" type="text" value="New folder" label="Folder name" fixmessageline="true" class="oc-modal-body-input"></oc-text-input-stub>
@@ -19,9 +20,10 @@ exports[`OcModal displays input 1`] = `
 
 exports[`OcModal hides icon if not specified 1`] = `
 <div class="oc-modal-background">
-  <div tabindex="0" class="oc-modal oc-modal-passive">
+  <div tabindex="0" role="dialog" aria-modal="true" class="oc-modal oc-modal-passive">
     <div class="oc-modal-title">
-      <!----> <span>Example title</span>
+      <!---->
+      <h2>Example title</h2>
     </div>
     <div class="oc-modal-body">
       <p class="oc-modal-body-message">Example message</p>
@@ -36,9 +38,10 @@ exports[`OcModal hides icon if not specified 1`] = `
 
 exports[`OcModal matches snapshot 1`] = `
 <div class="oc-modal-background">
-  <div tabindex="0" class="oc-modal oc-modal-passive">
+  <div tabindex="0" role="dialog" aria-modal="true" class="oc-modal oc-modal-passive">
     <div class="oc-modal-title">
-      <oc-icon-stub name="info" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub> <span>Example title</span>
+      <oc-icon-stub name="info" accessiblelabel="" type="span" size="medium" variation="passive"></oc-icon-stub>
+      <h2>Example title</h2>
     </div>
     <div class="oc-modal-body">
       <p class="oc-modal-body-message">Example message</p>
@@ -53,9 +56,10 @@ exports[`OcModal matches snapshot 1`] = `
 
 exports[`OcModal overrides props message with slot 1`] = `
 <div class="oc-modal-background">
-  <div tabindex="0" class="oc-modal oc-modal-passive">
+  <div tabindex="0" role="dialog" aria-modal="true" class="oc-modal oc-modal-passive">
     <div class="oc-modal-title">
-      <!----> <span>Example title</span>
+      <!---->
+      <h2>Example title</h2>
     </div>
     <div class="oc-modal-body">
       <div class="oc-modal-body-message">

src/styles/styles.scss

@@ -27,7 +27,6 @@
 @import 'theme/oc-file-actions';
 @import 'theme/oc-icon';
 @import 'theme/oc-loader';
-@import 'theme/oc-modal';
 @import 'theme/oc-progress-pie';
 @import 'theme/oc-public-share-icon';
 @import 'theme/oc-radio';