wally-ui 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/src/app/components/breadcrumb/breadcrumb.html

@@ -1,18 +1,22 @@
-<nav class="">
-  <div class="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-400">
+<nav class="transition duration-200 ease-in-out" aria-label="Breadcrumb">
+  <ol class="flex items-center flex-wrap gap-x-2 gap-y-1 text-sm text-neutral-500 dark:text-neutral-400 antialiased">
     @for (item of items(); track item.label; let isLast = $last) {
       @if (!isLast && item.url) {
-        <a
-          [routerLink]="item.url"
-          class="hover:text-blue-500 transition-colors">
-          {{ item.label }}
-        </a>
-        <span class="text-gray-400 dark:text-gray-600">/</span>
+        <li class="flex items-center gap-2">
+          <a
+            [routerLink]="item.url"
+            class="hover:text-blue-500 transition-colors">
+            {{ item.label }}
+          </a>
+          <span class="text-neutral-500 dark:text-neutral-500" aria-hidden="true">/</span>
+        </li>
       } @else {
-        <span class="text-[#0a0a0a] dark:text-white font-medium">
-          {{ item.label }}
-        </span>
+        <li>
+          <span class="text-[#0a0a0a] dark:text-white font-medium" [attr.aria-current]="isLast ? 'page' : null">
+            {{ item.label }}
+          </span>
+        </li>
       }
     }
-  </div>
+  </ol>
 </nav>

package/playground/showcase/src/app/components/button/button.html

@@ -1,4 +1,12 @@
-<button [type]="type()" [disabled]="disabled() || loading()" (click)="handleClick()" class="
+<button
+    [type]="type()"
+    [disabled]="disabled() || loading()"
+    [attr.aria-label]="ariaLabel() || null"
+    [attr.aria-describedby]="ariaDescribedBy() || null"
+    [attr.aria-pressed]="ariaPressed()"
+    [attr.aria-busy]="loading()"
+    (click)="handleClick()"
+    class="
         group
         relative
         w-full

package/playground/showcase/src/app/components/button/button.ts

@@ -15,6 +15,11 @@ export class Button {
   loading: InputSignal<boolean> = input<boolean>(false);
   showNotification: InputSignal<boolean> = input<boolean>(false);
 
+  // Accessibility properties
+  ariaLabel: InputSignal<string> = input<string>('');
+  ariaDescribedBy: InputSignal<string> = input<string>('');
+  ariaPressed: InputSignal<boolean | undefined> = input<boolean | undefined>(undefined);
+
   click: OutputEmitterRef<void> = output<void>();
 
   handleClick(): void {

package/playground/showcase/src/app/components/input/input.html

@@ -1,5 +1,5 @@
 @if (label()) {
-<div class="py-2">
+<div class="py-2 antialiased">
     <label [for]="inputId" class="block text-sm font-medium text-[#0a0a0a] dark:text-white">
         {{ label() }}
     </label>
@@ -19,7 +19,7 @@
         focus:outline-none focus:ring-2 focus:ring-neutral-300
         bg-gray-100
         dark:bg-[#1b1b1b] dark:text-white dark:placeholder:text-neutral-500 dark:focus:ring-neutral-700
-        disabled:opacity-70 disabled:pointer-events-none disabled:cursor-not-allowed
+        disabled:opacity-70 disabled:pointer-events-none disabled:cursor-not-allowed antialiased
         transition duration-200 ease-in-out
         py-4 px-4" [ngClass]="{
             'pe-12': type() === 'password',
@@ -64,7 +64,7 @@
 
 @if (errorMessage()) {
 <div class="py-1" [id]="inputId + '-error'">
-    <span class="text-sm text-red-500 font-medium">
+    <span class="text-sm text-red-500 font-medium antialiased">
         {{ errorMessage() }}
     </span>
 </div>

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts

@@ -47,9 +47,29 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
+  // Accessibility
+  ariaLabel: `<wally-button ariaLabel="Save document">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+  </svg>
+</wally-button>`,
+
+  ariaPressed: `<wally-button [ariaPressed]="isToggled">
+  Toggle Setting
+</wally-button>`,
+
+  ariaBusy: `<wally-button [loading]="true">
+  Processing...
+</wally-button>`,
+
   // Properties
   propertyType: `type: string = 'button';`,
   propertyDisabled: `disabled: boolean = false;`,
   propertyLoading: `loading: boolean = false;`,
   propertyShowNotification: `showNotification: boolean = false;`,
+  propertyAriaLabel: `ariaLabel: string = '';`,
+  propertyAriaPressed: `ariaPressed: boolean | undefined = undefined;`,
+  propertyAriaDescribedBy: `ariaDescribedBy: string = '';`,
 };

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html

@@ -274,6 +274,57 @@
       </div>
     </section>
 
+    <!-- Accessibility -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Accessibility</h2>
+
+      <div class="space-y-8">
+        <!-- ARIA Label -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">ARIA Label for Icon-Only Buttons</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="ariaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button ariaLabel="Save document">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+              </svg>
+            </wally-button>
+          </div>
+        </div>
+
+        <!-- Toggle Button -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Toggle Button with ARIA Pressed</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="ariaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button [ariaPressed]="toggleState()">
+              Toggle Setting
+            </wally-button>
+          </div>
+        </div>
+
+        <!-- Loading State -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Loading State with ARIA Busy</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="ariaBusyCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button [loading]="true">
+              Processing...
+            </wally-button>
+          </div>
+          <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
+            Automatically sets <code class="bg-gray-200 dark:bg-[#121212] px-1 py-0.5 rounded text-xs">aria-busy="true"</code> when loading
+          </p>
+        </div>
+      </div>
+    </section>
+
     <!-- Properties -->
     <section class="mb-8">
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
@@ -306,6 +357,27 @@
           </div>
           <p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
         </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyAriaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Accessible label for screen readers (essential for icon-only buttons)</p>
+        </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyAriaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Indicates pressed state for toggle buttons</p>
+        </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyAriaDescribedByCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">References element(s) that describe the button</p>
+        </div>
       </div>
     </section>
 
@@ -324,16 +396,6 @@
           </p>
         </div>
 
-        <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Accessibility</h3>
-            <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">
-            ARIA labels, keyboard navigation, and screen reader support for better accessibility.
-          </p>
-        </div>
-
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
           <div class="flex items-center gap-2 mb-2">
             <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Ripple Effect</h3>

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts

@@ -38,13 +38,22 @@ export class ButtonDocs {
   iconCode = getFormattedCode(ButtonCodeExamples.iconWithText, 'html');
   iconNotificationCode = getFormattedCode(ButtonCodeExamples.iconOnly, 'html');
 
+  // Accessibility
+  ariaLabelCode = getFormattedCode(ButtonCodeExamples.ariaLabel, 'html');
+  ariaPressedCode = getFormattedCode(ButtonCodeExamples.ariaPressed, 'html');
+  ariaBusyCode = getFormattedCode(ButtonCodeExamples.ariaBusy, 'html');
+
   // Properties
   propertyTypeCode = getFormattedCode(ButtonCodeExamples.propertyType, 'typescript');
   propertyDisabledCode = getFormattedCode(ButtonCodeExamples.propertyDisabled, 'typescript');
   propertyLoadingCode = getFormattedCode(ButtonCodeExamples.propertyLoading, 'typescript');
   propertyShowNotificationCode = getFormattedCode(ButtonCodeExamples.propertyShowNotification, 'typescript');
+  propertyAriaLabelCode = getFormattedCode(ButtonCodeExamples.propertyAriaLabel, 'typescript');
+  propertyAriaPressedCode = getFormattedCode(ButtonCodeExamples.propertyAriaPressed, 'typescript');
+  propertyAriaDescribedByCode = getFormattedCode(ButtonCodeExamples.propertyAriaDescribedBy, 'typescript');
 
   clickMessage: WritableSignal<string> = signal<string>('');
+  toggleState: WritableSignal<boolean> = signal<boolean>(false);
 
   constructor(
     private aiPromptService: AiPromptService