feat(modal): add role option

e2e-app/src/app/app.routes.ts

@@ -11,6 +11,7 @@ import { DropdownPositionComponent } from './dropdown/position/dropdown-position
 import { ModalAutoCloseComponent } from './modal/autoclose/modal-autoclose.component';
 import { ModalFocusComponent } from './modal/focus/modal-focus.component';
 import { ModalNestingComponent } from './modal/nesting/modal-nesting.component';
+import { ModalRoleComponent } from './modal/role/modal-role.component';
 import { ModalStackComponent } from './modal/stack/modal-stack.component';
 import { ModalStackConfirmationComponent } from './modal/stack-confirmation/modal-stack-confirmation.component';
 import { PopoverAutocloseComponent } from './popover/autoclose/popover-autoclose.component';
@@ -46,6 +47,7 @@ export const ROUTES: Routes = [
  { path: 'autoclose', component: ModalAutoCloseComponent },
  { path: 'focus', component: ModalFocusComponent },
  { path: 'nesting', component: ModalNestingComponent },
+ { path: 'role', component: ModalRoleComponent },
  { path: 'stack', component: ModalStackComponent },
  { path: 'stack-confirmation', component: ModalStackConfirmationComponent },
  ],

e2e-app/src/app/modal/role/modal-role.component.html

@@ -0,0 +1,11 @@
+<h3>Modal role tests</h3>
+
+<!-- Default modal -->
+<button class="btn btn-outline-secondary" type="button" id="open-modal-default" (click)="openModal()">
+ Default modal
+</button>
+
+<!-- Alert dialog modal -->
+<button class="btn btn-outline-secondary" type="button" id="open-modal-alertdialog" (click)="openModal('alertdialog')">
+ Alert dialog modal
+</button>

e2e-app/src/app/modal/role/modal-role.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+ standalone: true,
+ templateUrl: './modal-role.component.html',
+})
+export class ModalRoleComponent {
+ constructor(private modalService: NgbModal) {}
+
+ openModal(role?: string) {
+ this.modalService.open('Modal content', role ? { role } : undefined);
+ }
+}

e2e-app/src/app/modal/role/modal-role.e2e-spec.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+import { test, getPage, setPage } from '../../../../baseTest';
+import { sendKey } from '../../tools.po';
+import { waitForModalCount, SELECTOR_MODAL_WINDOW } from '../modal.po';
+
+import { openModal } from './modal-role.po';
+
+test.use({ testURL: 'modal/role', testSelector: 'h3:text("Modal role tests")' });
+test.beforeEach(async ({ page }) => setPage(page));
+
+test.describe('Modal', () => {
+ test.afterEach(async () => {
+ await sendKey('Escape');
+ await waitForModalCount(0);
+ });
+
+ test('should open modal with the default role', async () => {
+ await openModal('default');
+
+ await expect(getPage().locator(SELECTOR_MODAL_WINDOW)).toHaveAttribute('role', 'dialog');
+ });
+
+ test('should open modal with role="alertdialog"', async () => {
+ await openModal('alertdialog');
+
+ await expect(getPage().locator(SELECTOR_MODAL_WINDOW)).toHaveAttribute('role', 'alertdialog');
+ });
+});

e2e-app/src/app/modal/role/modal-role.po.ts

@@ -0,0 +1,8 @@
+import { focusElement, sendKey } from '../../tools.po';
+import { waitForModalCount } from '../modal.po';
+
+export const openModal = async (type: string) => {
+ await focusElement(`#open-modal-${type}`);
+ await sendKey('Enter');
+ await waitForModalCount(1);
+};

src/modal/modal-config.spec.ts

@@ -18,6 +18,7 @@ describe('NgbModalConfig', () => {
  expect(config.container).toBeUndefined();
  expect(config.injector).toBeUndefined();
  expect(config.fullscreen).toBe(false);
+ expect(config.role).toBe('dialog');
  expect(config.keyboard).toBe(true);
  expect(config.scrollable).toBeUndefined();
  expect(config.size).toBeUndefined();

src/modal/modal-config.ts

@@ -89,6 +89,15 @@ export interface NgbModalOptions {
  */
  keyboard?: boolean;
 
+ /**
+ * `role` attribute value to set on the modal window.
+ *
+ * Default value is `dialog`.
+ *
+ * @since 16.1.0
+ */
+ role?: 'alertdialog' | 'dialog' | string;
+
  /**
  * Scrollable modal content (false by default).
  *
@@ -160,6 +169,7 @@ export class NgbModalConfig implements Required<NgbModalOptions> {
  fullscreen: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | boolean | string = false;
  injector: Injector;
  keyboard = true;
+ role: 'alertdialog' | 'dialog' | string = 'dialog';
  scrollable: boolean;
  size: 'sm' | 'lg' | 'xl' | string;
  windowClass: string;

src/modal/modal-ref.ts

@@ -47,6 +47,7 @@ const WINDOW_ATTRIBUTES: string[] = [
  'centered',
  'fullscreen',
  'keyboard',
+ 'role',
  'scrollable',
  'size',
  'windowClass',

src/modal/modal-window.spec.ts

@@ -62,6 +62,15 @@ describe('ngb-modal-dialog', () => {
  expect(dialogEl.getAttribute('role')).toBe('document');
  });
 
+ it('should render default modal window with a specified role', () => {
+ fixture.componentInstance.role = 'alertdialog';
+ fixture.detectChanges();
+ const dialogEl: Element = fixture.nativeElement.querySelector('.modal-dialog');
+
+ expect(fixture.nativeElement.getAttribute('role')).toBe('alertdialog');
+ expect(dialogEl.getAttribute('role')).toBe('document');
+ });
+
  it('should render modal dialog with a specified class', () => {
  fixture.componentInstance.modalDialogClass = 'custom-dialog-class';
  fixture.detectChanges();

src/modal/modal-window.ts

@@ -27,11 +27,11 @@ import { isString, reflow } from '../util/util';
  host: {
  '[class]': '"modal d-block" + (windowClass ? " " + windowClass : "")',
  '[class.fade]': 'animation',
- role: 'dialog',
  tabindex: '-1',
  '[attr.aria-modal]': 'true',
  '[attr.aria-labelledby]': 'ariaLabelledBy',
  '[attr.aria-describedby]': 'ariaDescribedBy',
+ '[attr.role]': 'role',
  },
  template: `
  <div
@@ -69,6 +69,7 @@ export class NgbModalWindow implements OnInit, OnDestroy {
  @Input() centered: string;
  @Input() fullscreen: string | boolean;
  @Input() keyboard = true;
+ @Input() role: string = 'dialog';
  @Input() scrollable: string;
  @Input() size: string;
  @Input() windowClass: string;