Improve accessibiltiy of env selector, improve mobile support, and message for those with no permission (#4304)

* Fix redirect from project ID * improve fix * improve accessibility of environment selector * lint * fix mobile accessibility of project settings and improve message for those without permission * disable envs when multiple + lint
2025-08-31 10:23:21 -07:00
parent 28337c88f6
commit 8058993578
12 changed files with 163 additions and 96 deletions
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -13,7 +13,7 @@
 			<div class="font-semibold flex justify-between gap-4">
 				<slot name="header">{{ header }}</slot>
 			</div>
-			<div class="font-normal">
+			<div class="font-normal text-sm sm:text-base">
 				<slot>{{ body }}</slot>
 			</div>
 		</div>
--- a/packages/ui/src/components/base/LargeRadioButton.vue
+++ b/packages/ui/src/components/base/LargeRadioButton.vue
@@ -1,5 +1,8 @@
 <template>
 	<button
+		role="radio"
+		:aria-checked="selected"
+		:aria-disabled="disabled"
 		class="px-4 py-3 text-left border-0 font-medium border-2 border-button-bg border-solid flex gap-2 transition-all cursor-pointer rounded-xl"
 		:class="
 			(selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent') +
@@ -10,8 +13,8 @@
 		:disabled="disabled"
 		@click="emit('select')"
 	>
-		<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" />
-		<RadioButtonIcon v-else class="h-5 w-5 shrink-0" />
+		<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" aria-hidden="true" />
+		<RadioButtonIcon v-else class="h-5 w-5 shrink-0" aria-hidden="true" />
 		<slot />
 	</button>
 </template>
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -50,20 +50,15 @@ const shown = computed(() => {
 function localizeIfPossible(message: MessageDescriptor | string) {
 	return typeof message === 'string' ? message : formatMessage(message)
 }
-
-const bodyText = computed(() => localizeIfPossible(props.text))
-const saveText = computed(() =>
-	localizeIfPossible(props.saving ? props.savingLabel : props.saveLabel),
-)
 </script>

 <template>
 	<Transition name="pop-in">
-		<div v-if="shown" class="fixed w-full z-10 left-0 bottom-0 p-4">
+		<div v-if="shown" class="fixed w-full z-10 left-0 p-4 unsaved-changes-popup">
 			<div
-				class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
+				class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
 			>
-				<p class="m-0 font-semibold">{{ bodyText }}</p>
+				<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
 				<div class="ml-auto flex gap-2">
 					<ButtonStyled v-if="canReset" type="transparent">
 						<button :disabled="saving" @click="(e) => emit('reset', e)">
@@ -74,7 +69,7 @@ const saveText = computed(() =>
 						<button :disabled="saving" @click="(e) => emit('save', e)">
 							<SpinnerIcon v-if="saving" class="animate-spin" />
 							<component :is="saveIcon" v-else />
-							{{ saveText }}
+							{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
 						</button>
 					</ButtonStyled>
 				</div>
@@ -103,4 +98,19 @@ const saveText = computed(() =>
 	translate: 0 0.25rem;
 	opacity: 0;
 }
+
+.unsaved-changes-popup {
+	transition: bottom 0.25s ease-in-out;
+	bottom: 0;
+}
+
+@media (any-hover: none) and (max-width: 640px) {
+	.unsaved-changes-popup {
+		bottom: var(--size-mobile-navbar-height);
+	}
+
+	.expanded-mobile-nav .unsaved-changes-popup {
+		bottom: var(--size-mobile-navbar-height-expanded);
+	}
+}
 </style>
--- a/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectSettingsEnvSelector.vue
@@ -3,6 +3,7 @@ import type { EnvironmentV3 } from '@modrinth/utils'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'

+import { commonProjectSettingsMessages } from '../../../../utils'
 import LargeRadioButton from '../../../base/LargeRadioButton.vue'

 const { formatMessage } = useVIntl()
@@ -23,6 +24,15 @@ type EnvironmentRadioOption = {
 	description?: MessageDescriptor
 }

+const subOptionLabel = defineMessage({
+	id: 'project.settings.environment.suboption.accessibility-suboption-group-label',
+	defaultMessage: 'Suboptions of {option}',
+})
+const optionLabelFormat = defineMessage({
+	id: 'project.settings.environment.suboption.accessibility-option-label',
+	defaultMessage: '{title}: {description}',
+})
+
 const OUTER_OPTIONS = {
 	client: {
 		title: defineMessage({
@@ -225,58 +235,68 @@ const simulateSave = ref(false)
 </script>

 <template>
-	<template
-		v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
-		:key="`env-option-${key}`"
-	>
-		<LargeRadioButton
-			class="!w-full"
-			:class="{ 'mt-2': index > 0 }"
-			:selected="currentOuterOption === key"
-			:disabled="disabled"
-			@select="
-				() => {
-					if (currentOuterOption !== key) {
-						currentSubOption = suboptions ? (Object.keys(suboptions)[0] as SubOptionKey) : undefined
-					}
-					currentOuterOption = key
-					simulateSave = false
-				}
-			"
+	<div role="radiogroup" :aria-label="formatMessage(commonProjectSettingsMessages.environment)">
+		<template
+			v-for="({ title, description, suboptions }, key, index) in OUTER_OPTIONS"
+			:key="`env-option-${key}`"
 		>
-			<span class="flex flex-col">
-				<span>{{ formatMessage(title) }}</span>
-				<span v-if="description" class="text-sm text-secondary">{{
-					formatMessage(description)
-				}}</span>
-			</span>
-		</LargeRadioButton>
-		<div v-if="suboptions" class="pl-8">
 			<LargeRadioButton
-				v-for="(
-					{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
-				) in suboptions"
-				:key="`env-option-${key}-${suboptionKey}`"
-				class="!w-full mt-2"
-				:class="{
-					'opacity-50': currentOuterOption !== key,
-				}"
-				:selected="currentSubOption === suboptionKey"
+				class="!w-full"
+				:class="{ 'mt-2': index > 0 }"
+				:selected="currentOuterOption === key"
 				:disabled="disabled"
+				:aria-label="formatMessage(optionLabelFormat, { title: formatMessage(title), description: formatMessage(description)})"
 				@select="
 					() => {
+						if (currentOuterOption !== key) {
+							currentSubOption = suboptions
+								? (Object.keys(suboptions)[0] as SubOptionKey)
+								: undefined
+						}
 						currentOuterOption = key
-						currentSubOption = suboptionKey
+						simulateSave = false
 					}
 				"
 			>
 				<span class="flex flex-col">
-					<span>{{ formatMessage(suboptionTitle) }}</span>
-					<span v-if="suboptionDescription" class="text-sm text-secondary">{{
-						formatMessage(suboptionDescription)
+					<span>{{ formatMessage(title) }}</span>
+					<span v-if="description" class="text-sm text-secondary">{{
+						formatMessage(description)
 					}}</span>
 				</span>
 			</LargeRadioButton>
-		</div>
-	</template>
+			<div
+				v-if="suboptions"
+				class="pl-8"
+				role="radiogroup"
+				:aria-label="formatMessage(subOptionLabel, { option: formatMessage(title) })"
+			>
+				<LargeRadioButton
+					v-for="(
+						{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
+					) in suboptions"
+					:key="`env-option-${key}-${suboptionKey}`"
+					class="!w-full mt-2"
+					:class="{
+						'opacity-50': currentOuterOption !== key,
+					}"
+					:selected="currentSubOption === suboptionKey"
+					:disabled="disabled"
+					@select="
+						() => {
+							currentOuterOption = key
+							currentSubOption = suboptionKey
+						}
+					"
+				>
+					<span class="flex flex-col">
+						<span>{{ formatMessage(suboptionTitle) }}</span>
+						<span v-if="suboptionDescription" class="text-sm text-secondary">{{
+							formatMessage(suboptionDescription)
+						}}</span>
+					</span>
+				</LargeRadioButton>
+			</div>
+		</template>
+	</div>
 </template>