diff --git a/packages/ui-modal/src/Modal/ModalBody/index.tsx b/packages/ui-modal/src/Modal/ModalBody/index.tsx index b8caed6529..f898d70275 100644 --- a/packages/ui-modal/src/Modal/ModalBody/index.tsx +++ b/packages/ui-modal/src/Modal/ModalBody/index.tsx @@ -36,6 +36,7 @@ import generateComponentTheme from './theme' import { propTypes, allowedProps } from './props' import type { ModalBodyProps } from './props' import { UIElement } from '@instructure/shared-types' +import ModalContext from '../ModalContext' /** --- @@ -120,29 +121,36 @@ class ModalBody extends Component { // TODO rethink, the 'as' prop, likely its not a good idea to allow React // components. See INSTUI-4674 const finalRef = this.getFinalRef(this.ref) - + const hasScrollbar = + finalRef && + Math.abs( + (finalRef.scrollHeight ?? 0) - + (finalRef.getBoundingClientRect()?.height ?? 0) + ) > 1 return ( - 0.05 - ? { tabIndex: 0 } - : {})} - > - {children} - + + {(value) => ( + + {children} + + )} + ) } } diff --git a/packages/ui-modal/src/Modal/ModalContext.ts b/packages/ui-modal/src/Modal/ModalContext.ts new file mode 100644 index 0000000000..27a4b63f10 --- /dev/null +++ b/packages/ui-modal/src/Modal/ModalContext.ts @@ -0,0 +1,46 @@ +/* + * The MIT License (MIT) + * + * Copyright (c) 2015 - present Instructure, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { createContext } from 'react' + +type ModalContextType = { + /** + * Needed for setting the correct aria-label in the modal body when its scrollable. + * This is a value read from the Modal's Header. + */ + bodyScrollAriaLabel?: string + setBodyScrollAriaLabel?: (txt: string) => void +} + +/** + * React context created by the `Modal` component + * @private + */ +const ModalContext = createContext({ + bodyScrollAriaLabel: undefined +}) + +export default ModalContext +export { ModalContext } +export type { ModalContextType } diff --git a/packages/ui-modal/src/Modal/ModalHeader/index.tsx b/packages/ui-modal/src/Modal/ModalHeader/index.tsx index 1a992fd783..99919ecc3a 100644 --- a/packages/ui-modal/src/Modal/ModalHeader/index.tsx +++ b/packages/ui-modal/src/Modal/ModalHeader/index.tsx @@ -40,6 +40,7 @@ import generateComponentTheme from './theme' import { propTypes, allowedProps } from './props' import type { ModalHeaderProps, ModalHeaderStyleProps } from './props' +import ModalContext from '../ModalContext' type CloseButtonChild = ComponentElement @@ -62,9 +63,34 @@ class ModalHeader extends Component { } ref: HTMLDivElement | null = null + declare context: React.ContextType + static contextType = ModalContext + + /** + * Gets all text in a DOM subtree, text under