feat(modal): allow custom aria-label for close button

VPAT-758
vmware-clarity · Oct 11, 2022 · e1e974f · e1e974f
1 parent fd9f0f7
commit e1e974f
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/.storybook/stories/modal/modal.stories.ts b/.storybook/stories/modal/modal.stories.ts
@@ -4,13 +4,15 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrModal, ClrModalModule } from '@clr/angular';
+import { ClrCommonStringsService, ClrModal, ClrModalModule } from '@clr/angular';
 import { action } from '@storybook/addon-actions';
 import { Parameters } from '@storybook/addons';
 import { Story } from '@storybook/angular';
 
 import { setupStorybook } from '../../helpers/setup-storybook.helpers';
 
+const commonStringsService = new ClrCommonStringsService();
+
 const defaultStory: Story = args => ({
   template: `
     <button type="button" class="btn btn-primary" (click)="clrModalOpen = true">Open Modal</button>
@@ -22,6 +24,7 @@ const defaultStory: Story = args => ({
     </div>
     <clr-modal
       [clrModalClosable]="clrModalClosable"
+      [clrModalCloseButtonAriaLabel]="clrModalCloseButtonAriaLabel"
       [clrModalLabelledById]="clrModalLabelledById"
       [clrModalOpen]="clrModalOpen"
       [clrModalOverrideScrollService]="clrModalOverrideScrollService"
@@ -49,6 +52,7 @@ const defaultParameters: Parameters = {
   component: ClrModal,
   argTypes: {
     // inputs
+    clrModalCloseButtonAriaLabel: { type: 'string', defaultValue: commonStringsService.keys.close },
     clrModalLabelledById: { defaultValue: '' },
     clrModalSize: { defaultValue: 'md', control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] } },
     clrModalSkipAnimation: { defaultValue: false, control: { type: 'boolean' } },

diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -2960,6 +2960,8 @@ export class ClrModal implements OnChanges, OnDestroy {
     // (undocumented)
     close(): void;
     // (undocumented)
+    closeButtonAriaLabel: string;
+    // (undocumented)
     commonStrings: ClrCommonStringsService;
     // (undocumented)
     fadeDone(e: AnimationEvent_2): void;
@@ -2990,7 +2992,7 @@ export class ClrModal implements OnChanges, OnDestroy {
     // (undocumented)
     stopClose: boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrModal, "clr-modal", never, { "_open": "clrModalOpen"; "closable": "clrModalClosable"; "size": "clrModalSize"; "staticBackdrop": "clrModalStaticBackdrop"; "skipAnimation": "clrModalSkipAnimation"; "bypassScrollService": "clrModalOverrideScrollService"; "stopClose": "clrModalPreventClose"; "labelledBy": "clrModalLabelledById"; }, { "_openChanged": "clrModalOpenChange"; "altClose": "clrModalAlternateClose"; }, never, [".modal-nav", ".modal-title", ".modal-body", ".modal-footer"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrModal, "clr-modal", never, { "_open": "clrModalOpen"; "closable": "clrModalClosable"; "closeButtonAriaLabel": "clrModalCloseButtonAriaLabel"; "size": "clrModalSize"; "staticBackdrop": "clrModalStaticBackdrop"; "skipAnimation": "clrModalSkipAnimation"; "bypassScrollService": "clrModalOverrideScrollService"; "stopClose": "clrModalPreventClose"; "labelledBy": "clrModalLabelledById"; }, { "_openChanged": "clrModalOpenChange"; "altClose": "clrModalAlternateClose"; }, never, [".modal-nav", ".modal-title", ".modal-body", ".modal-footer"]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrModal, never>;
 }

diff --git a/projects/angular/src/modal/modal.html b/projects/angular/src/modal/modal.html
@@ -30,7 +30,7 @@
           </div>
           <button
             type="button"
-            [attr.aria-label]="commonStrings.keys.close"
+            [attr.aria-label]="closeButtonAriaLabel || commonStrings.keys.close"
             class="close"
             *ngIf="closable"
             (click)="close()"

diff --git a/projects/angular/src/modal/modal.spec.ts b/projects/angular/src/modal/modal.spec.ts
@@ -21,6 +21,7 @@ import { ClrModalModule } from './modal.module';
     <clr-modal
       [(clrModalOpen)]="opened"
       [clrModalClosable]="closable"
+      [clrModalCloseButtonAriaLabel]="closeButtonAriaLabel"
       [clrModalSize]="size"
       [clrModalStaticBackdrop]="staticBackdrop"
     >
@@ -39,6 +40,7 @@ class TestComponent {
 
   opened = true;
   closable = true;
+  closeButtonAriaLabel: string = undefined;
   size = '';
   staticBackdrop = false;
 }
@@ -257,10 +259,17 @@ describe('Modal', () => {
     expect(focusable).toBeDefined();
   });
 
-  it('close button should have attribute aria-label', () => {
+  it('close button should have default aria-label', () => {
     expect(compiled.querySelector('.close').getAttribute('aria-label')).toBe(commonStrings.keys.close);
   });
 
+  it('close button should have customizable aria-label', () => {
+    fixture.componentInstance.closeButtonAriaLabel = 'custom close label';
+    fixture.detectChanges();
+
+    expect(compiled.querySelector('.close').getAttribute('aria-label')).toBe('custom close label');
+  });
+
   it('should add expected aria-labelledby', () => {
     // open modal
     modal.open();

diff --git a/projects/angular/src/modal/modal.ts b/projects/angular/src/modal/modal.ts
@@ -59,6 +59,7 @@ export class ClrModal implements OnChanges, OnDestroy {
   @Output('clrModalOpenChange') _openChanged: EventEmitter<boolean> = new EventEmitter<boolean>(false);
 
   @Input('clrModalClosable') closable = true;
+  @Input('clrModalCloseButtonAriaLabel') closeButtonAriaLabel = this.commonStrings.keys.close;
   @Input('clrModalSize') size: string;
   @Input('clrModalStaticBackdrop') staticBackdrop = true;
   @Input('clrModalSkipAnimation') skipAnimation = 'false';