From dd7ba318cc651cc2c32f69cab2a05d561a53122a Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 26 Feb 2024 12:16:07 +0100
Subject: [PATCH] fix(NcPopover): add aria-modal to some popover-based dialog
 components

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/NcActions/NcActions.vue         | 1 +
 src/components/NcColorPicker/NcColorPicker.vue | 1 +
 src/components/NcEmojiPicker/NcEmojiPicker.vue | 1 +
 src/components/NcPopover/NcPopover.vue         | 2 +-
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 5703b8aeab..a52039dc4d 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -1804,6 +1804,7 @@ export default {
 								role: this.config.popupRole,
 								// Dialog must have a label
 								'aria-labelledby': this.actionsMenuSemanticType === 'dialog' ? triggerRandomId : undefined,
+								'aria-modal': this.actionsMenuSemanticType === 'dialog' ? 'true' : undefined,
 							},
 						}, [
 							actions,
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index e773403870..791fbc5f33 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -170,6 +170,7 @@ export default {
 		</template>
 		<div role="dialog"
 			class="color-picker"
+			aria-modal="true"
 			:aria-label="t('Color picker')"
 			:class="{ 'color-picker--advanced-fields': advanced && advancedFields }">
 			<Transition name="slide" mode="out-in">
diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index 4970bea686..1dc9dec1f7 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -149,6 +149,7 @@ This component allows the user to pick an emoji.
 			:show-skin-tones="false"
 			:title="previewFallbackName"
 			role="dialog"
+			aria-modal="true"
 			:aria-label="t('Emoji picker')"
 			v-bind="$attrs"
 			@select="select">
diff --git a/src/components/NcPopover/NcPopover.vue b/src/components/NcPopover/NcPopover.vue
index 18da1501f9..a4f83890d1 100644
--- a/src/components/NcPopover/NcPopover.vue
+++ b/src/components/NcPopover/NcPopover.vue
@@ -142,7 +142,7 @@ See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/
 			</template>
 
 			<!-- Popover content should has the same role -->
-			<div role="dialog" aria-labelledby="popover-example-custom-role-1">
+			<div role="dialog" aria-labelledby="popover-example-custom-role-1" aria-modal="true">
 				<!-- This is not required but better to provide a label -->
 				<header id="popover-example-custom-role-1">
 					<strong>Confirm remove</strong>