summaryrefslogtreecommitdiffstats
path: root/themes/danix-xyz-hacker/layouts/partials/form-components.html
diff options
context:
space:
mode:
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/partials/form-components.html')
-rw-r--r--themes/danix-xyz-hacker/layouts/partials/form-components.html24
1 files changed, 12 insertions, 12 deletions
diff --git a/themes/danix-xyz-hacker/layouts/partials/form-components.html b/themes/danix-xyz-hacker/layouts/partials/form-components.html
index 9a69d43..d38973a 100644
--- a/themes/danix-xyz-hacker/layouts/partials/form-components.html
+++ b/themes/danix-xyz-hacker/layouts/partials/form-components.html
@@ -153,11 +153,11 @@
============================================ -->
<div class="modal" :class="{ active: showAlertModal }" x-show="showAlertModal">
- <div class="modal-backdrop" @click="showAlertModal = false"></div>
- <div class="modal-content modal-sm">
+ <div class="modal-backdrop" @click="showAlertModal = false" aria-hidden="true"></div>
+ <div class="modal-content modal-sm" role="dialog" aria-labelledby="alert-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
<div class="modal-header">
- <h3 class="modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3>
- <div class="modal-close" @click="showAlertModal = false"></div>
+ <h3 class="modal-title" id="alert-modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3>
+ <div class="modal-close" @click="showAlertModal = false" aria-label="Close modal"></div>
</div>
<div class="modal-body">
<p>{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}</p>
@@ -173,11 +173,11 @@
============================================ -->
<div class="modal" :class="{ active: showConfirmModal }" x-show="showConfirmModal">
- <div class="modal-backdrop" @click="showConfirmModal = false"></div>
- <div class="modal-content modal-sm">
+ <div class="modal-backdrop" @click="showConfirmModal = false" aria-hidden="true"></div>
+ <div class="modal-content modal-sm" role="dialog" aria-labelledby="confirm-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
<div class="modal-header">
- <h3 class="modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3>
- <div class="modal-close" @click="showConfirmModal = false"></div>
+ <h3 class="modal-title" id="confirm-modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3>
+ <div class="modal-close" @click="showConfirmModal = false" aria-label="Close modal"></div>
</div>
<div class="modal-body">
<p>{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}</p>
@@ -194,11 +194,11 @@
============================================ -->
<div class="modal" :class="{ active: showContentModal }" x-show="showContentModal">
- <div class="modal-backdrop" @click="showContentModal = false"></div>
- <div class="modal-content modal-md">
+ <div class="modal-backdrop" @click="showContentModal = false" aria-hidden="true"></div>
+ <div class="modal-content modal-md" role="dialog" aria-labelledby="content-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
<div class="modal-header">
- <h3 class="modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3>
- <div class="modal-close" @click="showContentModal = false"></div>
+ <h3 class="modal-title" id="content-modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3>
+ <div class="modal-close" @click="showContentModal = false" aria-label="Close modal"></div>
</div>
<div class="modal-body">
<p>{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}</p>