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

…bel on popup
angular · Jul 3, 2024 · f3ce925 · f3ce925
1 parent 1f992d0
commit f3ce925
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -64,8 +64,11 @@
     "@angular/platform-browser": "^18.1.0-next.3",
     "@types/google.maps": "^3.54.10",
     "@types/youtube": "^0.0.50",
+    "babel-plugin-istanbul": "^6.1.1",
+    "regjsgen": "^0.8.0",
     "rxjs": "^6.6.7",
     "rxjs-tslint-rules": "^4.34.8",
+    "text-table": "^0.2.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.14.0"
   },
@@ -74,8 +77,8 @@
     "@angular-devkit/core": "^18.1.0-next.3",
     "@angular-devkit/schematics": "^18.1.0-next.3",
     "@angular/bazel": "https://github.com/angular/bazel-builds.git#bac9c1abe1e6ac1801fbbccb53353a1ed7126469",
-    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#74e0e7b090c6e16056290836b2d936ca7820b86f",
     "@angular/build": "^18.1.0-next.3",
+    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#74e0e7b090c6e16056290836b2d936ca7820b86f",
     "@angular/cli": "^18.1.0-next.3",
     "@angular/compiler-cli": "^18.1.0-next.3",
     "@angular/localize": "^18.1.0-next.3",
@@ -142,8 +145,8 @@
     "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0",
     "@material/textfield": "15.0.0-canary.7f224ddd4.0",
     "@material/theme": "15.0.0-canary.7f224ddd4.0",
-    "@material/tooltip": "15.0.0-canary.7f224ddd4.0",
     "@material/tokens": "15.0.0-canary.7f224ddd4.0",
+    "@material/tooltip": "15.0.0-canary.7f224ddd4.0",
     "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0",
     "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
     "@material/typography": "15.0.0-canary.7f224ddd4.0",

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';

diff --git a/yarn.lock b/yarn.lock
@@ -433,7 +433,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/[email protected]", "@babel/core@^7.16.0", "@babel/core@^7.16.12", "@babel/core@^7.23.9":
+"@babel/[email protected]", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.16.12", "@babel/core@^7.23.9":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.7.tgz#b676450141e0b52a3d43bc91da86aa608f950ac4"
   integrity sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==
@@ -691,7 +691,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.10.3", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.24.6", "@babel/parser@^7.24.7":
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.10.3", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.24.6", "@babel/parser@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85"
   integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==
@@ -2195,6 +2195,17 @@
     wrap-ansi "^8.1.0"
     wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
 
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
 "@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
@@ -5092,6 +5103,17 @@ [email protected]:
     find-cache-dir "^4.0.0"
     schema-utils "^4.0.0"
 
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.11"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
@@ -8767,6 +8789,11 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
 get-port@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
@@ -10252,6 +10279,17 @@ [email protected]:
     istanbul-lib-coverage "^3.2.0"
     semver "^7.5.4"
 
+istanbul-lib-instrument@^5.0.4:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
 istanbul-lib-report@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#908305bac9a5bd175ac6a74489eafd0fc2445a7d"
@@ -13580,6 +13618,11 @@ registry-url@^5.0.0:
   dependencies:
     rc "^1.2.8"
 
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
 regjsparser@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
@@ -15348,6 +15391,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5"
   integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==
 
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
 tfunk@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/tfunk/-/tfunk-4.0.0.tgz#de9399feaf2060901d590b7faad80fcd5443077e"