inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-07 18:25:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-4252] Resolved accessibility issues around inherited permissions popover (#8222)

Browse Source 
* [ACS-4252] Inherited permissions popover can now be opened and closed by enter key press. Added configurableFocusTrap to popover when it is opened.

* [ACS-4252] Removed console.log statement
This commit is contained in:
swapnil-verma-gl 2023-02-14 19:46:10 +05:30 committed by GitHub
parent b1311c6966
commit bcfa488940
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
View File

@ -44,7 +44,6 @@
data-automation-id="permission-info-button"
[adf-pop-over]="inheritedPermission"
[target]="target"
[autofocusedElementSelector]="'.adf-sortable'"
#popOver="adfPopOver"
*ngIf="model.node.permissions.isInheritanceEnabled">
{{ (popOver.open ? 'PERMISSION_MANAGER.LABELS.HIDE' : 'PERMISSION_MANAGER.LABELS.SHOW') | translate }}

26
lib/content-services/src/lib/permission-manager/components/pop-over.directive.spec.ts
View File

@ -23,7 +23,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
@Component({
template: `
<div [adf-pop-over]="popOver" [autofocusedElementSelector]="'#test'" [target]="target" #target tabindex="0">
<div [adf-pop-over]="popOver" [autofocusedElementSelector]="'#test'" [target]="target" #target tabindex="0" [panelClass]="'adf-popover-test'">
</div>
<ng-template #popOver>
<div id="test" tabindex="0"></div>
@ -80,4 +80,28 @@ describe('PopOverDirective', () => {
}));
expect(popOverTrigger).not.toEqual(document.activeElement);
});
it('should open pop over on enter key press if pop over is not open', () => {
const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
fixture.detectChanges();
popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
key: 'Enter'
}));
fixture.detectChanges();
const popOverPanel = document.querySelector('.adf-popover-test');
expect(popOverPanel).toBeDefined();
});
it('should close pop over on enter key press if pop over is open', () => {
const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
fixture.detectChanges();
popOverTrigger.click();
fixture.detectChanges();
popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
key: 'Enter'
}));
fixture.detectChanges();
const popOverPanel = document.querySelector('.adf-popover-test');
expect(popOverPanel).toBeNull();
});
});

28
lib/content-services/src/lib/permission-manager/components/pop-over.directive.ts
View File

@ -30,6 +30,7 @@ import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overla
import { TemplatePortal } from '@angular/cdk/portal';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
@Directive({
selector: '[adf-pop-over]',
@ -50,10 +51,13 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
private destroy$ = new Subject();
private overlayRef!: OverlayRef;
private focusTrap: ConfigurableFocusTrap;
constructor(
private element: ElementRef,
private overlay: Overlay,
private vcr: ViewContainerRef
private vcr: ViewContainerRef,
private focusTrapFactory: ConfigurableFocusTrapFactory
) { }
ngOnInit(): void {
@ -61,7 +65,7 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
}
ngAfterViewInit(): void {
this.element.nativeElement.addEventListener('click', () => this.attachOverlay());
this.element.nativeElement.addEventListener('click', () => this.toggleOverlay());
this.element.nativeElement.addEventListener('keydown', this.preventDefaultForEnter);
}
@ -100,13 +104,27 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
}
@HostListener('keyup.enter')
private toggleOverlay(): void {
if (!this.overlayRef.hasAttached()) {
this.attachOverlay();
} else {
this.detachOverlay();
}
}
private attachOverlay(): void {
if (!this.overlayRef.hasAttached()) {
const periodSelectorPortal = new TemplatePortal(this.popOver, this.vcr);
this.overlayRef.attach(periodSelectorPortal);
this._open = true;
this.overlayRef.overlayElement.querySelector<HTMLElement>(this.autofocusedElementSelector).focus();
if (this.autofocusedElementSelector) {
this.overlayRef.overlayElement.querySelector<HTMLElement>(this.autofocusedElementSelector).focus();
}
if (this.popOver && !this.focusTrap) {
this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
}
}
}
@ -115,6 +133,10 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
if (this.overlayRef.hasAttached()) {
this.overlayRef.detach();
this._open = false;
this.focusTrap.destroy();
this.focusTrap = null;
this.element.nativeElement.focus();
}
}