fix(a11y): Remove nav and radios in sidebar tabs

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud-libraries · Aug 24, 2023 · 9f55855 · 9f55855
1 parent 772f485
commit 9f55855
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 13 deletions.
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -28,7 +28,7 @@
 	<div class="app-sidebar-tabs">
 		<!-- tabs navigation -->
 		<!-- 33 and 34 code is for page up and page down -->
-		<nav v-if="hasMultipleTabs"
+		<div v-if="hasMultipleTabs"
 			role="tablist"
 			class="app-sidebar-tabs__nav"
 			@keydown.left.exact.prevent="focusPreviousTab"
@@ -50,7 +50,7 @@
 				class="app-sidebar-tabs__tab"
 				:class="{ active: tab.id === activeTab }"
 				role="tab"
-				type="radio"
+				type="button"
 				@update:checked="setActive(tab.id)">
 				<span class="app-sidebar-tabs__tab-caption">
 					{{ tab.name }}
@@ -61,7 +61,7 @@
 					</NcVNodes>
 				</template>
 			</NcCheckboxRadioSwitch>
-		</nav>
+		</div>
 
 		<!-- tabs content -->
 		<div :class="{'app-sidebar-tabs__content--multiple': hasMultipleTabs}"

diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -271,14 +271,12 @@ export default {
 		:style="cssVars"
 		class="checkbox-radio-switch">
 		<input :id="id"
-			:checked="isChecked"
+			class="checkbox-radio-switch__input"
 			:disabled="disabled"
-			:indeterminate="indeterminate"
-			:name="name"
 			:type="inputType"
 			:value="value"
-			class="checkbox-radio-switch__input"
-			@change="onToggle">
+			v-bind="inputProps"
+			v-on="inputListeners">
 		<label :for="id" class="checkbox-radio-switch__label">
 			<div class="checkbox-radio-switch__icon">
 				<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant
@@ -317,6 +315,7 @@ import ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'
 export const TYPE_CHECKBOX = 'checkbox'
 export const TYPE_RADIO = 'radio'
 export const TYPE_SWITCH = 'switch'
+export const TYPE_BUTTON = 'button'
 
 export default {
 	name: 'NcCheckboxRadioSwitch',
@@ -339,20 +338,29 @@ export default {
 		},
 
 		/**
-		 * Input name. Required for radio, optional for checkbox
+		 * Input name. Required for radio, optional for checkbox, and ignored
+		 * for button.
 		 */
 		name: {
 			type: String,
 			default: null,
 		},
 
 		/**
-		 * Type of the input. checkbox, radio or switch
+		 * Type of the input. checkbox, radio, switch, or button.
+		 *
+		 * Only use button when used in a `tablist` container and the
+		 * `tab` role is set.
 		 */
 		type: {
 			type: String,
 			default: 'checkbox',
-			validator: type => type === TYPE_CHECKBOX || type === TYPE_RADIO || type === TYPE_SWITCH,
+			validator: type => [
+				TYPE_CHECKBOX,
+				TYPE_RADIO,
+				TYPE_SWITCH,
+				TYPE_BUTTON,
+			].includes(type),
 		},
 
 		/**
@@ -426,6 +434,28 @@ export default {
 	emits: ['update:checked'],
 
 	computed: {
+		inputProps() {
+			if (this.type === TYPE_BUTTON) {
+				return null
+			}
+			return {
+				checked: this.isChecked,
+				indeterminate: this.indeterminate,
+				name: this.name,
+			}
+		},
+
+		inputListeners() {
+			if (this.type === TYPE_BUTTON) {
+				return {
+					click: this.onToggle,
+				}
+			}
+			return {
+				change: this.onToggle,
+			}
+		},
+
 		/**
 		 * Icon size
 		 *
@@ -455,8 +485,13 @@ export default {
 		 * @return {string}
 		 */
 		inputType() {
-			if (this.type === TYPE_RADIO) {
-				return TYPE_RADIO
+			const nativeTypes = [
+				TYPE_CHECKBOX,
+				TYPE_RADIO,
+				TYPE_BUTTON,
+			]
+			if (nativeTypes.includes(this.type)) {
+				return this.type
 			}
 			return TYPE_CHECKBOX
 		},