diff --git a/src/cdk-experimental/popover-edit/popover-edit.spec.ts b/src/cdk-experimental/popover-edit/popover-edit.spec.ts index 789aacfbb033..cd1f666b72d3 100644 --- a/src/cdk-experimental/popover-edit/popover-edit.spec.ts +++ b/src/cdk-experimental/popover-edit/popover-edit.spec.ts @@ -62,6 +62,7 @@ const POPOVER_EDIT_DIRECTIVE_NAME = ` [cdkPopoverEdit]="nameEdit" [cdkPopoverEditColspan]="colspan" [cdkPopoverEditDisabled]="nameEditDisabled" + [cdkPopoverEditAriaLabel]="nameEditAriaLabel" `; const POPOVER_EDIT_DIRECTIVE_WEIGHT = `[cdkPopoverEdit]="weightEdit" cdkPopoverEditTabOut`; @@ -77,6 +78,7 @@ abstract class BaseTestComponent { preservedValues = new FormValueContainer(); nameEditDisabled = false; + nameEditAriaLabel: string | undefined = undefined; ignoreSubmitUnlessValid = true; clickOutBehavior: PopoverEditClickOutBehavior = 'close'; colspan: CdkPopoverEditColspan = {}; @@ -557,6 +559,22 @@ describe('CDK Popover Edit', () => { expect(component.lensIsOpen()).toBe(false); clearLeftoverTimers(); })); + + it('sets aria label and role dialog on the popup', fakeAsync(() => { + component.nameEditAriaLabel = 'Label of name!!'; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + // Uses Enter to open the lens. + component.openLens(); + fixture.detectChanges(); + + expect(component.lensIsOpen()).toBe(true); + const dialogElem = component.getEditPane()!; + expect(dialogElem.getAttribute('aria-label')).toBe('Label of name!!'); + expect(dialogElem.getAttribute('role')).toBe('dialog'); + clearLeftoverTimers(); + })); }); describe('focus manipulation', () => { diff --git a/src/cdk-experimental/popover-edit/table-directives.ts b/src/cdk-experimental/popover-edit/table-directives.ts index 83ef6479167f..58775ee0f8ed 100644 --- a/src/cdk-experimental/popover-edit/table-directives.ts +++ b/src/cdk-experimental/popover-edit/table-directives.ts @@ -173,6 +173,7 @@ const POPOVER_EDIT_INPUTS = [ {name: 'context', alias: 'cdkPopoverEditContext'}, {name: 'colspan', alias: 'cdkPopoverEditColspan'}, {name: 'disabled', alias: 'cdkPopoverEditDisabled'}, + {name: 'ariaLabel', alias: 'cdkPopoverEditAriaLabel'}, ]; /** @@ -196,6 +197,9 @@ export class CdkPopoverEdit implements AfterViewInit, OnDestroy { */ context?: C; + /** Aria label to set on the popover dialog element. */ + ariaLabel?: string; + /** * Specifies that the popup should cover additional table cells before and/or after * this one. @@ -302,7 +306,10 @@ export class CdkPopoverEdit implements AfterViewInit, OnDestroy { }); this.initFocusTrap(); - this.overlayRef.overlayElement.setAttribute('aria-role', 'dialog'); + this.overlayRef.overlayElement.setAttribute('role', 'dialog'); + if (this.ariaLabel) { + this.overlayRef.overlayElement.setAttribute('aria-label', this.ariaLabel); + } this.overlayRef.detachments().subscribe(() => this.closeEditOverlay()); } diff --git a/src/material-experimental/popover-edit/popover-edit.spec.ts b/src/material-experimental/popover-edit/popover-edit.spec.ts index 070c3edc673d..45436648234a 100644 --- a/src/material-experimental/popover-edit/popover-edit.spec.ts +++ b/src/material-experimental/popover-edit/popover-edit.spec.ts @@ -53,6 +53,7 @@ const POPOVER_EDIT_DIRECTIVE_NAME = ` [matPopoverEdit]="nameEdit" [matPopoverEditColspan]="colspan" [matPopoverEditDisabled]="nameEditDisabled" + [matPopoverEditAriaLabel]="nameEditAriaLabel" `; const POPOVER_EDIT_DIRECTIVE_WEIGHT = `[matPopoverEdit]="weightEdit" matPopoverEditTabOut`; @@ -69,6 +70,7 @@ abstract class BaseTestComponent { preservedValues = new FormValueContainer(); nameEditDisabled = false; + nameEditAriaLabel: string | undefined = undefined; ignoreSubmitUnlessValid = true; clickOutBehavior: PopoverEditClickOutBehavior = 'close'; colspan: CdkPopoverEditColspan = {}; @@ -430,6 +432,22 @@ describe('Material Popover Edit', () => { expect(component.lensIsOpen()).toBe(false); clearLeftoverTimers(); })); + + it('sets aria label and role dialog on the popup', fakeAsync(() => { + component.nameEditAriaLabel = 'Label of name!!'; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + // Uses Enter to open the lens. + component.openLens(); + fixture.detectChanges(); + + expect(component.lensIsOpen()).toBe(true); + const dialogElem = component.getEditPane()!; + expect(dialogElem.getAttribute('aria-label')).toBe('Label of name!!'); + expect(dialogElem.getAttribute('role')).toBe('dialog'); + clearLeftoverTimers(); + })); }); describe('focus manipulation', () => { diff --git a/src/material-experimental/popover-edit/table-directives.ts b/src/material-experimental/popover-edit/table-directives.ts index d64bcecb7e51..5f5bf1a95d9e 100644 --- a/src/material-experimental/popover-edit/table-directives.ts +++ b/src/material-experimental/popover-edit/table-directives.ts @@ -26,6 +26,7 @@ const POPOVER_EDIT_INPUTS = [ {name: 'context', alias: 'matPopoverEditContext'}, {name: 'colspan', alias: 'matPopoverEditColspan'}, {name: 'disabled', alias: 'matPopoverEditDisabled'}, + {name: 'ariaLabel', alias: 'matPopoverEditAriaLabel'}, ]; const EDIT_PANE_CLASS = 'mat-edit-pane';