feat(Link)!: Allow any aria- attribute in ActiveState

Author: webJose

src/lib/Link/Link.svelte

@@ -118,8 +118,8 @@
 	href={calcHref}
 	class={[cssClass, (isActive && activeState?.class) || undefined]}
 	style={isActive ? joinStyles(style, activeState?.style) : style}
-	aria-current={isActive ? (activeState?.ariaCurrent ?? 'page') : undefined}
 	onclick={handleClick}
+	{...(isActive ? activeState?.aria : undefined)}
 	{...restProps}
 >
 	{@render children?.(location.getState(resolvedHash), router?.routeStatus)}

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

@@ -233,7 +233,44 @@ function activeStateTests(setup: ReturnType<typeof createRouterTestSetup>) {
         expect(anchor?.getAttribute('style')).toContain('color: red');
     });
 
-    test("Should set aria-current when route is active.", async () => {
+    test("Should set any aria- attributes from activeState when route is active.", () => {
+        // Arrange.
+        const { hash, router, context } = setup;
+        const href = "/test/path";
+        const activeKey = "test-route";
+
+        // Mock active route status
+        if (router) {
+            Object.defineProperty(router, 'routeStatus', {
+                value: { [activeKey]: { match: false } },
+                configurable: true
+            });
+        }
+
+        // Act.
+        const { container } = render(Link, {
+            props: {
+                hash,
+                href,
+                activeState: {
+                    key: activeKey,
+                    aria: {
+                        'aria-selected': 'true',
+                        'aria-current': 'page'
+                    }
+                },
+                children: content
+            },
+            context
+        });
+        const anchor = container.querySelector('a');
+
+        // Assert.
+        expect(anchor?.getAttribute('aria-selected')).toBeNull();
+        expect(anchor?.getAttribute('aria-current')).toBeNull();
+    });
+
+    test("Should not set any aria- attributes when route is not active.", async () => {
         // Arrange.
         const { hash, router, context } = setup;
         const href = "/test/path";
@@ -252,14 +289,21 @@ function activeStateTests(setup: ReturnType<typeof createRouterTestSetup>) {
             props: {
                 hash,
                 href,
-                activeState: { key: activeKey, ariaCurrent: "page" },
+                activeState: {
+                    key: activeKey,
+                    aria: {
+                        'aria-selected': 'true',
+                        'aria-current': 'page'
+                    }
+                },
                 children: content
             },
             context
         });
         const anchor = container.querySelector('a');
 
         // Assert.
+        expect(anchor?.getAttribute('aria-selected')).toBe('true');
         expect(anchor?.getAttribute('aria-current')).toBe('page');
     });
 
@@ -678,15 +722,15 @@ describe("Routing Mode Assertions", () => {
     ])("Should throw error when $description and hash=$hash .", ({ options, hash }) => {
         // Arrange
         setRoutingOptions(options);
- 
+
         // Act & Assert
         expect(() => {
-            render(Link, { 
-                props: { 
-                    href: "/test", 
-                    hash, 
-                    children: content 
-                }, 
+            render(Link, {
+                props: {
+                    href: "/test",
+                    hash,
+                    children: content
+                },
             });
         }).toThrow();
     });

src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { ClassValue, HTMLAnchorAttributes } from "svelte/elements";
+import type { AriaAttributes, ClassValue, HTMLAnchorAttributes } from "svelte/elements";
 
 /**
  * Defines the data type of all `hash` properties found in almost all of the library's components.
@@ -318,13 +318,22 @@ export type ActiveState = {
      */
     style?: HTMLAnchorAttributes['style'] | Record<string, string>;
     /**
-     * Sets the value of the `aria-current` attribute when the link is active.
+     * Sets additional ARIA attributes when the link is active.
      * 
-     * The possible values are defined by the HTML specification.
+     * ### aria-selected
+     * Use it for `gridcell`, `option`, `row`, `tab`, and `treeitem` roles to indicate the current item in a
+     * selection.
      * 
-     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values)
+     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+     * 
+     * ### aria-current
+     * Use it for `article`, `cell`, `columnheader`, `document`, `feed`, `listitem`, `math`, `rowheader`,
+     * `section`, `table`, and `treeitem` roles to indicate the current item within a container or set of related
+     * items.
+     * 
+     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
      */
-    ariaCurrent?: HTMLAnchorAttributes['aria-current'];
+    aria?: AriaAttributes;
 }
 
 /**