fix(mixed): add accessibility prop to all components

Author: layershifter

packages/react/src/components/Accordion/Accordion.tsx

@@ -104,7 +104,7 @@ class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any>
         }),
       ),
     ]),
-    accessibility: PropTypes.func,
+    accessibility: customPropTypes.accessibility,
 
     renderPanelTitle: PropTypes.func,
     renderPanelContent: PropTypes.func,

packages/react/src/components/Attachment/Attachment.tsx

@@ -75,7 +75,7 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
     ...commonPropTypes.createCommon({
       content: false,
     }),
-    accessibility: PropTypes.func,
+    accessibility: customPropTypes.accessibility,
     action: customPropTypes.itemShorthand,
     actionable: PropTypes.bool,
     description: customPropTypes.itemShorthand,

packages/react/src/components/Avatar/Avatar.tsx

@@ -3,6 +3,8 @@ import * as React from 'react'
 import Image from '../Image/Image'
 import Label from '../Label/Label'
 import Status, { StatusProps } from '../Status/Status'
+import { Accessibility } from '../../lib/accessibility/types'
+import { defaultBehavior } from '../../lib/accessibility'
 import { ReactProps, ShorthandValue } from '../../types'
 import {
   createShorthandFactory,
@@ -14,6 +16,12 @@ import {
 } from '../../lib'
 
 export interface AvatarProps extends UIComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
   /** Shorthand for the image. */
   image?: ShorthandValue
 
@@ -48,6 +56,7 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
       children: false,
       content: false,
     }),
+    accessibility: customPropTypes.accessibility,
     name: PropTypes.string,
     image: customPropTypes.itemShorthand,
     label: customPropTypes.itemShorthand,
@@ -57,6 +66,7 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
   }
 
   static defaultProps = {
+    accessibility: defaultBehavior,
     size: 'medium',
     getInitials(name: string) {
       if (!name) {
@@ -81,11 +91,11 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
     },
   } as AvatarProps
 
-  renderComponent({ ElementType, classes, unhandledProps, styles, variables }) {
+  renderComponent({ accessibility, ElementType, classes, unhandledProps, styles, variables }) {
     const { name, status, image, label, getInitials, size } = this.props as AvatarProps
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
         {Image.create(image, {
           defaultProps: {
             fluid: true,

packages/react/src/components/Button/Button.tsx

@@ -106,7 +106,7 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
     primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
     text: PropTypes.bool,
     secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
-    accessibility: PropTypes.func,
+    accessibility: customPropTypes.accessibility,
   }
 
   public static defaultProps = {

packages/react/src/components/Button/ButtonGroup.tsx

@@ -13,12 +13,20 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } from '../../lib'
+import { Accessibility } from '../../lib/accessibility/types'
+import { defaultBehavior } from '../../lib/accessibility'
 import Button from './Button'
 
 export interface ButtonGroupProps
   extends UIComponentProps,
     ChildrenComponentProps,
     ContentComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
   /** The buttons contained inside the ButtonGroup. */
   buttons?: ShorthandValue[]
 
@@ -36,12 +44,13 @@ class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
 
   public static propTypes = {
     ...commonPropTypes.createCommon(),
-    accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    accessibility: customPropTypes.accessibility,
     buttons: customPropTypes.collectionShorthand,
     circular: PropTypes.bool,
   }
 
   public static defaultProps = {
+    accessibility: defaultBehavior,
     as: 'div',
   }
 

packages/react/src/components/Chat/Chat.tsx

@@ -39,7 +39,7 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
     ...commonPropTypes.createCommon({
       content: false,
     }),
-    accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    accessibility: customPropTypes.accessibility,
     items: PropTypes.arrayOf(customPropTypes.itemShorthand),
   }
 

packages/react/src/components/Chat/ChatItem.tsx

@@ -14,6 +14,8 @@ import {
   rtlTextContainer,
 } from '../../lib'
 import Box from '../Box/Box'
+import { Accessibility } from '../../lib/accessibility/types'
+import { defaultBehavior } from '../../lib/accessibility'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
 
 export interface ChatItemSlotClassNames {
@@ -22,6 +24,12 @@ export interface ChatItemSlotClassNames {
 }
 
 export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
   /** Controls item's relation to other chat items. */
   attached?: boolean | 'top' | 'bottom'
 
@@ -46,19 +54,22 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: false }),
+    accessibility: customPropTypes.accessibility,
     attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
     gutter: customPropTypes.itemShorthand,
     contentPosition: PropTypes.oneOf(['start', 'end']),
     message: customPropTypes.itemShorthand,
   }
 
   static defaultProps = {
+    accessibility: defaultBehavior,
     as: 'li',
     contentPosition: 'start',
     attached: false,
   }
 
   renderComponent({
+    accessibility,
     ElementType,
     classes,
     unhandledProps,
@@ -69,6 +80,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
     return (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...accessibility.attributes.root}
         {...unhandledProps}
         className={classes.root}
       >

packages/react/src/components/Chat/ChatMessage.tsx

@@ -96,7 +96,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: 'shorthand' }),
-    accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    accessibility: customPropTypes.accessibility,
     actionMenu: customPropTypes.itemShorthand,
     author: customPropTypes.itemShorthand,
     badge: customPropTypes.itemShorthand,

packages/react/src/components/Dialog/Dialog.tsx

@@ -24,7 +24,7 @@ import Ref from '../Ref/Ref'
 export interface DialogProps extends UIComponentProps, ContentComponentProps, ColorComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
-   * @default defaultBehavior
+   * @default dialogBehavior
    */
   accessibility?: Accessibility
 
@@ -94,7 +94,7 @@ class Dialog extends AutoControlledComponent<ReactProps<DialogProps>, DialogStat
       content: true,
     }),
     actions: customPropTypes.itemShorthand,
-    accessibility: PropTypes.func,
+    accessibility: customPropTypes.accessibility,
     cancelButton: customPropTypes.itemShorthand,
     confirmButton: customPropTypes.itemShorthand,
     defaultOpen: PropTypes.bool,

packages/react/src/components/Divider/Divider.tsx

@@ -11,14 +11,23 @@ import {
   ContentComponentProps,
   commonPropTypes,
   rtlTextContainer,
+  customPropTypes,
 } from '../../lib'
+import { Accessibility } from '../../lib/accessibility/types'
+import { defaultBehavior } from '../../lib/accessibility'
 import { ReactProps } from '../../types'
 
 export interface DividerProps
   extends UIComponentProps,
     ChildrenComponentProps,
     ColorComponentProps,
     ContentComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
   /** A divider can be fitted, without any space above or below it.  */
   fitted?: boolean
 
@@ -41,21 +50,24 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({ color: true }),
+    accessibility: customPropTypes.accessibility,
     fitted: PropTypes.bool,
     size: PropTypes.number,
     important: PropTypes.bool,
   }
 
   static defaultProps = {
+    accessibility: defaultBehavior,
     size: 0,
   }
 
-  renderComponent({ ElementType, classes, unhandledProps }) {
+  renderComponent({ accessibility, ElementType, classes, unhandledProps }) {
     const { children, content } = this.props
 
     return (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...accessibility.attributes.root}
         {...unhandledProps}
         className={classes.root}
       >

packages/react/src/components/Form/Form.tsx

@@ -11,10 +11,18 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } from '../../lib'
+import { Accessibility } from '../../lib/accessibility/types'
+import { defaultBehavior } from '../../lib/accessibility'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
 import FormField from './FormField'
 
 export interface FormProps extends UIComponentProps, ChildrenComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
   /** The HTML form action. */
   action?: string
 
@@ -45,25 +53,28 @@ class Form extends UIComponent<ReactProps<FormProps>, any> {
     ...commonPropTypes.createCommon({
       content: false,
     }),
+    accessibility: customPropTypes.accessibility,
     action: PropTypes.string,
     fields: customPropTypes.collectionShorthand,
     onSubmit: PropTypes.func,
   }
 
   public static defaultProps = {
+    accessibility: defaultBehavior,
     as: 'form',
   }
 
   public static Field = FormField
 
-  public renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
+  public renderComponent({ accessibility, ElementType, classes, unhandledProps }): React.ReactNode {
     const { action, children } = this.props
     return (
       <ElementType
         className={classes.root}
         action={action}
         onSubmit={this.handleSubmit}
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...accessibility.attributes.root}
         {...unhandledProps}
       >
         {childrenExist(children) ? children : this.renderFields()}

packages/react/src/components/Form/FormField.tsx

@@ -10,12 +10,20 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
 } from '../../lib'
+import { Accessibility } from '../../lib/accessibility/types'
+import { defaultBehavior } from '../../lib/accessibility'
 import { ReactProps, ShorthandValue } from '../../types'
 import Text from '../Text/Text'
 import Input from '../Input/Input'
 import Box from '../Box/Box'
 
 export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+
   /** A control for the form field. */
   control?: ShorthandValue
 
@@ -55,6 +63,7 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
     ...commonPropTypes.createCommon({
       content: false,
     }),
+    accessibility: customPropTypes.accessibility,
     control: customPropTypes.itemShorthand,
     id: PropTypes.string,
     inline: PropTypes.bool,
@@ -66,6 +75,7 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
   }
 
   public static defaultProps = {
+    accessibility: defaultBehavior,
     as: 'div',
     control: { as: Input },
   }
@@ -108,7 +118,7 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
     )
 
     return (
-      <ElementType className={classes.root} {...unhandledProps}>
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
         {childrenExist(children) ? children : content}
       </ElementType>
     )

packages/react/src/components/Grid/Grid.tsx

@@ -48,7 +48,7 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
     ...commonPropTypes.createCommon({
       content: false,
     }),
-    accessibility: PropTypes.func,
+    accessibility: customPropTypes.accessibility,
     columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     content: customPropTypes.every([
       customPropTypes.disallow(['children']),
@@ -66,6 +66,7 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
   }
 
   public renderComponent({
+    accessibility,
     ElementType,
     classes,
     unhandledProps,
@@ -76,6 +77,7 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
       <ElementType
         className={classes.root}
         {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...accessibility.attributes.root}
         {...unhandledProps}
       >
         {childrenExist(children) ? children : content}