@bloom-housing/ui-components 4.2.2-alpha.7 → 4.2.2-alpha.8

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.7...@bloom-housing/ui-components@4.2.2-alpha.8) (2022-04-20)
+
+
+### Features
+
+* application timeout screen reader accessible ([#2625](https://github.com/bloom-housing/bloom/issues/2625)) ([0771ef3](https://github.com/bloom-housing/bloom/commit/0771ef3f7e4001efb4dae8cca06743801daace05))
+
+
+
+
+
 ## [4.2.2-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.6...@bloom-housing/ui-components@4.2.2-alpha.7) (2022-04-20)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.7",
+  "version": "4.2.2-alpha.8",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "96865ec8d894f783ff7e66bfbf0629573ac05550"
+  "gitHead": "429d0871f219e82003b424e22767ca336236046b"
 }

package/src/authentication/timeout.tsx

@@ -98,6 +98,7 @@ export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
       ariaDescription={promptText}
       actions={modalActions}
       hideCloseIcon
+      role="alertdialog"
     >
       {promptText}
     </Modal>

package/src/overlays/Drawer.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { useRef } from "react"
 import "./Drawer.scss"
 import { Icon } from "../icons/Icon"
 import { Overlay, OverlayProps } from "./Overlay"
@@ -6,6 +6,7 @@ import { Tag } from "../text/Tag"
 import { AppearanceStyleType, AppearanceSizeType } from "../global/AppearanceTypes"
 import { AlertTypes } from "../notifications/alertTypes"
 import { AlertBox } from "../notifications"
+import { nanoid } from "nanoid"
 
 export enum DrawerSide {
   left = "left",
@@ -28,18 +29,25 @@ const Drawer = (props: DrawerProps) => {
   const drawerClasses = ["drawer"]
   if (props.className) drawerClasses.push(props.className)
 
+  const uniqueIdRef = useRef(nanoid())
+
   return (
     <Overlay
-      ariaLabel={props.ariaLabel || props.title}
+      ariaLabelledBy={uniqueIdRef.current}
       ariaDescription={props.ariaDescription}
       open={props.open}
       onClose={props.onClose}
       backdrop={props.backdrop}
       className={"has-drawer" + (props.direction == DrawerSide.left ? " is-direction-left" : "")}
+      role="dialog"
     >
       <div className={drawerClasses.join(" ")}>
         <header className="drawer__header">
-          {props.title && <h1 className="drawer__title">{props.title}</h1>}
+          {props.title && (
+            <h1 className="drawer__title" id={uniqueIdRef.current}>
+              {props.title}
+            </h1>
+          )}
           {props.headerTag && (
             <Tag
               pillStyle={true}

package/src/overlays/Modal.tsx

@@ -1,7 +1,8 @@
-import React from "react"
+import React, { useRef } from "react"
 import "./Modal.scss"
 import { Icon } from "../icons/Icon"
 import { Overlay, OverlayProps } from "./Overlay"
+import { nanoid } from "nanoid"
 
 export interface ModalProps extends Omit<OverlayProps, "children"> {
   title: string
@@ -9,12 +10,17 @@ export interface ModalProps extends Omit<OverlayProps, "children"> {
   hideCloseIcon?: boolean
   children?: React.ReactNode
   slim?: boolean
+  role?: string
 }
 
-const ModalHeader = (props: { title: string }) => (
-  <header className="modal__inner">
-    <h1 className="modal__title">{props.title}</h1>
-  </header>
+const ModalHeader = (props: { title: string; uniqueId?: string }) => (
+  <>
+    <header className="modal__inner">
+      <h1 className="modal__title" id={props.uniqueId}>
+        {props.title}
+      </h1>
+    </header>
+  </>
 )
 
 const ModalFooter = (props: { actions: React.ReactNode[] }) => (
@@ -28,17 +34,20 @@ const ModalFooter = (props: { actions: React.ReactNode[] }) => (
 )
 
 export const Modal = (props: ModalProps) => {
+  const uniqueIdRef = useRef(nanoid())
+
   return (
     <Overlay
-      ariaLabel={props.ariaLabel || props.title}
+      ariaLabelledBy={uniqueIdRef.current}
       ariaDescription={props.ariaDescription}
       open={props.open}
       onClose={props.onClose}
       backdrop={props.backdrop}
       slim={props.slim}
+      role={props.role ? props.role : "dialog"}
     >
       <div className="modal">
-        <ModalHeader title={props.title} />
+        <ModalHeader title={props.title} uniqueId={uniqueIdRef.current} />
 
         <section className="modal__inner">
           {typeof props.children === "string" ? (

package/src/overlays/Overlay.tsx

@@ -8,13 +8,14 @@ import { CSSTransition } from "react-transition-group"
 
 export type OverlayProps = {
   open?: boolean
-  ariaLabel?: string
+  ariaLabelledBy?: string
   ariaDescription?: string
   className?: string
   backdrop?: boolean
   onClose?: () => void
   children: React.ReactNode
   slim?: boolean
+  role?: string
 }
 
 const OverlayInner = (props: OverlayProps) => {
@@ -31,8 +32,8 @@ const OverlayInner = (props: OverlayProps) => {
   return (
     <div
       className={classNames.join(" ")}
-      role="dialog"
-      aria-labelledby={props.ariaLabel}
+      role={props.role}
+      aria-labelledby={props.ariaLabelledBy}
       aria-describedby={props.ariaDescription}
       onClick={(e) => {
         if (e.target === e.currentTarget) closeHandler()