From f3ce925342a6732803949a5a199daa5353a7d22c Mon Sep 17 00:00:00 2001 From: Karl Seamon Date: Wed, 3 Jul 2024 15:58:04 -0400 Subject: [PATCH] fix(cdk-experimental/popover-edit): Fix dialog role and allow aria label on popup --- package.json | 7 ++- .../popover-edit/popover-edit.spec.ts | 18 +++++++ .../popover-edit/table-directives.ts | 9 +++- .../popover-edit/popover-edit.spec.ts | 18 +++++++ .../popover-edit/table-directives.ts | 1 + yarn.lock | 52 ++++++++++++++++++- 6 files changed, 100 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f3470978485c..6769f32dadd6 100644 --- 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 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'; diff --git a/yarn.lock b/yarn.lock index d339fe6f7470..47e4596338d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -433,7 +433,7 @@ json5 "^2.2.3" semver "^6.3.1" -"@babel/core@7.24.7", "@babel/core@^7.16.0", "@babel/core@^7.16.12", "@babel/core@^7.23.9": +"@babel/core@7.24.7", "@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 @@ babel-loader@9.1.3: 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 @@ istanbul-lib-instrument@6.0.2: 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 @@ text-hex@1.0.x: 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"