Page MenuHomePhorge

No OneTemporary

Size
2 KB
Referenced Files
None
Subscribers
None
diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js
index 083f7a21da..e513a04104 100644
--- a/src/components/dialog_modal/dialog_modal.js
+++ b/src/components/dialog_modal/dialog_modal.js
@@ -1,3 +1,5 @@
+import { useId } from 'vue'
+
import { useMergedConfigStore } from 'src/stores/merged_config.js'
const DialogModal = {
@@ -13,6 +15,11 @@ const DialogModal = {
type: Function,
},
},
+ setup() {
+ const uniqueId = useId()
+
+ return { uniqueId }
+ },
computed: {
mobileCenter() {
return useMergedConfigStore().mergedConfig.modalMobileCenter
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index b23af60afa..e00bb74e3d 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -6,10 +6,16 @@
>
<div
class="dialog-modal panel panel-default"
+ role="dialog"
+ aria-modal="true"
+ :aria-labelledby="uniqueId + 'header'"
@click.stop=""
>
<div class="panel-heading dialog-modal-heading">
- <h1 class="title">
+ <h1
+ :id="uniqueId + 'header'"
+ class="title"
+ >
<slot name="header" />
</h1>
</div>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 96642142ca..42fc184d07 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,6 +1,7 @@
<template>
<div
role="dialog"
+ aria-modal="true"
v-show="isOpen"
v-body-scroll-lock="isOpen && !noBackground"
class="modal-view"
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index abfd333434..a2599eef38 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -188,16 +188,16 @@ export default {
return (
<div
class={wrapperClasses}
- role="presentation"
id={`${this.idPrefix}tabpanel-${index}`}
+ aria-label={props.label}
+ role="tabpanel"
>
<div class="tab-mobile-header" role="presentation">
{header}
</div>
<div
class={slotWrapperClasses}
- role="tabpanel"
- aria-label={props.label}
+ role="presentation"
>
<div class={contentClasses} role="presentation">
{renderSlot}

File Metadata

Mime Type
text/x-diff
Expires
Sun, Oct 11, 7:12 AM (1 d, 13 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1785652
Default Alt Text
(2 KB)

Event Timeline