fix: focus login errors
Quality / test (push) Canceled after 0s

This commit is contained in:
2026-09-11 11:51:59 -04:00
parent e3db8df92e
commit 38406f7c60
2 changed files with 11 additions and 2 deletions
+10 -2
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref } from 'vue'; import { nextTick, ref, watch } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useAuth } from '@/composables/useAuth.js'; import { useAuth } from '@/composables/useAuth.js';
@@ -8,6 +8,14 @@ const router = useRouter();
const { signIn, isLoading, error } = useAuth(); const { signIn, isLoading, error } = useAuth();
const email = ref(''); const email = ref('');
const password = ref(''); const password = ref('');
const errorMessage = ref(null);
watch(error, async (value) => {
if (!value) return;
errorMessage.value = value.message;
await nextTick();
document.getElementById('login-error')?.focus();
});
async function submit() { async function submit() {
try { try {
@@ -29,7 +37,7 @@ async function submit() {
<input id="admin-email" v-model="email" class="fixture-input" type="email" autocomplete="username" required /> <input id="admin-email" v-model="email" class="fixture-input" type="email" autocomplete="username" required />
<label class="fixture-label" for="admin-password">Password</label> <label class="fixture-label" for="admin-password">Password</label>
<input id="admin-password" v-model="password" class="fixture-input" type="password" autocomplete="current-password" required /> <input id="admin-password" v-model="password" class="fixture-input" type="password" autocomplete="current-password" required />
<p v-if="error" class="state state--error" role="alert">{{ error.message }}</p> <p v-if="errorMessage" id="login-error" class="state state--error" role="alert" tabindex="-1">{{ errorMessage }}</p>
<button class="button button--primary" type="submit" :disabled="isLoading">{{ isLoading ? 'Signing in...' : 'Sign in' }}</button> <button class="button button--primary" type="submit" :disabled="isLoading">{{ isLoading ? 'Signing in...' : 'Sign in' }}</button>
</form> </form>
</main> </main>
+1
View File
@@ -274,6 +274,7 @@ Remaining roadmap areas are approved external provider credentials/adapters, bro
- Admin sales and acquisition history rows now expose explicit screen-reader labels with record identity, status/date, and financial context. - Admin sales and acquisition history rows now expose explicit screen-reader labels with record identity, status/date, and financial context.
- Admin listing status cards now expose a programmatic product heading and status announcement for each listing. - Admin listing status cards now expose a programmatic product heading and status announcement for each listing.
- Saved-view rows now expose an accessible view name, and the image-limit setting includes range guidance tied to its input. - Saved-view rows now expose an accessible view name, and the image-limit setting includes range guidance tied to its input.
- Login errors now move focus to the announced error message so failed authentication is immediately available to keyboard and assistive-technology users.
## Local Commands ## Local Commands