@designcrowd/fe-shared-lib 1.6.8 → 1.6.9-ModalAccessibility

package/src/atoms/components/Modal/Modal.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     v-show="visible"
+    role="dialog"
+    aria-modal="true"
     :aria-hidden="visible ? 'false' : 'true'"
+    :aria-label="ariaLabel"
     class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
     :class="{
       'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
@@ -47,6 +50,7 @@
           v-if="!mandatory"
           class="tw-absolute tw-right-0 tw-top-0 tw-border-none tw-text-secondary-500 tw-appearance-none tw-bg-transparent tw-p-0 tw-w-8 tw-h-8 tw-ml-auto tw-cursor-pointer"
           data-test-modal-close-btn
+          aria-label="Close"
           @click="close($event)"
         >
           <span class="tw-sr-only">Close modal</span>
@@ -161,6 +165,11 @@ export default {
       required: false,
       default: false,
     },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   computed: {
     isImageMode() {