[ZOOT-1102][BpkDialogInner]: Adds optional aria-modal to the dialog (#…

…3402)

[ZOOT-1102][BpkDialogInner]: Adds optional aria-modal to the dialog (#3402)

* [ZOOT-1102] Adds aria-modal to the Dialog component
* [ZOOT-1102] Adds type to ariaModal
* Revert "[ZOOT-1102] Adds aria-modal to the Dialog component"
This reverts commit ddfe20b.
* [ZOOT-1102] Adds type to ariaModal
* Update lockfile references
* [ZOOT-1102] Updates Dialog snapshots
* Update snapshots
---------

Co-authored-by: Michal Sekulski <michalsekulski@skyscanner.net>

packages/bpk-component-dialog/src/BpkDialog-test.tsx

@@ -33,6 +33,7 @@ describe('BpkDialog', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         closeLabel="Close"
         dialogRef={jest.fn()}
@@ -54,6 +55,7 @@ describe('BpkDialog', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         dialogRef={jest.fn()}
         getApplicationElement={jest.fn()}
@@ -75,6 +77,7 @@ describe('BpkDialog', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         dialogRef={jest.fn()}
         getApplicationElement={jest.fn()}
@@ -97,6 +100,7 @@ describe('BpkDialog', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         dialogRef={jest.fn()}
         getApplicationElement={jest.fn()}
@@ -120,6 +124,7 @@ describe('BpkDialog', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         dialogRef={jest.fn()}
         getApplicationElement={jest.fn()}
@@ -143,6 +148,7 @@ describe('BpkDialog', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         dialogRef={jest.fn()}
         getApplicationElement={jest.fn()}
@@ -164,6 +170,7 @@ describe('BpkDialog', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         dialogRef={jest.fn()}
         getApplicationElement={jest.fn()}

packages/bpk-component-dialog/src/BpkDialogInner.tsx

@@ -30,6 +30,7 @@ const getClassName = cssModules(STYLES);
 const BpkDialogInner = (props: Props) => {
   const {
     ariaLabel,
+    ariaModal = true,
     children,
     className = null,
     contentClassName,
@@ -60,10 +61,11 @@ const BpkDialogInner = (props: Props) => {
         tabIndex={-1}
         role="dialog"
         aria-label={ariaLabel}
+        aria-modal={ariaModal}
         className={classNames}
         ref={dialogRef}
       >
-        {flare && <BpkContentBubble 
+        {flare && <BpkContentBubble
         // TODO: className to be removed
         // eslint-disable-next-line @skyscanner/rules/forbid-component-props
         className={flareClassNames} />}

packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap

@@ -18,6 +18,7 @@ exports[`BpkDialog should render correctly in the given target if renderTarget i
         />
         <section
           aria-label="example dialog to showcase component"
+          aria-modal="true"
           class="bpk-dialog-inner"
           id="my-modal"
           role="dialog"
@@ -79,6 +80,7 @@ exports[`BpkDialog should render correctly when it is not dismissible 2`] = `
         />
         <section
           aria-label="example dialog to showcase component"
+          aria-modal="true"
           class="bpk-dialog-inner"
           id="my-modal"
           role="dialog"
@@ -114,6 +116,7 @@ exports[`BpkDialog should render default icon dialog correctly 2`] = `
         />
         <section
           aria-label="example dialog to showcase component"
+          aria-modal="true"
           class="bpk-dialog-inner"
           id="my-modal"
           role="dialog"
@@ -164,6 +167,7 @@ exports[`BpkDialog should render destructive icon dialog correctly 2`] = `
         />
         <section
           aria-label="example dialog to showcase component"
+          aria-modal="true"
           class="bpk-dialog-inner"
           id="my-modal"
           role="dialog"
@@ -214,6 +218,7 @@ exports[`BpkDialog should render warning icon dialog correctly 2`] = `
         />
         <section
           aria-label="example dialog to showcase component"
+          aria-modal="true"
           class="bpk-dialog-inner"
           id="my-modal"
           role="dialog"
@@ -264,6 +269,7 @@ exports[`BpkDialog should render with flare dialog 2`] = `
         />
         <section
           aria-label="example dialog to showcase component"
+          aria-modal="true"
           class="bpk-dialog-inner"
           id="my-modal"
           role="dialog"
@@ -369,6 +375,7 @@ exports[`BpkDialog should render with flare dialog with flareClassName 2`] = `
         />
         <section
           aria-label="example dialog to showcase component"
+          aria-modal="true"
           class="bpk-dialog-inner"
           id="my-modal"
           role="dialog"

packages/bpk-component-dialog/src/accessibility-test.tsx

@@ -29,6 +29,7 @@ describe('BpkDialog accessibility tests', () => {
       <BpkDialog
         id="my-modal"
         ariaLabel="example dialog to showcase component"
+        ariaModal
         onClose={jest.fn()}
         closeLabel="Close"
         dialogRef={jest.fn()}

packages/bpk-component-dialog/src/common-types.d.ts

@@ -24,6 +24,7 @@ export declare const HEADER_ICON_TYPES: {
 };
 export type DialogInnerProps = {
     ariaLabel: string;
+    ariaModal: boolean;
     id: string;
     children: ReactNode;
     dialogRef: (ref: HTMLElement | null | undefined) => void;

packages/bpk-component-dialog/src/common-types.ts

@@ -26,11 +26,12 @@ export const HEADER_ICON_TYPES = {
 
 export type DialogInnerProps = {
   ariaLabel: string;
+  ariaModal: boolean;
   id: string;
   children: ReactNode;
   dialogRef: (ref: HTMLElement | null | undefined) => void;
   /**
-   * Because this component uses a modal on mobile viewports, you need to let it know what 
+   * Because this component uses a modal on mobile viewports, you need to let it know what
    * the root element of your application is by returning its DOM node via this prop
    * This is to "hide" your application from screen readers whilst the dialog is open.
    * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".