Page MenuHomePhorge

No OneTemporary

Size
2 KB
Referenced Files
None
Subscribers
None
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index b058112537..5164a1e508 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -7,9 +7,9 @@
{{ contrast.text }}
</span>
<Tooltip
- :text="hint"
class="rating"
- :aria-label="$t('settings.style.common.contrast.label')"
+ :text="hint"
+ :label="$t('settings.style.common.contrast.label')"
>
<span v-if="contrast.aaa">
<FAIcon
@@ -32,9 +32,9 @@
</Tooltip>
<Tooltip
v-if="contrast && large"
- :text="hint_18pt"
class="rating"
- :aria-label="$t('settings.style.common.contrast.label')"
+ :text="hint_18pt"
+ :label="$t('settings.style.common.contrast.label')"
>
<span v-if="contrast.laaa">
<FAIcon
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index ef360e9ee6..c80a9e9eb1 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -7,6 +7,9 @@ const Popover = {
// Action to trigger popover: either 'hover' or 'click'
trigger: String,
+ // Accessible label
+ label: String,
+
// 'top', 'bottom', 'left', 'right'
placement: String,
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index b0ad5d1132..af2a4450f2 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -8,6 +8,7 @@
:aria-haspopup="ariaHasPopup"
:aria-owns="hidden ? undefined : `${idPrefix}content`"
:aria-expanded="!hidden"
+ :aria-label="label"
@mouseenter="onMouseenter"
@mouseleave="onMouseleave"
@click="onClick"
diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
index 6161cd6be0..8558c45695 100644
--- a/src/components/tooltip/tooltip.vue
+++ b/src/components/tooltip/tooltip.vue
@@ -2,17 +2,18 @@
<Popover
trigger="hover"
tooltip
- v-bind="{ 'aria-label': props.text, ...$attrs }"
+ :label="label ?? $t('general.help')"
+ v-bind="$attrs"
>
- <template #trigger>
- <slot />
- </template>
- <template #content>
- <div class="tooltip" role="tooltip" :id="idPrefix + 'content'">
- {{ props.text }}
- </div>
- </template>
- </Popover>
+ <template #trigger>
+ <slot />
+ </template>
+ <template #content>
+ <div class="tooltip" role="tooltip" :id="idPrefix + 'content'">
+ {{ props.text }}
+ </div>
+ </template>
+</Popover>
</template>
<script setup>
@@ -20,7 +21,7 @@ import { computed, useId } from 'vue'
import Popover from 'src/components/popover/popover.vue'
-const props = defineProps({ text: String })
+const props = defineProps({ text: String, label: String })
const uniqueId = useId()
const idPrefix = computed(() => `tooltip-${uniqueId.value}`)
</script>

File Metadata

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

Event Timeline