semmet-angular 0.24.0 → 0.25.0

package/README.md

@@ -15,12 +15,11 @@ Read the broader product direction in [PRODUCT_VISION.md](./PRODUCT_VISION.md).
 ## Usage
 
 ```
-npm install -D semmet-angular
 ng add semmet-angular
 ng generate semmet-angular:accordion my-faq
 ```
 
-`ng add semmet-angular` configures the delivery workflow once for the target application, including Playwright e2e support and npm scripts. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
+`ng add semmet-angular` installs the package and configures the delivery workflow once for the target application, including Playwright e2e support and npm scripts. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
 
 ## Generated tests
 
@@ -34,7 +33,7 @@ my-faq.spec.ts
 my-faq.e2e-spec.ts
 ```
 
-The unit test uses Angular's `TestBed` to verify that the standalone component can be created. The e2e test uses Playwright and becomes active as soon as the component is mounted in a route or host component. If the component has not been added to any rendered page yet, the generated e2e smoke test is skipped with a clear message instead of failing the whole suite.
+The unit test uses Angular's `TestBed` to verify the component through its public selector. Interactive components also generate behavior-focused tests for their ARIA state, keyboard flow, value changes, focus management, and open/close behavior. The e2e test uses Playwright and becomes active as soon as the component is mounted in a route or host component. If the component has not been added to any rendered page yet, the generated e2e smoke test is skipped with a clear message instead of failing the whole suite.
 
 After running `ng add semmet-angular`, use:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Accessible UI Delivery Kit for Angular: schematics that generate ARIA-conformant standalone components with styling, keyboard behavior, unit tests, and Playwright e2e smoke tests.",
   "publisher": "danilodevsilva",
   "license": "MIT",

package/src/accordion/files/__name@dasherize__/__name@dasherize__.html.template

@@ -25,7 +25,7 @@ Set [preserveContent]="false" on <<%= selector %>> to destroy panel content when
       [attr.aria-controls]="instanceId + '-panel-' + item.id()"
       [id]="instanceId + '-header-' + item.id()"
       (click)="toggle(item)"
-      (keydown)="navigateHeaders($event, i)"
+      (keydown)="navigateHeaders($event)"
     >
       {{ item.title() }}
     </button>

package/src/accordion/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -106,7 +106,7 @@ describe('<%= classify(name) %>', () => {
   });
 
   it('moves focus between headers with arrow, Home, and End keys', () => {
-    const [profileButton, settingsButton, billingButton] = buttons();
+    const [profileButton, settingsButton] = buttons();
 
     profileButton.focus();
     profileButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
@@ -115,9 +115,9 @@ describe('<%= classify(name) %>', () => {
 
     settingsButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
     fixture.detectChanges();
-    expect(document.activeElement).toBe(billingButton);
+    expect(document.activeElement).toBe(settingsButton);
 
-    billingButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    settingsButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
     fixture.detectChanges();
     expect(document.activeElement).toBe(profileButton);
   });

package/src/accordion/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -94,12 +94,17 @@ export class <%= classify(name) %> {
   }
 
   // Up/Down/Home/End move focus between headers — optional but APG-recommended keyboard support.
-  protected navigateHeaders(event: KeyboardEvent, index: number): void {
-    const buttons = this.headerButtons();
+  protected navigateHeaders(event: KeyboardEvent): void {
+    const buttons = this.headerButtons().filter((button) => !button.nativeElement.disabled);
     if (buttons.length === 0) {
       return;
     }
 
+    const index = buttons.findIndex((button) => button.nativeElement === event.currentTarget);
+    if (index === -1) {
+      return;
+    }
+
     let nextIndex: number;
     switch (event.key) {
       case 'ArrowDown':