Exercise variants: make the wizard operable by keyboard

The four adaptation cards in step 1 were divs with a click handler and no
tabindex, role or key handling. They are the only way to choose what the
variant changes, so a keyboard user could not select anything and the step's
Next button stayed disabled — the wizard was unusable without a mouse.

Make them real toggle buttons carrying aria-pressed. A button may only contain
phrasing content, so the heading, hint and icon wrapper become spans with
their own BEM classes, and the SCSS undoes the UA button styling the card
design does not want. Keyboard focus now also draws a visible ring.

Convert the three href-less disclosure anchors (phase step output, draft
warnings, result summary) to buttons with aria-expanded for the same reason.

The tray entry keeps role="button" — it hosts the cancel button, so it cannot
become a real button — and gains the Space handler that contract requires,
suppressing the default so the key does not scroll the page behind the
popover.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: Lara Dvorsek

src/main/webapp/app/core/navbar/variant-generation-tray/variant-generation-tray.component.html

@@ -57,6 +57,7 @@
                             data-testid="variant-tray-entry"
                             (click)="openJobEntry(job)"
                             (keydown.enter)="openJobEntry(job)"
+                            (keydown.space)="openJobEntryOnSpace($event, job)"
                         >
                             <div class="flex items-center justify-between gap-2">
                                 <span class="truncate font-semibold">{{ job.sourceExerciseTitle }}</span>

src/main/webapp/app/core/navbar/variant-generation-tray/variant-generation-tray.component.spec.ts

@@ -153,6 +153,18 @@ describe('VariantGenerationTrayComponent', () => {
         expect(routerMock.navigate).not.toHaveBeenCalled();
     });
 
+    it('opens an entry on Space without scrolling the page behind the tray', () => {
+        // The entry is a div with role="button" (it hosts the cancel button, so it cannot be a real button).
+        // That contract requires Space to activate it, and Space must not also scroll the page.
+        const event = { preventDefault: vi.fn() } as unknown as Event;
+
+        component.openJobEntryOnSpace(event, runningJob);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(component.monitorJobId()).toBe('job-1');
+        expect(component.monitorVisible()).toBe(true);
+    });
+
     it('flags failed jobs and drafts with warnings as needing attention', () => {
         expect(component.needsAttention(runningJob)).toBe(false);
         expect(component.needsAttention(completedJob)).toBe(false);

src/main/webapp/app/core/navbar/variant-generation-tray/variant-generation-tray.component.ts

@@ -159,4 +159,16 @@ export class VariantGenerationTrayComponent {
         this.monitorJobId.set(job.jobId);
         this.monitorVisible.set(true);
     }
+
+    /**
+     * Space activation for the entry. The entry carries `role="button"`, so it must respond to Space as well as
+     * Enter; the default has to be suppressed or the key scrolls the page behind the popover instead.
+     *
+     * @param event the keyboard event to suppress
+     * @param job   the job whose entry was activated
+     */
+    openJobEntryOnSpace(event: Event, job: VariantJob): void {
+        event.preventDefault();
+        this.openJobEntry(job);
+    }
 }

src/main/webapp/app/course/manage/exercises/create-variant-modal/exercise-variant-ai-modal-wizard.component.html

@@ -71,58 +71,72 @@
         <p class="text-muted-color text-sm mb-4">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.intro' | artemisTranslate }}</p>
 
         <div class="option-cards mb-6">
-            <div class="option-card" [class.option-card--selected]="changeDifficulty()" (click)="toggleDifficulty()" data-testid="variant-option-difficulty">
+            <button
+                type="button"
+                class="option-card"
+                [class.option-card--selected]="changeDifficulty()"
+                [attr.aria-pressed]="changeDifficulty()"
+                (click)="toggleDifficulty()"
+                data-testid="variant-option-difficulty"
+            >
                 @if (changeDifficulty()) {
                     <span class="option-card__check"><fa-icon [icon]="faCheck" /></span>
                 }
-                <div class="option-card__icon"><fa-icon [icon]="faGaugeHigh" /></div>
-                <h6>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.difficulty' | artemisTranslate }}</h6>
-                <p>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.difficultyHint' | artemisTranslate }}</p>
+                <span class="option-card__icon"><fa-icon [icon]="faGaugeHigh" /></span>
+                <span class="option-card__title">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.difficulty' | artemisTranslate }}</span>
+                <span class="option-card__hint">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.difficultyHint' | artemisTranslate }}</span>
                 <span class="option-card__cta">
                     @if (changeDifficulty()) {
                         {{ 'artemisApp.exerciseVariantGeneration.wizard.selected' | artemisTranslate }}
                     }
                 </span>
-            </div>
-            <div class="option-card" [class.option-card--selected]="changeDomain()" (click)="toggleDomain()">
+            </button>
+            <button type="button" class="option-card" [class.option-card--selected]="changeDomain()" [attr.aria-pressed]="changeDomain()" (click)="toggleDomain()">
                 @if (changeDomain()) {
                     <span class="option-card__check"><fa-icon [icon]="faCheck" /></span>
                 }
-                <div class="option-card__icon"><fa-icon [icon]="faEarthAmericas" /></div>
-                <h6>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.domain' | artemisTranslate }}</h6>
-                <p>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.domainHint' | artemisTranslate }}</p>
+                <span class="option-card__icon"><fa-icon [icon]="faEarthAmericas" /></span>
+                <span class="option-card__title">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.domain' | artemisTranslate }}</span>
+                <span class="option-card__hint">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.domainHint' | artemisTranslate }}</span>
                 <span class="option-card__cta">
                     @if (changeDomain()) {
                         {{ 'artemisApp.exerciseVariantGeneration.wizard.selected' | artemisTranslate }}
                     }
                 </span>
-            </div>
-            <div class="option-card" [class.option-card--selected]="changeNarrative()" (click)="toggleNarrative()" data-testid="variant-option-narrative">
+            </button>
+            <button
+                type="button"
+                class="option-card"
+                [class.option-card--selected]="changeNarrative()"
+                [attr.aria-pressed]="changeNarrative()"
+                (click)="toggleNarrative()"
+                data-testid="variant-option-narrative"
+            >
                 @if (changeNarrative()) {
                     <span class="option-card__check"><fa-icon [icon]="faCheck" /></span>
                 }
-                <div class="option-card__icon"><fa-icon [icon]="faBookOpen" /></div>
-                <h6>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.narrative' | artemisTranslate }}</h6>
-                <p>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.narrativeHint' | artemisTranslate }}</p>
+                <span class="option-card__icon"><fa-icon [icon]="faBookOpen" /></span>
+                <span class="option-card__title">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.narrative' | artemisTranslate }}</span>
+                <span class="option-card__hint">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.narrativeHint' | artemisTranslate }}</span>
                 <span class="option-card__cta">
                     @if (changeNarrative()) {
                         {{ 'artemisApp.exerciseVariantGeneration.wizard.selected' | artemisTranslate }}
                     }
                 </span>
-            </div>
-            <div class="option-card" [class.option-card--selected]="changeCustom()" (click)="toggleCustom()">
+            </button>
+            <button type="button" class="option-card" [class.option-card--selected]="changeCustom()" [attr.aria-pressed]="changeCustom()" (click)="toggleCustom()">
                 @if (changeCustom()) {
                     <span class="option-card__check"><fa-icon [icon]="faCheck" /></span>
                 }
-                <div class="option-card__icon"><fa-icon [icon]="faPenToSquare" /></div>
-                <h6>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.custom' | artemisTranslate }}</h6>
-                <p>{{ 'artemisApp.exerciseVariantGeneration.wizard.select.customHint' | artemisTranslate }}</p>
+                <span class="option-card__icon"><fa-icon [icon]="faPenToSquare" /></span>
+                <span class="option-card__title">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.custom' | artemisTranslate }}</span>
+                <span class="option-card__hint">{{ 'artemisApp.exerciseVariantGeneration.wizard.select.customHint' | artemisTranslate }}</span>
                 <span class="option-card__cta">
                     @if (changeCustom()) {
                         {{ 'artemisApp.exerciseVariantGeneration.wizard.selected' | artemisTranslate }}
                     }
                 </span>
-            </div>
+            </button>
         </div>
 
         <div class="flex justify-end mt-8">
@@ -397,10 +411,16 @@ <h6 class="font-semibold mb-6">{{ 'artemisApp.exerciseVariantGeneration.wizard.g
                                      field, oldest first (latest at the bottom) — earlier attempt errors stay
                                      inspectable after a later attempt succeeded. -->
                                 @if (hasAnyDetail(outputs)) {
-                                    <a class="block cursor-pointer text-sm no-underline" (click)="toggleStepOutput(phase)" data-testid="variant-wizard-step-output-toggle">
+                                    <button
+                                        type="button"
+                                        class="block w-full cursor-pointer border-0 bg-transparent p-0 text-start no-underline text-sm"
+                                        [attr.aria-expanded]="!!expandedPhases()[phase]"
+                                        (click)="toggleStepOutput(phase)"
+                                        data-testid="variant-wizard-step-output-toggle"
+                                    >
                                         <fa-icon [icon]="expandedPhases()[phase] ? faChevronDown : faChevronRight" class="mr-1" />
                                         {{ outputs[outputs.length - 1].summary }}
-                                    </a>
+                                    </button>
                                     @if (expandedPhases()[phase]) {
                                         @for (stepOutput of outputs; track $index) {
                                             @if (stepOutput.detail) {
@@ -496,10 +516,16 @@ <h6 class="font-semibold mb-6">{{ 'artemisApp.exerciseVariantGeneration.wizard.g
                     <div class="min-w-0">
                         <div class="font-semibold">{{ 'artemisApp.exerciseVariantGeneration.wizard.draftWithWarnings' | artemisTranslate }}</div>
                         @if (warnings().length > 0) {
-                            <a class="block cursor-pointer text-sm no-underline" (click)="toggleWarnings()" data-testid="variant-wizard-warnings-toggle">
+                            <button
+                                type="button"
+                                class="block w-full cursor-pointer border-0 bg-transparent p-0 text-start no-underline text-sm"
+                                [attr.aria-expanded]="warningsExpanded()"
+                                (click)="toggleWarnings()"
+                                data-testid="variant-wizard-warnings-toggle"
+                            >
                                 <fa-icon [icon]="warningsExpanded() ? faChevronDown : faChevronRight" class="mr-1" />
                                 {{ 'artemisApp.exerciseVariantGeneration.wizard.warningDetails' | artemisTranslate: { count: warnings().length } }}
-                            </a>
+                            </button>
                             @if (warningsExpanded()) {
                                 @for (warning of warnings(); track warning) {
                                     <pre class="step-output-detail" data-testid="variant-wizard-warning-detail">{{ warning }}</pre>
@@ -568,10 +594,16 @@ <h6 class="font-semibold mb-6">{{ 'artemisApp.exerciseVariantGeneration.wizard.g
                         <!-- Collapsed: the latest message's summary. Expanded: the phase's FULL history, each
                              message in its own scrollable code field, latest at the bottom. -->
                         @if (hasAnyDetail(entry.outputs)) {
-                            <a class="block cursor-pointer no-underline" (click)="toggleStepOutput(entry.phase)" data-testid="variant-wizard-summary-toggle">
+                            <button
+                                type="button"
+                                class="block w-full cursor-pointer border-0 bg-transparent p-0 text-start no-underline"
+                                [attr.aria-expanded]="!!expandedPhases()[entry.phase]"
+                                (click)="toggleStepOutput(entry.phase)"
+                                data-testid="variant-wizard-summary-toggle"
+                            >
                                 <fa-icon [icon]="expandedPhases()[entry.phase] ? faChevronDown : faChevronRight" class="mr-1" />
                                 {{ entry.outputs[entry.outputs.length - 1].summary }}
-                            </a>
+                            </button>
                             @if (expandedPhases()[entry.phase]) {
                                 @for (stepOutput of entry.outputs; track $index) {
                                     @if (stepOutput.detail) {

src/main/webapp/app/course/manage/exercises/create-variant-modal/exercise-variant-ai-modal-wizard.component.scss

@@ -136,6 +136,14 @@
 
 .option-card {
     position: relative;
+
+    // A real <button> so the cards are focusable and operable by keyboard; these declarations undo the
+    // UA button styling the card design does not want.
+    display: block;
+    width: 100%;
+    margin: 0;
+    font: inherit;
+    color: inherit;
     border: 1px solid var(--p-content-border-color);
     border-radius: 0.75rem;
     padding: 1.25rem 1rem;
@@ -146,6 +154,11 @@
     user-select: none;
     overflow: hidden;
 
+    &:focus-visible {
+        outline: 2px solid var(--primary);
+        outline-offset: 2px;
+    }
+
     &::before {
         content: '';
         position: absolute;
@@ -185,13 +198,15 @@
         transform: translateY(-2px);
     }
 
-    h6 {
+    &__title {
+        display: block;
         font-weight: 600;
         font-size: 0.87rem;
         margin-bottom: 0.3rem;
     }
 
-    p {
+    &__hint {
+        display: block;
         font-size: 0.75rem;
         color: var(--p-text-muted-color);
         line-height: 1.35;

src/main/webapp/app/course/manage/exercises/create-variant-modal/exercise-variant-ai-modal-wizard.component.spec.ts

@@ -279,6 +279,22 @@ describe('ExerciseVariantAiModalWizardComponent (storytelling)', () => {
         TestBed.resetTestingModule();
     });
 
+    it('exposes the adaptation cards as real toggle buttons so they can be operated without a mouse', () => {
+        const card = document.body.querySelector('[data-testid="variant-option-narrative"]');
+
+        // A native button is focusable and fires (click) on both Enter and Space; a plain div does neither, which
+        // left step 1 impossible to complete without a mouse and the Next button permanently disabled.
+        expect(card?.tagName).toBe('BUTTON');
+        expect(card?.getAttribute('type')).toBe('button');
+        expect(card?.getAttribute('aria-pressed')).toBe('false');
+
+        (card as HTMLButtonElement).click();
+        fixture.detectChanges();
+
+        expect(component.changeNarrative()).toBe(true);
+        expect(document.body.querySelector('[data-testid="variant-option-narrative"]')?.getAttribute('aria-pressed')).toBe('true');
+    });
+
     it('offers the storytelling option card and accepts it as the only selection', () => {
         expect(document.body.querySelector('[data-testid="variant-option-narrative"]')).not.toBeNull();