picocrank 1.26.0 → 1.28.0

package/vue/components/Tabs.vue

@@ -18,11 +18,14 @@
 					v-for="(tab, index) in tabs"
 					:key="getTabKey(tab, index)"
 					:ref="(el) => setTabRef(getTabKey(tab, index), el)"
-					:class="['tab-button', { active: isTabSelected(tab, index) }]"
+					:class="['tab-button', { active: isTabSelected(tab, index), disabled: isTabDisabled(tab) }]"
+					:disabled="isTabDisabled(tab)"
 					:aria-selected="isTabSelected(tab, index) ? 'true' : 'false'"
+					:aria-disabled="isTabDisabled(tab) ? 'true' : undefined"
 					:aria-controls="`tab-panel-${getTabKey(tab, index)}`"
 					:id="`tab-${getTabKey(tab, index)}`"
-					:tabindex="isTabFocused(tab, index) ? 0 : -1"
+					:tabindex="tabTabIndex(tab, index)"
+					:title="tab.disabledTitle || undefined"
 					role="tab"
 					type="button"
 					@click="onTabClick(getTabKey(tab, index))"
@@ -104,18 +107,66 @@ const emit = defineEmits(['tab-change'])
 
 const tabRefs = new Map()
 
-function getInitialTabId() {
-	if (props.defaultTab !== null) {
-		return props.defaultTab
+const activeTabId = ref(null)
+const focusedTabId = ref(null)
+
+function isTabDisabled(tab) {
+	return tab.disabled === true
+}
+
+function getFirstEnabledIndex() {
+	return props.tabs.findIndex((tab) => !isTabDisabled(tab))
+}
+
+function getLastEnabledIndex() {
+	for (let index = props.tabs.length - 1; index >= 0; index -= 1) {
+		if (!isTabDisabled(props.tabs[index])) {
+			return index
+		}
+	}
+	return -1
+}
+
+function getFirstEnabledTabKey() {
+	const index = getFirstEnabledIndex()
+	if (index < 0) {
+		return null
 	}
-	if (props.tabs.length > 0) {
-		return getTabKey(props.tabs[0], 0)
+	return getTabKey(props.tabs[index], index)
+}
+
+function resolveSelectableTabId(tabKey) {
+	if (tabKey !== null && tabKey !== undefined) {
+		const index = props.tabs.findIndex((tab, i) => getTabKey(tab, i) === tabKey)
+		if (index >= 0 && !isTabDisabled(props.tabs[index])) {
+			return tabKey
+		}
+	}
+	return getFirstEnabledTabKey()
+}
+
+function tabTabIndex(tab, index) {
+	if (isTabDisabled(tab)) {
+		return -1
 	}
-	return null
+	return isTabFocused(tab, index) ? 0 : -1
 }
 
-const activeTabId = ref(getInitialTabId())
-const focusedTabId = ref(getInitialTabId())
+function findNextEnabledIndex(fromIndex, step) {
+	const length = props.tabs.length
+	if (length === 0) {
+		return fromIndex
+	}
+
+	for (let offset = 1; offset <= length; offset += 1) {
+		const index = (fromIndex + step * offset + length * 100) % length
+		if (!isTabDisabled(props.tabs[index])) {
+			return index
+		}
+	}
+
+	return fromIndex
+}
 
 function getTabKey(tab, index) {
 	return tab.id ?? index
@@ -146,10 +197,14 @@ function focusTab(tabKey) {
 }
 
 function selectTab(tabKey, { emitChange = true } = {}) {
+	const index = tabIndexForKey(tabKey)
+	if (index >= 0 && isTabDisabled(props.tabs[index])) {
+		return
+	}
+
 	if (activeTabId.value !== tabKey) {
 		activeTabId.value = tabKey
 		if (emitChange) {
-			const index = tabIndexForKey(tabKey)
 			const activeTab = index >= 0 ? props.tabs[index] : null
 			emit('tab-change', activeTab, tabKey)
 		}
@@ -166,8 +221,11 @@ function moveFocusToIndex(index, { activate = props.activation === 'auto' } = {}
 		return
 	}
 
-	const normalized = (index + props.tabs.length) % props.tabs.length
-	const tabKey = getTabKey(props.tabs[normalized], normalized)
+	if (index < 0 || index >= props.tabs.length || isTabDisabled(props.tabs[index])) {
+		return
+	}
+
+	const tabKey = getTabKey(props.tabs[index], index)
 	focusedTabId.value = tabKey
 
 	if (activate) {
@@ -177,6 +235,14 @@ function moveFocusToIndex(index, { activate = props.activation === 'auto' } = {}
 	nextTick(() => focusTab(tabKey))
 }
 
+function moveFocusByStep(fromIndex, step, { activate = props.activation === 'auto' } = {}) {
+	const nextIndex = findNextEnabledIndex(fromIndex, step)
+	if (nextIndex === fromIndex && isTabDisabled(props.tabs[fromIndex])) {
+		return
+	}
+	moveFocusToIndex(nextIndex, { activate })
+}
+
 function tabKeyFromElement(tabEl) {
 	const suffix = tabEl.id.slice('tab-'.length)
 	const index = props.tabs.findIndex((tab, i) => String(getTabKey(tab, i)) === suffix)
@@ -204,34 +270,34 @@ function onTabListKeydown(event) {
 		case 'ArrowRight':
 			if (!isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index + 1)
+				moveFocusByStep(index, 1)
 			}
 			break
 		case 'ArrowLeft':
 			if (!isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index - 1)
+				moveFocusByStep(index, -1)
 			}
 			break
 		case 'ArrowDown':
 			if (isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index + 1)
+				moveFocusByStep(index, 1)
 			}
 			break
 		case 'ArrowUp':
 			if (isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index - 1)
+				moveFocusByStep(index, -1)
 			}
 			break
 		case 'Home':
 			event.preventDefault()
-			moveFocusToIndex(0)
+			moveFocusToIndex(getFirstEnabledIndex())
 			break
 		case 'End':
 			event.preventDefault()
-			moveFocusToIndex(props.tabs.length - 1)
+			moveFocusToIndex(getLastEnabledIndex())
 			break
 		case ' ':
 		case 'Enter':
@@ -260,20 +326,25 @@ function syncTabIdsAfterListChange() {
 		return
 	}
 
-	const activeStillExists = tabIndexForKey(activeTabId.value) >= 0
-	if (!activeStillExists) {
-		const firstKey = getTabKey(props.tabs[0], 0)
+	const activeIndex = tabIndexForKey(activeTabId.value)
+	const activeIsValid = activeIndex >= 0 && !isTabDisabled(props.tabs[activeIndex])
+	if (!activeIsValid) {
+		const firstKey = getFirstEnabledTabKey()
 		activeTabId.value = firstKey
 		focusedTabId.value = firstKey
 		return
 	}
 
-	if (tabIndexForKey(focusedTabId.value) < 0) {
+	const focusedIndex = tabIndexForKey(focusedTabId.value)
+	const focusedIsValid = focusedIndex >= 0 && !isTabDisabled(props.tabs[focusedIndex])
+	if (!focusedIsValid) {
 		focusedTabId.value = activeTabId.value
 	}
 }
 
 onMounted(() => {
+	activeTabId.value = resolveSelectableTabId(props.defaultTab)
+	focusedTabId.value = activeTabId.value
 	syncTabIdsAfterListChange()
 })
 
@@ -357,7 +428,7 @@ defineExpose({
 	position: relative;
 }
 
-.tab-button:hover:not(.active) {
+.tab-button:hover:not(.active):not(:disabled) {
 	color: var(--tab-hover-fg);
 	background-color: var(--tab-hover-bg);
 }
@@ -368,6 +439,25 @@ defineExpose({
 	border-bottom-color: transparent;
 }
 
+.tab-button:disabled,
+.tab-button.disabled {
+	cursor: not-allowed;
+	color: var(--disabled-text-color);
+	opacity: 0.72;
+}
+
+.tab-button:disabled:hover,
+.tab-button.disabled:hover {
+	color: var(--disabled-text-color);
+	background-color: transparent;
+}
+
+.tab-button:disabled.active,
+.tab-button.disabled.active {
+	background-color: var(--tab-active-bg);
+	color: var(--disabled-text-color);
+}
+
 .tabs-vertical .tab-button {
 	width: 100%;
 	justify-content: flex-start;
@@ -426,7 +516,7 @@ defineExpose({
 	z-index: 1;
 }
 
-.tab-button:hover:not(.active):focus-visible {
+.tab-button:hover:not(.active):not(:disabled):focus-visible {
 	color: var(--tab-hover-fg);
 	background-color: var(--tab-hover-bg);
 }

package/vue/components/form-validation.spec.js

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+import {
+	flushControlState,
+	MIN_COMMENTS_LENGTH,
+	mountLoginValidationForm,
+	mountValidationForm,
+} from '../test/formTestUtils.js'
+
+describe('form validation integration', () => {
+	it('blocks submit and surfaces native required validation for empty email', async () => {
+		const { wrapper, submitted } = mountValidationForm()
+
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(false)
+		expect(wrapper.find('#email').element.validationMessage).not.toBe('')
+	})
+
+	it('shows computed email format errors as the user types', async () => {
+		const { wrapper } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('not-an-email')
+		await flushControlState()
+
+		expect(wrapper.find('#email').element.getAttribute('aria-invalid')).toBe('true')
+		expect(wrapper.text()).toContain('Enter a valid email address.')
+	})
+
+	it('clears email errors when a valid address is entered', async () => {
+		const { wrapper } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('not-an-email')
+		await flushControlState()
+		await wrapper.find('#email').setValue('user@example.com')
+		await flushControlState()
+
+		expect(wrapper.find('#email').element.hasAttribute('aria-invalid')).toBe(false)
+		expect(wrapper.findAll('.form-field-error')).toHaveLength(0)
+	})
+
+	it('shows comments length validation only when comments are non-empty', async () => {
+		const { wrapper } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		await wrapper.find('#comments').setValue('Too short')
+		await flushControlState()
+
+		expect(wrapper.text()).toContain(`Comments must be at least ${MIN_COMMENTS_LENGTH} characters.`)
+	})
+
+	it('allows submit when email is valid and comments are empty', async () => {
+		const { wrapper, submitted } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(true)
+	})
+
+	it('blocks submit for conflicting accessibility selections via validate()', async () => {
+		const { wrapper, submitted, formData } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		formData.value.accessibility = ['high-contrast', 'low-contrast']
+		await flushControlState()
+
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(false)
+		expect(wrapper.text()).toContain('High contrast and low contrast UI cannot both be selected.')
+	})
+
+	it('submits when accessibility selections are compatible', async () => {
+		const { wrapper, submitted, formData } = mountValidationForm()
+
+		await wrapper.find('#email').setValue('user@example.com')
+		formData.value.accessibility = ['high-contrast']
+		await flushControlState()
+
+		await wrapper.find('button[type="submit"]').trigger('click')
+		await flushControlState()
+
+		expect(submitted.value).toBe(true)
+	})
+})
+
+describe('Login-style server validation', () => {
+	it('maps password errors to the password field', async () => {
+		const { wrapper } = mountLoginValidationForm()
+
+		wrapper.vm.applyServerErrors({ password: 'Incorrect password.' })
+		await flushControlState()
+
+		expect(wrapper.find('#password').element.getAttribute('aria-invalid')).toBe('true')
+		expect(wrapper.text()).toContain('Incorrect password.')
+		expect(wrapper.find('.login-form-error').exists()).toBe(false)
+	})
+
+	it('maps server failures to a form-level NotificationBlock', async () => {
+		const { wrapper } = mountLoginValidationForm()
+
+		wrapper.vm.applyServerErrors({ form: 'Unable to reach authentication service.' })
+		await flushControlState()
+
+		expect(wrapper.find('.login-form-error').exists()).toBe(true)
+		expect(wrapper.find('.login-form-error').attributes('role')).toBe('alert')
+		expect(wrapper.text()).toContain('Unable to reach authentication service.')
+		expect(wrapper.find('#username').element.hasAttribute('aria-invalid')).toBe(false)
+	})
+
+	it('clears field errors when the user edits the control', async () => {
+		const { wrapper, passwordError } = mountLoginValidationForm()
+
+		wrapper.vm.applyServerErrors({ password: 'Incorrect password.' })
+		await flushControlState()
+
+		await wrapper.find('#password').setValue('new-secret')
+		await flushControlState()
+
+		expect(passwordError.value).toBe('')
+		expect(wrapper.find('#password').element.hasAttribute('aria-invalid')).toBe(false)
+	})
+})

package/vue/examples/App.vue

@@ -2,7 +2,8 @@
 	<Navigation ref="navigation">
 		<Navigation ref="topBarNavigation">
 			<Header
-				username="Guest"
+				:username="headerUsername"
+				:login-route="headerLoginRoute"
 				@toggleSidebar="toggleSidebar"
 				@logoClick="goToIndex"
 				@userClick="goToUserDetails"
@@ -85,6 +86,8 @@
 	const includeSupplementalThemes = ref(true);
 	const topBarEnabled = ref(false);
 	const breadcrumbsEnabled = ref(true);
+	const headerUsername = ref('tester');
+	const headerLoginRoute = { name: 'Login' };
 
 	const { discoverThemes } = initCustomTheme({ includeSupplementalThemes: true });
 
@@ -134,6 +137,10 @@
 		breadcrumbsEnabled.value = !breadcrumbsEnabled.value;
 	}
 
+	function setHeaderUsername(username) {
+		headerUsername.value = username;
+	}
+
 	async function dummyFetchResults(_query, { signal } = {}) {
 		await new Promise((resolve, reject) => {
 			const timer = setTimeout(resolve, 1500)
@@ -200,6 +207,8 @@
 	provide('toggleTopBarEnabled', toggleTopBarEnabled);
 	provide('breadcrumbsEnabled', breadcrumbsEnabled);
 	provide('toggleBreadcrumbsEnabled', toggleBreadcrumbsEnabled);
+	provide('headerUsername', headerUsername);
+	provide('setHeaderUsername', setHeaderUsername);
 
 	watch(quickSearchRef, (quickSearch) => {
 		if (quickSearch) {

package/vue/examples/FormExample.vue

@@ -22,7 +22,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Role" fake>
+			<FormField label="Role" component-has-label>
 				<RadioGroup
 					v-model="formData.role"
 					name="role"
@@ -30,7 +30,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Term" fake>
+			<FormField label="Term" component-has-label>
 				<RadioGroup
 					v-model="formData.term"
 					name="term"
@@ -52,7 +52,8 @@
 
 			<FormField
 				label="Compensation"
-				fake
+				component-has-label
+				label-required
 				description-above
 				description="Select the incentive plan that applies to this role."
 				docs-url="https://github.com/jamesread/femtocrank"
@@ -68,11 +69,13 @@
 
 			<FormField
 				label="Accessibility requirements"
-				fake
+				component-has-label
 				description-above
 				description="Choose any accommodations needed for this role."
 				docs-url="https://www.w3.org/WAI/fundamentals/accessibility-intro/"
 				docs-url-title="Web accessibility introduction"
+				:validate="validateAccessibilityRequirements"
+				:validate-deps="[formData.accessibility]"
 			>
 				<CheckGroup
 					v-model="formData.accessibility"
@@ -84,6 +87,7 @@
 			<FormField
 				label="Email"
 				for="email"
+				:error="emailError"
 				description="We'll use this address for account notifications only."
 				docs-url="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email"
 				docs-url-title="HTML email input reference"
@@ -149,7 +153,7 @@
 				/>
 			</FormField>
 
-			<FormField label="Newsletters" fake>
+			<FormField label="Newsletters" component-has-label>
 				<div>
 					<label>
 						<input 
@@ -174,7 +178,8 @@
 			<FormField
 				label="Comments"
 				for="comments"
-				description="Optional feedback or notes about this submission."
+				:error="commentsError"
+				description="Optional feedback or notes about this submission (minimum 50 characters when provided)."
 			>
 				<textarea
 					id="comments"
@@ -222,13 +227,39 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import Section from '../components/Section.vue'
 import FormLayout from '../components/FormLayout.vue'
 import FormField from '../components/FormField.vue'
 import RadioGroup from '../components/RadioGroup.vue'
 import CheckGroup from '../components/CheckGroup.vue'
 
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const MIN_COMMENTS_LENGTH = 50
+
+function createDefaultFormData() {
+	return {
+		name: '',
+		role: '',
+		term: '',
+		salary: '0',
+		compensation: 'sales-target-incentive',
+		accessibility: ['screen-reader', 'high-contrast'],
+		email: 'not-an-email',
+		isAdmin: false,
+		website: '',
+		favouriteFood: '',
+		favouriteColour: '#dee3e7',
+		favouriteNumber: 50,
+		newsletter1: false,
+		newsletter2: false,
+		comments: 'Too short.',
+		readonlyText: 'This is a readonly textarea.',
+		disabledText: 'This is a disabled textarea.',
+		datetime: '',
+	}
+}
+
 // From femtocrank/tests/simple.html — Role (default), Term (boolean), Compensation (list)
 const roleOptions = [
 	{ label: 'Sales', value: 'sales' },
@@ -251,36 +282,52 @@ const accessibilityOptions = [
 	{ label: 'Screen reader support', value: 'screen-reader' },
 	{ label: 'Keyboard navigation', value: 'keyboard-navigation' },
 	{ label: 'High contrast', value: 'high-contrast' },
+	{ label: 'Low contrast UI', value: 'low-contrast' },
 	{ label: 'Captions / transcripts', value: 'captions' },
 ]
 
-const formData = ref({
-	name: '',
-	role: '',
-	term: '',
-	salary: '0',
-	compensation: '',
-	accessibility: [],
-	email: '',
-	isAdmin: false,
-	website: '',
-	favouriteFood: '',
-	favouriteColour: '#dee3e7',
-	favouriteNumber: 50,
-	newsletter1: false,
-	newsletter2: false,
-	comments: '',
-	readonlyText: 'This is a readonly textarea.',
-	disabledText: 'This is a disabled textarea.',
-	datetime: ''
+function validateAccessibilityRequirements() {
+	const selected = formData.value.accessibility
+	if (selected.includes('high-contrast') && selected.includes('low-contrast')) {
+		return 'High contrast and low contrast UI cannot both be selected.'
+	}
+	return ''
+}
+
+const formData = ref(createDefaultFormData())
+
+const emailError = computed(() => {
+	const email = formData.value.email.trim()
+	if (!email) {
+		return 'Email is required.'
+	}
+	if (!EMAIL_PATTERN.test(email)) {
+		return 'Enter a valid email address.'
+	}
+	return ''
+})
+
+const commentsError = computed(() => {
+	const comments = formData.value.comments.trim()
+	if (comments.length > 0 && comments.length < MIN_COMMENTS_LENGTH) {
+		return `Comments must be at least ${MIN_COMMENTS_LENGTH} characters.`
+	}
+	return ''
 })
 
 const submitted = ref(false)
 
-function handleSubmit() {
+function handleSubmit(event) {
+	if (!event.target.reportValidity()) {
+		return
+	}
+
+	if (validateAccessibilityRequirements()) {
+		return
+	}
+
 	submitted.value = true
 	console.log('Form submitted:', formData.value)
-	// In a real application, you would send this data to a server
 	alert('Form submitted! Check the console and the form result below.')
 }
 
@@ -290,26 +337,7 @@ function handleCancel() {
 }
 
 function resetForm() {
-	formData.value = {
-		name: '',
-		role: '',
-		term: '',
-		salary: '0',
-		compensation: '',
-		accessibility: [],
-		email: '',
-		isAdmin: false,
-		website: '',
-		favouriteFood: '',
-		favouriteColour: '#dee3e7',
-		favouriteNumber: 50,
-		newsletter1: false,
-		newsletter2: false,
-		comments: '',
-		readonlyText: 'This is a readonly textarea.',
-		disabledText: 'This is a disabled textarea.',
-		datetime: ''
-	}
+	formData.value = createDefaultFormData()
 	submitted.value = false
 }
 </script>

package/vue/examples/Login.vue

@@ -1,6 +1,7 @@
 <template>
 	<Section title="Login" classes="">
-		<Login 
+		<Login
+			ref="loginRef"
 			@local-login="handleLocalLogin"
 			@oauth-login="handleOAuthLogin"
 			@tab-change="onTabChange"
@@ -9,9 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import Section from '../components/Section.vue';
 import Login from '../components/Login.vue';
 
+const loginRef = ref(null);
+
 // Handle local login
 function handleLocalLogin(credentials) {
 	console.log('Local login attempt:', {
@@ -41,6 +45,7 @@ function handleLocalLogin(credentials) {
 
 	// Placeholder success
 	alert(`Local login would authenticate: ${credentials.username}`);
+	loginRef.value?.setLocalLoginLoading(false);
 }
 
 // Handle OAuth login