bug(aria/accordion): Enter/Space inside a panel toggles the accordion instead of activating the focused element

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Pressing Enter on a link (or Space on a button) inside an expanded ngAccordionPanel collapses the panel instead of activating the link/button.

ngAccordionGroup handles keydown for the whole group, including panel content, and calls preventDefault() on Enter/Space, so the focused element never gets activated. Arrow keys and Home/End are affected too, e.g. Home in an input inside a panel moves focus to the trigger.

The click handler only reacts to events coming from a trigger (_findTriggerPattern), the keydown handler doesn't check that:

components/src/aria/private/accordion/accordion.ts

Lines 73 to 97 in 952685f

    
           readonly keydown = computed(() => { 
        
             return new KeyboardEventManager() 
        
               .on(this.prevKey, () => this.navigationBehavior.prev(), {ignoreRepeat: false}) 
        
               .on(this.nextKey, () => this.navigationBehavior.next(), {ignoreRepeat: false}) 
        
               .on('Home', () => this.navigationBehavior.first()) 
        
               .on('End', () => this.navigationBehavior.last()) 
        
               .on(' ', () => this.toggle()) 
        
               .on('Enter', () => this.toggle()); 
        
           }); 
        
           /** The click event manager for the accordion trigger. */ 
        
           readonly click = computed(() => { 
        
             return new ClickEventManager<PointerEvent>().on((e: PointerEvent) => { 
        
               const item = this._findTriggerPattern(_getEventTarget(e)); 
        
               if (!item) return; 
        
               this.navigationBehavior.goto(item); 
        
               this.expansionBehavior.toggle(item); 
        
             }); 
        
           }); 
        
           /** Handles keydown events on the trigger, delegating to the group if not disabled. */ 
        
           onKeydown(event: KeyboardEvent): void { 
        
             this.keydown().handle(event); 
        
           }

Reproduction

StackBlitz link: https://stackblitz.com/edit/z5sxyaq6?file=src%2Fmain.ts

Steps to reproduce:

Expand "Section 1".
Tab to "Link inside panel" or "Button inside panel" and press Enter / Space.
Expand it again, click into the input and press Home.

Expected Behavior

The link/button is activated (shows up in the log) and the panel stays open. Home moves the caret in the input.

Actual Behavior

The panel collapses, nothing is activated. Home moves focus to the trigger.

Environment

Angular: 22.2.3
CDK/Material: @angular/aria 22.2.4 (also 22.1.6)
Browser(s): Chrome 155
Operating System (e.g. Windows, macOS, Ubuntu): Linux

Navigation Menu

Repository navigation

bug(aria/accordion): Enter/Space inside a panel toggles the accordion instead of activating the focused element #34011

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	readonly keydown = computed(() => {
	return new KeyboardEventManager()
	.on(this.prevKey, () => this.navigationBehavior.prev(), {ignoreRepeat: false})
	.on(this.nextKey, () => this.navigationBehavior.next(), {ignoreRepeat: false})
	.on('Home', () => this.navigationBehavior.first())
	.on('End', () => this.navigationBehavior.last())
	.on(' ', () => this.toggle())
	.on('Enter', () => this.toggle());
	});

	/** The click event manager for the accordion trigger. */
	readonly click = computed(() => {
	return new ClickEventManager<PointerEvent>().on((e: PointerEvent) => {
	const item = this._findTriggerPattern(_getEventTarget(e));
	if (!item) return;

	this.navigationBehavior.goto(item);
	this.expansionBehavior.toggle(item);
	});
	});

	/** Handles keydown events on the trigger, delegating to the group if not disabled. */
	onKeydown(event: KeyboardEvent): void {
	this.keydown().handle(event);
	}

bug(aria/accordion): Enter/Space inside a panel toggles the accordion instead of activating the focused element #34011

Description

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions