fix(AppMenu): ensure that aria attributes are set when needed

We hide **if** there is **no** notification.
We *do not* hide and *show the label* **if** there are notifications for
that application.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/54199/head
Ferdinand Thiessen 2025-07-31 14:28:19 +07:00
parent 2057fff1ad
commit 10eda65525
No known key found for this signature in database
GPG Key ID: 45FAE7268762B400
1 changed files with 8 additions and 7 deletions

@ -14,24 +14,25 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { INavigationEntry } from '../types/navigation' import type { INavigationEntry } from '../types/navigation.ts'
import { n } from '@nextcloud/l10n' import { n } from '@nextcloud/l10n'
import { computed } from 'vue' import { computed } from 'vue'
import IconDot from 'vue-material-design-icons/Circle.vue' import IconDot from 'vue-material-design-icons/Circle.vue'
const props = defineProps<{ const props = defineProps<{
app: INavigationEntry app: INavigationEntry
}>() }>()
const ariaHidden = computed(() => String(props.app.unread > 0)) // only hide if there are no unread notifications
const ariaHidden = computed(() => !props.app.unread ? 'true' : undefined)
const ariaLabel = computed(() => { const ariaLabel = computed(() => {
if (ariaHidden.value === 'true') { if (!props.app.unread) {
return '' return undefined
} }
return props.app.name
+ (props.app.unread > 0 ? ` (${n('core', '{count} notification', '{count} notifications', props.app.unread, { count: props.app.unread })})` : '') return `${props.app.name} (${n('core', '{count} notification', '{count} notifications', props.app.unread, { count: props.app.unread })})`
}) })
</script> </script>