fixup! fix(NcRadioGroup): fieldsets always need a label for accessibility

Author: susnux

src/components/NcRadioGroup/NcRadioGroup.vue

@@ -14,14 +14,15 @@ const modelValue = defineModel<string>({ required: false, default: '' })
 
 const props = defineProps<{
 	/**
-	 * If no visual `label` is set, then at least this aria label of the radio group must be set for accessibility.
+	 * Label of the radio group (accessible name).
+	 * It can be hidden visually if needed using `hidden-label` prop.
 	 */
-	ariaLabel?: string | undefined
+	label: string
 
 	/**
-	 * Optional visual label of the radio group
+	 * If set the label of the button group will not be shown visually but only for accessibility purposes.
 	 */
-	label?: string
+	labelHidden?: boolean
 
 	/**
 	 * Optional visual description of the radio group.
@@ -49,10 +50,8 @@ provide(INSIDE_RADIO_GROUP_KEY, computed(() => ({
 })))
 
 watchEffect(() => {
-	if (!props.ariaLabel && !props.label) {
-		warn('[NcRadioGroup] Either a visual "label" or an "ariaLabel" must be specified.')
-	} else if (props.ariaLabel !== undefined && props.label) {
-		warn('[NcRadioGroup] If a visual "label" is used then no "ariaLabel" should be specified, the accessible name is already inferred from the "label".')
+	if (!props.label) {
+		warn('[NcRadioGroup] For accessibility reasons a proper "label" has to be set.')
 	}
 })
 
@@ -80,12 +79,11 @@ function onUpdate(value: string) {
 
 <template>
 	<fieldset
-		:aria-label
 		:aria-describedby="description ? descriptionId : undefined"
 		:class="[{
 			[$style.radioGroup_buttonVariant]: buttonVariant,
 		}, $style.radioGroup]">
-		<legend v-if="label" :class="$style.radioGroup__label">
+		<legend :class="[$style.radioGroup__label, { 'hidden-visually': labelHidden }]">
 			{{ label }}
 		</legend>
 		<p v-if="description" :id="descriptionId" :class="$style.radioGroup__description">
@@ -188,7 +186,7 @@ The radio group also allows to create a button like styling together with the `N
 	<div>
 		<h4>With text labels</h4>
 		<div style="max-width: 400px">
-			<NcRadioGroup v-model="alignment" aria-label="Example alignment">
+			<NcRadioGroup v-model="alignment" label="Example alignment" label-hidden>
 				<NcRadioGroupButton label="Start" value="start" />
 				<NcRadioGroupButton label="Center" value="center" />
 				<NcRadioGroupButton label="End" value="end" />
@@ -199,7 +197,7 @@ The radio group also allows to create a button like styling together with the `N
 
 		<h4>With icons</h4>
 		<div style="max-width: 250px">
-			<NcRadioGroup v-model="alignment" aria-label="Example alignment with icons">
+			<NcRadioGroup v-model="alignment" label="Example alignment with icons" label-hidden>
 				<NcRadioGroupButton aria-label="Start" value="start">
 					<template #icon>
 						<NcIconSvgWrapper directional :path="mdiAlignHorizontalLeft" />