[THES-154] BpkBottomSheet fix focus lock - accessibility (#3182)

* THES-154 - BpkBottomSheet fix focus lock - accessibility * THES-154 - BpkBottomSheetInner type fix * THES-154 - BpkBottomSheetInner unit test fix * THES-154 - BpkBottomSheetInner style fix * THES-154 - BpkBottomSheetInner style fix REVERT * THES-154 - BpkBottomSheetInner position fix * THES-154 - BpkBottomSheetInner style build * THES-154 - BpkBottomSheetInner readme --------- Co-authored-by: Justyna Toporkiewicz <[email protected]>
Skyscanner · Jan 22, 2024 · c87064b · c87064b
1 parent b86f02b
commit c87064b
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 2 deletions.
diff --git a/packages/bpk-component-bottom-sheet/README.md b/packages/bpk-component-bottom-sheet/README.md
@@ -57,3 +57,4 @@ class App extends Component {
 }
 ```
 
+Ensure your body/children is accessible via Voice Over. You may need to specify the tabIndex of the elements.
diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner-test.tsx b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner-test.tsx
@@ -26,6 +26,7 @@ describe('BpkBottomSheetInner', () => {
       <BpkBottomSheetInner
         id="my-bottom-sheet"
         title="Bottom sheet title"
+        dialogRef={jest.fn()}
         closeLabel="Close"
         onClose={jest.fn()}
         exiting={false}
@@ -42,6 +43,7 @@ describe('BpkBottomSheetInner', () => {
         id="my-bottom-sheet"
         title="Bottom sheet title"
         closeLabel="Close"
+        dialogRef={jest.fn()}
         onClose={jest.fn()}
         wide
         exiting={false}
@@ -57,6 +59,7 @@ describe('BpkBottomSheetInner', () => {
       <BpkBottomSheetInner
         id="my-bottom-sheet"
         title="Bottom sheet title"
+        dialogRef={jest.fn()}
         onClose={jest.fn()}
         actionText="Dismiss"
         onAction={jest.fn()}

diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.d.ts b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.d.ts
@@ -20,9 +20,10 @@ import type { ReactNode } from 'react';
 export type Props = {
   children: ReactNode;
   closeLabel?: string;
+  dialogRef: (ref: HTMLElement | null | undefined) => void;
   id: string;
   onClose: () => void;
   title?: string;
 };
-declare const BpkBottomSheetInner: ({ children, closeLabel, id, onClose, title, }: Props) => JSX.Element;
+declare const BpkBottomSheetInner: ({ children, closeLabel, dialogRef, id, onClose, title, }: Props) => JSX.Element;
 export default BpkBottomSheetInner;
diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css
diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.scss b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.scss
@@ -44,6 +44,8 @@ $close-button-width: bpk-spacing-lg() * 2;
     @include bpk-border-radius-sm;
 
     @include bpk-breakpoint-mobile {
+      position: fixed;
+      bottom: 0;
       height: fit-content;
       max-height: 90%;
       margin-bottom: 0;

diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.tsx b/packages/bpk-component-bottom-sheet/src/BpkBottomSheetInner.tsx
@@ -34,6 +34,7 @@ type Props = {
   actionText?: string;
   children: ReactNode;
   closeLabel?: string;
+  dialogRef: (ref: HTMLElement | null | undefined) => void;
   id: string;
   onAction?: () => void;
   onClose: () => void;
@@ -46,6 +47,7 @@ const BpkBottomSheetInner = ({
   actionText = '',
   children,
   closeLabel = '',
+  dialogRef,
   exiting,
   id,
   onAction = () => null,
@@ -77,6 +79,7 @@ const BpkBottomSheetInner = ({
     role="dialog"
     aria-labelledby={headingId}
     className={classNames}
+    ref={dialogRef}
   >
     <header className={getClassName('bpk-bottom-sheet--header')}>
       <BpkNavigationBar
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,3 +57,4 @@ class App extends Component {
		}
		```

		Ensure your body/children is accessible via Voice Over. You may need to specify the tabIndex of the elements.