feat(Popup): Set aria-modal for both Dialog and Popup with focus trap (…

…#995) * feat(Popup): Set aria-modal for both Dialog and Popup with focus trap * Update changelog * Update packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts Co-Authored-By: sophieH29 <8460706+sophieH29@users.noreply.github.com> * Update popupFocusTrapBehavior.ts
microsoft · Feb 28, 2019 · 7fdfa2f · 7fdfa2f
1 parent 84db8af
commit 7fdfa2f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `getNextElement`, `getPreviousElement` and `focusAsync` to exported as `FocusZoneUtilities` @layershifter ([#981](https://github.com/stardust-ui/react/pull/981))
 - Add `Reaction` and `ReactionGroup` components @mnajdova ([#959](https://github.com/stardust-ui/react/pull/959))
 - Add `reactionGroup` and `reactionGroupPosition` props to the `ChatMessage` component @mnajdova ([#959](https://github.com/stardust-ui/react/pull/959))
+- Set `aria-modal` attribute for both Dialog and Popup with focus trap @sophieH29 ([#995](https://github.com/stardust-ui/react/pull/995))
 
 ### Documentation
 - Add `MenuButton` prototype (only available in development mode) @layershifter ([#947](https://github.com/stardust-ui/react/pull/947))

diff --git a/packages/react/src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts
@@ -16,8 +16,8 @@ import popupFocusTrapBehavior from '../Popup/popupFocusTrapBehavior'
 const dialogBehavior: Accessibility = (props: any) => {
   const behaviorData = popupFocusTrapBehavior(props)
   behaviorData.attributes.popup = {
+    ...behaviorData.attributes.popup,
     role: 'dialog',
-    'aria-modal': true,
   }
 
   return behaviorData

diff --git a/packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts
@@ -8,11 +8,18 @@ import popupBehavior from './popupBehavior'
  *
  * @specification
  * Adds attribute 'aria-disabled=true' to 'trigger' component's part if 'disabled' property is true. Does not set the attribute otherwise.
+ * Adds attribute 'aria-modal=true' to 'popup' component's part.
  * Traps focus inside component.
  */
-const popupFocusTrapBehavior: Accessibility = (props: any) => ({
-  ...popupBehavior(props),
-  focusTrap: true,
-})
+const popupFocusTrapBehavior: Accessibility = (props: any) => {
+  const behaviorData = popupBehavior(props)
+  behaviorData.attributes.popup = {
+    ...behaviorData.attributes.popup,
+    'aria-modal': true,
+  }
+  behaviorData.focusTrap = true
+
+  return behaviorData
+}
 
 export default popupFocusTrapBehavior