Skip to content

Commit

Permalink
Fixed #15830 - Accessibility: Tree inside an Accordion (arrow navigat…
Browse files Browse the repository at this point in the history
…ion)
  • Loading branch information
mehmetcetin01140 committed Jun 12, 2024
1 parent e5f593e commit 2c04020
Showing 1 changed file with 8 additions and 11 deletions.
19 changes: 8 additions & 11 deletions src/app/components/accordion/accordion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -230,11 +230,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy {

accordion: Accordion;

constructor(
@Inject(forwardRef(() => Accordion)) accordion: Accordion,
public el: ElementRef,
public changeDetector: ChangeDetectorRef
) {
constructor(@Inject(forwardRef(() => Accordion)) accordion: Accordion, public el: ElementRef, public changeDetector: ChangeDetectorRef) {
this.accordion = accordion as Accordion;
this.id = UniqueComponentId();
}
Expand Down Expand Up @@ -441,10 +437,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {

public tabs: AccordionTab[] = [];

constructor(
public el: ElementRef,
public changeDetector: ChangeDetectorRef
) {}
constructor(public el: ElementRef, public changeDetector: ChangeDetectorRef) {}

@HostListener('keydown', ['$event'])
onKeydown(event) {
Expand Down Expand Up @@ -481,8 +474,12 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
return tagName?.toLowerCase() === 'textarea';
}

focusedElementIsAccordionHeader() {
return document.activeElement.tagName.toLowerCase() === 'a' && document.activeElement.classList.contains('p-accordion-header-link');
}

onTabArrowDownKey(event) {
if (!this.isInput(event) && !this.isTextArea(event)) {
if (!this.isInput(event) && !this.isTextArea(event) && this.focusedElementIsAccordionHeader()) {
const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement.parentElement);
nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);

Expand All @@ -491,7 +488,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
}

onTabArrowUpKey(event) {
if (!this.isInput(event) && !this.isTextArea(event)) {
if (!this.isInput(event) && !this.isTextArea(event) && this.focusedElementIsAccordionHeader()) {
const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement.parentElement);
prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);

Expand Down

0 comments on commit 2c04020

Please sign in to comment.