feat(Modal): add ariaLabel, ariaLabelledby and ariaDescribedby

These props can be used to enhance accessibility

Author: DSil

packages/orbit-components/src/Modal/Modal.stories.tsx

@@ -415,7 +415,7 @@ export const WithItinerary: Story = {
 
     return (
       <Container>
-        <Modal onClose={onClose}>
+        <Modal ariaLabel="Itinerary from Prague to Frankfurt" onClose={onClose}>
           <ModalSection>
             <Itinerary>
               <ItineraryStatus type="success" label="This part is new">

packages/orbit-components/src/Modal/ModalContext.tsx

@@ -4,6 +4,7 @@ export interface Props {
   readonly setDimensions?: () => void;
   readonly decideFixedFooter?: () => void;
   readonly setHasModalTitle?: React.Dispatch<React.SetStateAction<boolean>>;
+  readonly setHasModalDescription?: React.Dispatch<React.SetStateAction<boolean>>;
   readonly setHasModalSection?: () => void;
   readonly removeHasModalSection?: () => void;
   readonly callContextFunctions?: () => void;
@@ -15,10 +16,12 @@ export interface Props {
   readonly isInsideModal?: boolean;
   readonly closable?: boolean;
   readonly titleID?: string;
+  readonly descriptionID?: string;
 }
 
 export const ModalContext = React.createContext<Props>({
   setHasModalTitle: () => {},
+  setHasModalDescription: () => {},
   setHasModalSection: () => {},
   removeHasModalSection: () => {},
   setFooterHeight: () => {},

packages/orbit-components/src/Modal/ModalHeader/index.tsx

@@ -48,8 +48,14 @@ const ModalHeader = ({
   title,
   dataTest,
 }: Props) => {
-  const { setHasModalTitle, hasMobileHeader, isMobileFullPage, titleID } =
-    React.useContext(ModalContext);
+  const {
+    setHasModalTitle,
+    setHasModalDescription,
+    hasMobileHeader,
+    isMobileFullPage,
+    titleID,
+    descriptionID,
+  } = React.useContext(ModalContext);
 
   useModalContextFunctions();
 
@@ -60,6 +66,13 @@ const ModalHeader = ({
     };
   }, [title, setHasModalTitle]);
 
+  React.useEffect(() => {
+    if (description) setHasModalDescription?.(true);
+    return () => {
+      setHasModalDescription?.(false);
+    };
+  }, [description, setHasModalDescription]);
+
   const hasHeader = Boolean(title || description);
 
   return (
@@ -82,7 +95,7 @@ const ModalHeader = ({
           )}
           {description && (
             <div className="mt-200">
-              <Text size="large" as="div">
+              <Text size="large" as="div" id={descriptionID}>
                 {description}
               </Text>
             </div>

packages/orbit-components/src/Modal/README.md

@@ -40,6 +40,9 @@ Table below contains all types of the props available in the Modal component.
 | mobileHeader        | `boolean`                  | `true`     | If `false` the ModalHeader will not have MobileHeader and CloseContainer.                                                                                                                             |
 | labelClose          | `string`                   | `Close`    | The label for the close button.                                                                                                                                                                       |
 | onScroll            | `event => void \| Promise` |            | Function for handling `onScroll` event. [See Functional specs](#functional-specs).                                                                                                                    |
+| ariaLabelledby      | `string`                   |            | The `aria-labelledby` attribute of the Modal. It should be used if `title` is not defined on the ModalHeader.                                                                                         |
+| ariaDescribedby     | `string`                   |            | The `aria-describedby` attribute of the Modal. It should be used if `description` is not defined on the ModalHeader.                                                                                  |
+| ariaLabel           | `string`                   |            | The `aria-label` attribute of the Modal. It should be used if `title` is not defined on the ModalHeader and `ariaLabelledby` is undefined.                                                            |
 
 ### Modal enum
 

packages/orbit-components/src/Modal/index.tsx

@@ -60,13 +60,17 @@ const Modal = React.forwardRef<Instance, Props>(
       id,
       labelClose = "Close",
       lockScrolling = true,
+      ariaLabel,
+      ariaLabelledby,
+      ariaDescribedby,
     }: Props,
     ref,
   ) => {
     const [loaded, setLoaded] = React.useState<boolean>(false);
     const [scrolled, setScrolled] = React.useState<boolean>(false);
     const [fullyScrolled, setFullyScrolled] = React.useState<boolean>(false);
     const [hasModalTitle, setHasModalTitle] = React.useState<boolean>(false);
+    const [hasModalDescription, setHasModalDescription] = React.useState<boolean>(false);
     const [hasModalSection, setHasModalSection] = React.useState<boolean>(false);
     const [clickedModalBody, setClickedModalBody] = React.useState<boolean>(false);
     const [fixedClose, setFixedClose] = React.useState<boolean>(false);
@@ -79,6 +83,7 @@ const Modal = React.forwardRef<Instance, Props>(
     const modalContent = React.useRef<HTMLElement | null>(null);
     const modalBody = React.useRef<HTMLElement | null>(null);
     const modalTitleID = useRandomId();
+    const modalDescriptionID = useRandomId();
     const theme = useTheme();
 
     const { isLargeMobile } = useMediaQuery();
@@ -354,6 +359,7 @@ const Modal = React.forwardRef<Instance, Props>(
     const value = React.useMemo(
       () => ({
         setHasModalTitle,
+        setHasModalDescription,
         setHasModalSection: () => setHasModalSection(true),
         removeHasModalSection: () => setHasModalSection(false),
         callContextFunctions,
@@ -364,6 +370,7 @@ const Modal = React.forwardRef<Instance, Props>(
         closable: Boolean(onClose),
         isInsideModal: true,
         titleID: modalTitleID,
+        descriptionID: modalDescriptionID,
       }),
       [
         callContextFunctions,
@@ -372,6 +379,7 @@ const Modal = React.forwardRef<Instance, Props>(
         mobileHeader,
         onClose,
         modalTitleID,
+        modalDescriptionID,
       ],
     );
 
@@ -403,19 +411,18 @@ const Modal = React.forwardRef<Instance, Props>(
           !isMobileFullPage && "bg-[black]/50",
           "lm:overflow-y-auto lm:p-1000 lm:bg-[black]/50",
         )}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
+        tabIndex={-1}
         onKeyDown={handleKeyDown}
         onScroll={handleScroll}
         onClick={handleClickOutside}
         data-test={dataTest}
         id={id}
         ref={modalBodyRef}
         role="dialog"
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus={autoFocus}
         aria-modal="true"
-        aria-labelledby={hasModalTitle ? modalTitleID : ""}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby || (hasModalTitle ? modalTitleID : undefined)}
+        aria-describedby={ariaDescribedby || (hasModalDescription ? modalDescriptionID : undefined)}
       >
         <div
           className={cx(

packages/orbit-components/src/Modal/types.d.ts

@@ -25,6 +25,9 @@ export interface Props extends Common.Globals {
   readonly hasCloseButton?: boolean;
   readonly disableAnimation?: boolean;
   readonly labelClose?: string;
+  readonly ariaLabel?: string;
+  readonly ariaLabelledby?: string;
+  readonly ariaDescribedby?: string;
 }
 
 export interface Instance {