fix(cdk-experimental/popover-edit): Fix dialog role and allow aria la…

…bel on popup
angular · Jul 8, 2024 · 4d0a0d5 · 4d0a0d5
1 parent 1f992d0
commit 4d0a0d5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git 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<PeriodicElement, {'name': string}>();
   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
@@ -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<C> 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<C> 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
@@ -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<PeriodicElement, {'name': string}>();
 
   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
@@ -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';