fix(NcPopover): add aria-modal to some popover-based dialog components

Signed-off-by: Grigorii K. Shartsev <[email protected]>

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,

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">

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">

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>