feat!: Friendlier typing for the ActiveState.aria property (#111)

Author: webJose

src/lib/Link/Link.svelte

@@ -9,7 +9,7 @@
 	import type { Hash, RouteStatus } from '$lib/types.js';
 	import { assertAllowedRoutingMode, joinStyles } from '$lib/utils.js';
 	import { type Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { AriaAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 
 	type Props = HTMLAnchorAttributes &
 		ILinkContext & {
@@ -98,10 +98,17 @@
 		const result = { ...activeState };
 		result.class ??= linkContext?.activeState?.class;
 		result.style ??= linkContext?.activeState?.style;
-		result.aria = {
+		return result;
+	});
+	const calcActiveStateAria = $derived.by(() => {
+		const result = {} as AriaAttributes;
+		for (let [k, v] of Object.entries({
 			...linkContext?.activeState?.aria,
-			...activeState.aria
-		};
+			...activeState?.aria
+		})) {
+			// @ts-expect-error TS7053 - Since k is typed as string, the relationship can't be established.
+			result[`aria-${k}`] = v;
+		}
 		return result;
 	});
 	const isActive = $derived(isRouteActive(router, activeFor));
@@ -128,7 +135,7 @@
 	class={[cssClass, (isActive && calcActiveState?.class) || undefined]}
 	style={isActive ? joinStyles(style, calcActiveState?.style) : style}
 	onclick={handleClick}
-	{...(isActive ? calcActiveState?.aria : undefined)}
+	{...(isActive ? calcActiveStateAria : undefined)}
 	{...restProps}
 >
 	{@render children?.(location.getState(resolvedHash), router?.routeStatus)}

src/lib/Link/Link.svelte.test.ts

@@ -259,8 +259,8 @@ function activeStateTests(setup: ReturnType<typeof createRouterTestSetup>) {
                 activeFor: activeKey,
                 activeState: {
                     aria: {
-                        'aria-selected': 'true',
-                        'aria-current': 'page'
+                        selected: 'true',
+                        current: 'page'
                     }
                 },
                 children: content
@@ -296,8 +296,8 @@ function activeStateTests(setup: ReturnType<typeof createRouterTestSetup>) {
                 activeFor: activeKey,
                 activeState: {
                     aria: {
-                        'aria-selected': 'true',
-                        'aria-current': 'page'
+                        selected: 'true',
+                        current: 'page'
                     }
                 },
                 children: content
@@ -761,7 +761,7 @@ function linkContextTests(ru: RoutingUniverse) {
         const linkCtx: ILinkContext = {
             activeState: {
                 class: 'context-active',
-                aria: { 'aria-current': 'page' }
+                aria: { current: 'page' }
             }
         };
         const activeFor = 'test-route';

src/lib/behaviors/active.svelte.test.ts

@@ -422,7 +422,7 @@ describe("activeBehavior", () => {
                 key: routeKey,
                 class: "active-class",
                 style: "color: red;",
-                aria: { "aria-current": "page", "aria-selected": "true" }
+                aria: { current: "page", selected: "true" }
             };
 
             // Act
@@ -440,7 +440,7 @@ describe("activeBehavior", () => {
             const activeState: ActiveState & { key: string } = {
                 key: "test-route",
                 class: "active-class",
-                aria: { "aria-current": "page", "aria-selected": "true" }
+                aria: { current: "page", selected: "true" }
             };
 
             // Act
@@ -464,7 +464,7 @@ describe("activeBehavior", () => {
             const activeState: ActiveState & { key: string } = {
                 key: routeKey,
                 class: "active-class",
-                aria: { "aria-current": "page", "aria-selected": "true" }
+                aria: { current: "page", selected: "true" }
             };
 
             // Act
@@ -579,7 +579,7 @@ describe("activeBehavior", () => {
 
             test("Should apply new ARIA attributes whenever 'activeState.aria' changes.", async () => {
                 // Arrange.
-                const newAria = { "aria-current": "page" as const, "aria-selected": true };
+                const newAria = { current: "page" as const, selected: true };
                 const routeKey = "home";
                 const routeStatus: Record<string, RouteStatus> = {
                     [routeKey]: {
@@ -838,7 +838,7 @@ describe("activeBehavior", () => {
 
             test("Should apply new ARIA attributes whenever 'activeState.aria' changes.", () => {
                 // Arrange.
-                const newAria = { "aria-current": "page" as const, "aria-selected": true };
+                const newAria = { current: "page" as const, selected: true };
                 const routeKey = "home";
                 const routeStatus = $state<Record<string, RouteStatus>>({
                     [routeKey]: {

src/lib/behaviors/active.svelte.ts

@@ -52,7 +52,7 @@ export function activeBehavior(
             }
             if (activeState.aria) {
                 for (let [attr, value] of Object.entries(activeState.aria)) {
-                    el.setAttribute(attr, value);
+                    el.setAttribute(`aria-${attr}`, (value ?? '').toString());
                 }
             }
             return () => {
@@ -62,7 +62,7 @@ export function activeBehavior(
                 }
                 if (activeState.aria) {
                     for (let attr of Object.keys(activeState.aria)) {
-                        el.removeAttribute(attr);
+                        el.removeAttribute(`aria-${attr}`);
                     }
                 }
             };

src/lib/types.ts

@@ -294,6 +294,16 @@ export type NavigationCancelledEvent = NavigationEvent & {
     cause: any;
 };
 
+/**
+ * Friendlier type mapping of ARIA attributes for use in the `ActiveState.aria` property.
+ * 
+ * Instead of asking the user to write `{ aria: { 'aria-selected': true } }`, they can simply write
+ * `{ aria: { selected: true } }`.
+ */
+export type ActiveStateAriaAttributes = {
+    [K in keyof AriaAttributes as K extends `aria-${infer N}` ? `${N}` : never]?: AriaAttributes[K];
+}
+
 /**
  * Defines the possible settings that can be set in `Link` components to control when they are considered active and 
  * how they look like when active.
@@ -329,7 +339,7 @@ export type ActiveState = {
      * 
      * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
      */
-    aria?: AriaAttributes;
+    aria?: ActiveStateAriaAttributes;
 }
 
 /**