@nexdom/uimed-vue 2.0.0-beta.45 → 2.0.0-beta.46

package/AGENTS.md

@@ -153,7 +153,7 @@ Use an existing component (e.g. `button`) as the reference, and deliver all of t
 2. The `U`-prefixed export in `src/components/index.ts`.
 3. A usage guide at `docs/guide/components/<name>.md`, with `<demo>` examples (and a `<playground>` section when the component has configurable props), and an API reference at `docs/api/components/<name>.md` (props, events and slots tables). Both in Portuguese. In a demo's template inside a `.md` file, don't put an attribute with a template literal after one with an arrow function in the same tag: the Markdown type-check (`vue-tsc`) reads the `>` of `=>` as the end of the tag and fails with `TS1003`. Order the attributes so the template literal comes first.
 4. Both pages registered in the sidebar at `docs/.vitepress/config.ts`.
-5. `e2e/components/<name>.spec.ts` covering the guide's interactive examples and a "UI consistency" screenshot check (plus accessible snapshots where relevant). Commit the generated files under `__snapshots__`/`__screenshot__`.
+5. `e2e/components/<name>.spec.ts` covering the guide's interactive examples, an "accessibility" check (see [Testing conventions](#testing-conventions)) and a "UI consistency" screenshot check (plus accessible snapshots where relevant). Commit the generated files under `__snapshots__`/`__screenshot__`.
 6. The full CI sequence passing locally.
 
 ## Adding a new composable
@@ -163,7 +163,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 1. `src/composables/<group>/<name>.ts` and `__tests__/<name>.test.ts`, plus the types in the group's `types.ts`. If it relies on an internal component (as `useToast` relies on the internal `Toast` rendered by `UMain`), that component follows the component layout but isn't exported.
 2. The export in `src/composables/index.ts`, and its assertion in `src/composables/__tests__/index.test.ts`.
 3. A usage guide at `docs/guide/composables/<name>.md` and an API reference at `docs/api/composables/<name>.md`, both in Portuguese, registered in both sidebars at `docs/.vitepress/config.ts` and listed in `docs/api/index.md` and in the table of `docs/guide/index.md`. If it relies on `UMain` (like `useToast`), also mention it in `UMain`'s guide and API pages.
-4. `e2e/composables/<name>.spec.ts` covering the guide's examples and a "UI consistency" screenshot check.
+4. `e2e/composables/<name>.spec.ts` covering the guide's examples, an "accessibility" check (see [Testing conventions](#testing-conventions)) and a "UI consistency" screenshot check.
 5. The full CI sequence passing locally.
 
 ## Code conventions
@@ -178,7 +178,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - Reuse the shared internal composables for props that recur across components, so every component maps them to Vuetify the same way, instead of mapping them again:
   - `fullWidth`/`fullHeight`: `useFullWidth`/`useFullHeight` (`src/composables/dimensions/dimensions.ts`), applying Vuetify's `w-100`/`h-100` classes even where the component has `width`/`height` props.
   - `alignX`/`alignY`: `useAlignX`/`useAlignY` (`src/composables/alignment/alignment.ts`), with the `AlignX`/`AlignY` types from the group's `types.ts`.
-  - `color`: `useVuetifyColor` (`src/composables/colors/use-vuetify-color.ts`), with the `ColorVariant` type from the group's `types.ts`.
+  - `color`: `useVuetifyColor` (`src/composables/colors/use-vuetify-color.ts`), with the `ColorVariant` type from the group's `types.ts`. Where the color is the text's instead of a fill (e.g. `UButton`'s `ghost` variant), use `useVuetifyTextColor` (`use-vuetify-text-color.ts`) instead: the fills are too light to reach WCAG AA's contrast as text, so each one has a darker text shade in the theme.
 
   A new prop that does the same as one of these takes its name and type. When a second component needs a mapping that only one component has, move it into a shared composable first.
 
@@ -220,6 +220,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
 - With fake timers in jsdom, Vuetify transitions (e.g. of `VDialog`, `VMenu`) don't finish on their own. Emit the transition events on the Vuetify component (`wrapper.findComponent(VDialog).vm.$emit("afterLeave")`) or advance the timers with `await vi.runAllTimersAsync()`.
 - Coverage threshold is 100%; mutation testing threshold is 100% (break at 100). Don't add code paths without covering tests. Mutants that don't compile are reported as compile errors and don't count toward the score.
 - E2E tests (Playwright, `e2e/`) run against the built docs preview (`http://localhost:4173/uimed-vue/`). Snapshots/screenshots live under `__snapshots__`/`__screenshot__` next to each spec.
+- Every E2E spec has an "accessibility" `describe` that calls `expectNoA11yViolations(page)` from `e2e/utils.ts` at least once. It runs axe against WCAG 2.2 AA and its best practices on the page's demos and overlays, in both of the docs' color schemes (the demos keep the library's light theme on a background of their own in dark mode), and fails on any violation. Check each state that renders something new, too: open overlays (menus, dialogs, toasts) and every color of a variant whose text takes the color (as `button.spec.ts` does for `ghost`). Contrast is the most common failure: the theme's colors and text shades must keep 4.5:1, which `src/__tests__/index.test.ts` checks. Don't make a check pass by disabling rules or excluding elements: fix the cause, or stop and ask. The helper only disables the landmark rules that fail because of the docs' layout, with a comment saying why.
 - Before keeping a new screenshot as a baseline, open it and check it against how plain Vuetify renders the same component: overflowing content shows its scrollbar, buttons and cards keep their native paddings, nothing touches the edges or gets clipped. A screenshot that only "looks fine" isn't enough: name what you checked in your report.
 - Generate and update screenshots only on Linux, as CI does: in the Dev Container, or in the Playwright Docker image of the version in `package.json` (`mcr.microsoft.com/playwright:v<version>-noble`). Screenshots taken on Windows or macOS render fonts differently and fail in CI.
 - Update baselines with `--update-snapshots=changed`, scoped to the spec you changed. `--update-snapshots=all` also rewrites accessible snapshots (`.aria.yml`) that didn't need to change.

package/dist/components.d.ts

@@ -575,8 +575,8 @@ declare const __VLS_export$16: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  clearable: boolean;
   type: TextFieldType;
+  clearable: boolean;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts

package/dist/components.js

@@ -1,4 +1,4 @@
-import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
+import { a as messages, c as colorToVuetifyTextColor, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Czq2P-Z9.js";
 import { useLocale, useMask } from "vuetify";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
@@ -14,6 +14,13 @@ function routeToProps(route) {
 	const location = toValue(route);
 	return isExternalRoute(location) ? { href: location } : { to: location };
 }
+/**
+* Maps a menu item's route to its list item's props. An item without a route only runs its action,
+* so it's a button: Vuetify would make it a list item, which the menus' groups of links don't allow.
+*/
+function routeToListItemProps(route) {
+	return route ? routeToProps(route) : { role: "button" };
+}
 function isExternalRoute(route) {
 	return typeof route === "string" && route.startsWith("http");
 }
@@ -186,7 +193,8 @@ var skeleton_loader_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$3 = { class: "opacity-60" };
+const _hoisted_1$3 = { class: "text-high-emphasis" };
+const _hoisted_2$1 = { class: "text-medium-emphasis" };
 //#endregion
 //#region src/components/app-bar/app-bar.vue
 var app_bar_default = /* @__PURE__ */ defineComponent({
@@ -313,11 +321,14 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 											active: !notification.read,
 											title: notification.title,
 											subtitle: notification.subtitle,
-											"active-class": "text-primary"
-										}, createSlots({ _: 2 }, [notification.when ? {
+											"active-class": "text-primary-text"
+										}, createSlots({
+											subtitle: withCtx(({ subtitle }) => [createElementVNode("span", _hoisted_1$3, toDisplayString(subtitle), 1)]),
+											_: 2
+										}, [notification.when ? {
 											name: "append",
 											fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
-												default: withCtx(() => [createElementVNode("small", _hoisted_1$3, toDisplayString(notification.when), 1)]),
+												default: withCtx(() => [createCommentVNode(" No prop sets the secondary text color, which follows the theme's contrast "), createElementVNode("small", _hoisted_2$1, toDisplayString(notification.when), 1)]),
 												_: 2
 											}, 1024)]),
 											key: "0"
@@ -354,15 +365,24 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 								"data-testid": userMenuDataTestid.value
 							}, {
 								prepend: withCtx(() => [createVNode(unref(VAvatar), mergeProps(userAvatarProps.value, { color: "primary" }), null, 16)]),
-								default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), { nav: "" }, {
+								default: withCtx(() => [createVNode(unref(VDivider)), createVNode(unref(VList), {
+									nav: "",
+									role: "group"
+								}, {
 									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.user?.options, (option, index) => {
 										return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createBlock(unref(VDivider), {
 											key: 0,
 											class: "mt-1"
 										})) : createCommentVNode("v-if", true), isParentOption(option) ? (openBlock(), createBlock(unref(VListGroup), { key: 1 }, {
-											activator: withCtx(({ props }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, { title: option.description }), null, 16, ["title"])]),
+											activator: withCtx(({ props, isOpen }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, props, {
+												title: option.description,
+												"aria-expanded": isOpen,
+												role: void 0,
+												tag: "button",
+												type: "button"
+											}), null, 16, ["title", "aria-expanded"])]),
 											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (childOption, index) => {
-												return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToProps)(childOption.route), {
+												return openBlock(), createBlock(unref(VListItem), mergeProps({ key: index }, { ref_for: true }, unref(routeToListItemProps)(childOption.route), {
 													title: childOption.description,
 													onClick: childOption.action
 												}), null, 16, ["title", "onClick"]);
@@ -371,7 +391,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 										}, 1024)) : (openBlock(), createBlock(unref(VListItem), mergeProps({
 											key: 2,
 											title: option.description
-										}, { ref_for: true }, unref(routeToProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
+										}, { ref_for: true }, unref(routeToListItemProps)(option.route), { onClick: option.action }), null, 16, ["title", "onClick"]))], 64);
 									}), 128))]),
 									_: 1
 								})]),
@@ -805,15 +825,26 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 					type: "list-item@6",
 					color: "primary"
 				}, {
-					default: withCtx(() => [createVNode(unref(VList), { nav: "" }, {
+					default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links "), createVNode(unref(VList), {
+						nav: "",
+						role: "group"
+					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
 							return openBlock(), createElementBlock(Fragment, { key: index }, [isParentItem(item) ? (openBlock(), createBlock(unref(VListGroup), { key: 0 }, {
-								activator: withCtx(({ props: activatorProps }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, {
+								activator: withCtx(({ props: activatorProps, isOpen }) => [createVNode(unref(VListItem), mergeProps({ ref_for: true }, activatorProps, {
 									title: item.description,
-									"prepend-icon": item.icon && unref(icons)[item.icon]
-								}), null, 16, ["title", "prepend-icon"])]),
+									"prepend-icon": item.icon && unref(icons)[item.icon],
+									"aria-expanded": isOpen,
+									role: void 0,
+									tag: "button",
+									type: "button"
+								}), null, 16, [
+									"title",
+									"prepend-icon",
+									"aria-expanded"
+								])]),
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (childItem, childIndex) => {
-									return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToProps)(childItem.route), {
+									return openBlock(), createBlock(unref(VListItem), mergeProps({ key: childIndex }, { ref_for: true }, unref(routeToListItemProps)(childItem.route), {
 										title: childItem.description,
 										"prepend-icon": childItem.icon && unref(icons)[childItem.icon],
 										onClick: childItem.action
@@ -828,7 +859,7 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 								key: 1,
 								title: item.description,
 								"prepend-icon": item.icon && unref(icons)[item.icon]
-							}, { ref_for: true }, unref(routeToProps)(item.route), { onClick: item.action }), null, 16, [
+							}, { ref_for: true }, unref(routeToListItemProps)(item.route), { onClick: item.action }), null, 16, [
 								"title",
 								"prepend-icon",
 								"onClick"
@@ -962,6 +993,15 @@ var toast_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/colors/use-vuetify-text-color.ts
+/**
+* Maps a color to the theme color to use when it's the text color, e.g. in a ghost button, so it
+* keeps WCAG AA's contrast on the surface and background.
+*/
+function useVuetifyTextColor(color) {
+	return computed(() => colorToVuetifyTextColor[toValue(color) ?? "primary"]);
+}
+//#endregion
 //#region src/composables/button/button.ts
 const buttonVariantToVuetifyVariant = {
 	primary: "elevated",
@@ -994,6 +1034,15 @@ function useButtonType(type, route, blocked) {
 	});
 }
 /**
+* Maps the button's color to Vuetify's. A ghost button has no fill, so its color is the text's,
+* which takes the color's text shade to keep WCAG AA's contrast.
+*/
+function useButtonColor(color, variant) {
+	const fillColor = useVuetifyColor(color);
+	const textColor = useVuetifyTextColor(color);
+	return computed(() => toValue(variant) === "ghost" ? textColor.value : fillColor.value);
+}
+/**
 * The button's `form`, or `undefined` when it has a `route`, even while blocked, since `form`
 * doesn't apply to it.
 */
@@ -1048,7 +1097,7 @@ var button_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const variant = useButtonVariant(() => props.variant);
-		const color = useVuetifyColor(() => props.color);
+		const color = useButtonColor(() => props.color, () => props.variant);
 		const widthClass = useFullWidth(() => props.fullWidth);
 		const isDisabled = computed(() => props.disabled || props.loading);
 		const routeProps = useRouteProps(useButtonRoute(() => props.route, isDisabled));

package/dist/composables.js

@@ -1,4 +1,4 @@
-import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Ck2_ZW7T.js";
+import { i as useDialog, o as useToast, t as openDialog } from "./use-dialog-Czq2P-Z9.js";
 import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, toValue, watch } from "vue";
 import { isDeepEqual } from "@nexdom/shared/utils";
 import { onBeforeRouteLeave } from "vue-router";

package/dist/index.js

@@ -24,9 +24,18 @@ function createUimed() {
 					success: "#A9EFC5",
 					warning: "#FFE596",
 					error: "#D92D20",
-					info: "#9ACBE5"
+					info: "#9ACBE5",
+					"on-primary": "#000000",
+					"primary-text": "#007A4A",
+					"success-text": "#16783E",
+					"info-text": "#277096",
+					"warning-text": "#846300",
+					"error-text": "#C92A1E"
 				},
-				variables: { "border-color": "#D0D5DD" }
+				variables: {
+					"border-color": "#D0D5DD",
+					"medium-emphasis-opacity": .7
+				}
 			} }
 		}
 	});

package/dist/{use-dialog-Ck2_ZW7T.js → use-dialog-Czq2P-Z9.js}

@@ -7,6 +7,19 @@ const colorToVuetifyColor = {
 	caution: "warning",
 	danger: "error"
 };
+/**
+* The theme colors to use when a color is the text color, on the surface or background, instead
+* of a fill. The fills are too light to reach WCAG AA's contrast as text, so each one has a darker
+* shade, except `secondary`, which is almost white and gives way to the theme's text color.
+*/
+const colorToVuetifyTextColor = {
+	primary: "primary-text",
+	secondary: "on-surface",
+	positive: "success-text",
+	informative: "info-text",
+	caution: "warning-text",
+	danger: "error-text"
+};
 //#endregion
 //#region src/composables/colors/use-vuetify-color.ts
 function useVuetifyColor(color) {
@@ -45,7 +58,8 @@ function toast(options) {
 	const toastMessage = {
 		text,
 		color: color.value,
-		prependIcon: `$${color.value}`
+		prependIcon: `$${color.value}`,
+		timerColor: `rgb(var(--v-theme-on-${color.value}))`
 	};
 	messages.value.push(toastMessage);
 }
@@ -121,4 +135,4 @@ function dialog(options) {
 	}, (value) => value);
 }
 //#endregion
-export { messages as a, useDialog as i, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };
+export { messages as a, colorToVuetifyTextColor as c, useDialog as i, owners as n, useToast as o, requests as r, useVuetifyColor as s, openDialog as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.45",
+  "version": "2.0.0-beta.46",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -52,6 +52,7 @@
     "postinstall": "playwright install --with-deps chromium"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@mdi/font": "^7.4.47",