[IRN-5693][BpkModal] Support dialog a11y label when no header (#3767)

* [IRN-5693][BpkModal] Support dialog a11y label when no header

* Add test case

* Add test case

Author: steviehailey-skyscanner

examples/bpk-component-modal/examples.tsx

@@ -106,13 +106,13 @@ const content = [
     pulvinar erat dignissim vitae.
   </Paragraph>,
 ];
-type ContainerProps =  {
+type ContainerProps = {
   title?: string;
   buttonLabel?: string;
   id?: string;
   wrapperProps?: Object;
   isOpen?: boolean;
-} & Omit<BpkModalProps, 'getApplicationElement'| 'id' | 'isOpen'>;
+} & Omit<BpkModalProps, 'getApplicationElement' | 'id' | 'isOpen'>;
 
 const ModalContainer = (props: ContainerProps) => {
   const [isOpen, setIsOpen] = useState(props.isOpen || false);
@@ -230,8 +230,7 @@ const NestedExample = (isOpen: boolean) => (
 
 const NoHeaderExample = (isOpen: boolean) => (
   <ModalContainer
-    title="Modal title"
-    closeLabel="Close modal"
+    ariaLabel="Modal title"
     showHeader={false}
     isOpen={isOpen}
   >
@@ -252,7 +251,7 @@ const WithAccessoryViewExample = (isOpen: boolean) => (
     accessoryView={
       <BpkNavigationBarButtonLink
         label="Close"
-        onClick={() => {}}
+        onClick={() => { }}
         className={getClassName('bpk-modal__leading-button')}
       >
         <div>

packages/bpk-component-modal/src/BpkModalInner-test.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { BpkNavigationBarButtonLink } from '../../bpk-component-navigation-bar';
 
@@ -198,4 +198,39 @@ describe('BpkModalInner', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render correctly with showHeader false', () => {
+    render(
+      <BpkModalInner
+        id="my-modal"
+        ariaLabel="Modal title"
+        showHeader={false}
+        dialogRef={jest.fn()}
+        isIphone={false}
+      >
+        Modal content
+      </BpkModalInner>,
+    );
+
+    expect(screen.queryAllByRole('heading')).toHaveLength(0);
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-label', 'Modal title');
+  });
+
+  it('should render with a11y labelled-by when showHeader true', () => {
+    render(
+      <BpkModalInner
+        id="my-modal"
+        title="Actual title"
+        ariaLabel="Ignored title"
+        showHeader
+        dialogRef={jest.fn()}
+        isIphone={false}
+      >
+        Modal content
+      </BpkModalInner>,
+    );
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Actual title');
+    expect(screen.getByRole('dialog')).toHaveAccessibleName('Actual title');
+  });
 });

packages/bpk-component-modal/src/BpkModalInner.tsx

@@ -52,6 +52,7 @@ export type Props = {
    * The accessory view allows for icons and actions to be placed in front of the main title inside the modal header. To be used with `BpkNavigationBarButtonLink`
    */
   accessoryView?: ReactNode;
+  ariaLabel?: string // optional aria label for scenario when header is disabled
 };
 
 export const MODAL_STYLING = {
@@ -62,6 +63,7 @@ export type ModalStyle = (typeof MODAL_STYLING)[keyof typeof MODAL_STYLING];
 
 const BpkModalInner = ({
   accessoryView = null,
+  ariaLabel,
   children,
   className = null,
   closeLabel = '',
@@ -125,6 +127,7 @@ const BpkModalInner = ({
         tabIndex={-1}
         role="dialog"
         aria-labelledby={showHeader ? headingId : undefined}
+        aria-label={!showHeader ? ariaLabel : undefined}
         className={classNames.join(' ')}
         ref={dialogRef}
       >