feat(Accessibility): Add roles to Popup's content in accessibility behavior (#1253)

* feat(Accessibility): Add roles to Popup's content in accessibility behavior

* update changelog

Author: sophieH29

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Move `Input` styles to Base theme @layershifter ([#1247](https://github.com/stardust-ui/react/pull/1247))
+- Add `role` attribute to `Popup`'s content in accessibility behaviors @sophieH29 ([1253](https://github.com/stardust-ui/react/pull/1253))
 
 <!--------------------------------[ v0.28.1 ]------------------------------- -->
 ## [v0.28.1](https://github.com/stardust-ui/react/tree/v0.28.1) (2019-04-23)

packages/react/src/lib/accessibility/Behaviors/Popup/popupBehavior.ts

@@ -8,6 +8,7 @@ import * as _ from 'lodash'
  *
  * @specification
  * Adds attribute 'aria-disabled=true' to 'trigger' component's part if 'disabled' property is true. Does not set the attribute otherwise.
+ * Adds attribute 'role=complementary' to 'popup' component's part.
  */
 const popupBehavior: Accessibility = (props: any) => {
   const onAsArray = _.isArray(props.on) ? props.on : [props.on]
@@ -21,6 +22,9 @@ const popupBehavior: Accessibility = (props: any) => {
           ? true
           : undefined,
       },
+      popup: {
+        role: 'complementary',
+      },
     },
     keyActions: {
       popup: {

packages/react/src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts

@@ -9,13 +9,15 @@ 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.
+ * Adds attribute 'role=dialog' to 'popup' component's part.
  * Traps focus inside component.
  */
 const popupFocusTrapBehavior: Accessibility = (props: any) => {
   const behaviorData = popupBehavior(props)
   behaviorData.attributes.popup = {
     ...behaviorData.attributes.popup,
     'aria-modal': true,
+    role: 'dialog',
   }
   behaviorData.focusTrap = true