feat(accessibility): Add FocusZone for ButtonGroup, TabList and Toolbar behaviors

src/components/Button/ButtonGroup.tsx

@@ -6,6 +6,8 @@ import { UIComponent, childrenExist, customPropTypes } from '../../lib'
 import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme'
 import { Extendable, ItemShorthand, ReactChildren } from '../../../types/utils'
 import Button from './Button'
+import { ButtonGroupBehavior } from '../../lib/accessibility'
+import { Accessibility } from '../../lib/accessibility/interfaces'
 
 export interface IButtonGroupProps {
   as?: any
@@ -27,6 +29,9 @@ class ButtonGroup extends UIComponent<Extendable<IButtonGroupProps>, any> {
   public static className = 'ui-buttons'
 
   public static propTypes = {
+    /** Accessibility behavior if overridden by the user. */
+    accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
@@ -53,6 +58,7 @@ class ButtonGroup extends UIComponent<Extendable<IButtonGroupProps>, any> {
   }
 
   static handledProps = [
+    'accessibility',
     'as',
     'buttons',
     'children',
@@ -65,6 +71,7 @@ class ButtonGroup extends UIComponent<Extendable<IButtonGroupProps>, any> {
 
   public static defaultProps = {
     as: 'div',
+    accessibility: ButtonGroupBehavior as Accessibility,
   }
 
   public renderComponent({
@@ -78,7 +85,7 @@ class ButtonGroup extends UIComponent<Extendable<IButtonGroupProps>, any> {
     const { children, content, buttons, circular } = this.props
     if (_.isNil(buttons)) {
       return (
-        <ElementType {...rest} className={classes.root}>
+        <ElementType {...accessibility.attributes.root} {...rest} className={classes.root}>
           {childrenExist(children) ? children : content}
         </ElementType>
       )

src/lib/accessibility/Behaviors/Button/ButtonGroupBehavior.ts

@@ -0,0 +1,17 @@
+import { Accessibility, FocusZoneMode } from '../../interfaces'
+
+const ButtonGroupBehavior: Accessibility = {
+  attributes: {
+    root: {
+      role: 'presentation',
+    },
+  },
+  focusZone: {
+    mode: FocusZoneMode.Wrap,
+    props: {
+      isCircularNavigation: false,
+    },
+  },
+}
+
+export default ButtonGroupBehavior

src/lib/accessibility/Behaviors/Tab/TabListBehavior.ts

@@ -1,11 +1,17 @@
-import { Accessibility } from '../../interfaces'
+import { Accessibility, FocusZoneMode } from '../../interfaces'
 
 const TabListBehavior: Accessibility = {
   attributes: {
     root: {
       role: 'tablist',
     },
   },
+  focusZone: {
+    mode: FocusZoneMode.Wrap,
+    props: {
+      isCircularNavigation: false,
+    },
+  },
 }
 
 export default TabListBehavior

src/lib/accessibility/Behaviors/Toolbar/ToolbarBehavior.ts

@@ -1,11 +1,17 @@
-import { Accessibility } from '../../interfaces'
+import { Accessibility, FocusZoneMode } from '../../interfaces'
 
 const ToolbarBehavior: Accessibility = {
   attributes: {
     root: {
       role: 'toolbar',
     },
   },
+  focusZone: {
+    mode: FocusZoneMode.Wrap,
+    props: {
+      isCircularNavigation: false,
+    },
+  },
 }
 
 export default ToolbarBehavior

src/lib/accessibility/index.ts

@@ -1,5 +1,6 @@
 export { default as DefaultBehavior } from './Behaviors/DefaultBehavior'
 export { default as ButtonBehavior } from './Behaviors/Button/ButtonBehavior'
+export { default as ButtonGroupBehavior } from './Behaviors/Button/ButtonGroupBehavior'
 export { default as ToggleButtonBehavior } from './Behaviors/Button/ToggleButtonBehavior'
 export { default as ImageBehavior } from './Behaviors/Image/ImageBehavior'
 export { default as MenuBehavior } from './Behaviors/Menu/MenuBehavior'

test/specs/components/Button/ButtonGroup-test.tsx

@@ -1,11 +1,20 @@
-import { isConformant } from 'test/specs/commonTests'
+import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
 import ButtonGroup from 'src/components/Button/ButtonGroup'
 import implementsCollectionShorthandProp from '../../commonTests/implementsCollectionShorthandProp'
 import Button from 'src/components/Button'
+import { ButtonGroupBehavior } from '../../../../src/lib/accessibility'
+import { IAccessibilityDefinition } from 'src/lib/accessibility/interfaces'
 
 const buttonGroupImplementsCollectionShorthandProp = implementsCollectionShorthandProp(ButtonGroup)
 
 describe('ButtonGroup', () => {
   isConformant(ButtonGroup)
   buttonGroupImplementsCollectionShorthandProp('buttons', Button)
+
+  describe('accessibility', () => {
+    handlesAccessibility(ButtonGroup, {
+      defaultRootRole: 'presentation',
+      focusZoneDefinition: (ButtonGroupBehavior as IAccessibilityDefinition).focusZone,
+    })
+  })
 })