feat(mixed): add accessibility prop to all components (#927)

* fix(mixed): add `accessibility` prop to all components

* use factory

* fix lint issues

* fix propTypes

* update behavior

* add changelog entry

Author: layershifter

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add basic animation library for Teams theme @bhamlefty @mnajdova ([#871](https://github.com/stardust-ui/react/pull/871)
 - Export `accept` and `urgent` SVG icons to the Teams Theme @joheredi([#929](https://github.com/stardust-ui/react/pull/929))
 - Add `open`, `defaultOpen` and `onOpenChange` props for `Dropdown` component (controlled mode) @Bugaa92 ([#900](https://github.com/stardust-ui/react/pull/900))
+- Add `accessibility` prop to all components that supports it @layershifter ([#927](https://github.com/stardust-ui/react/pull/927))
 
 ### Fixes
 - Display correctly images in portrait mode inside `Avatar` @layershifter ([#899](https://github.com/stardust-ui/react/pull/899))

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

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

packages/react/src/components/Animation/Animation.tsx

@@ -91,6 +91,7 @@ class Animation extends UIComponent<ReactPropsStrict<AnimationProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({
+      accessibility: false,
       animated: false,
       content: false,
       children: 'element',

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

@@ -75,7 +75,6 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
     ...commonPropTypes.createCommon({
       content: false,
     }),
-    accessibility: PropTypes.func,
     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
 
@@ -57,6 +65,7 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
   }
 
   static defaultProps = {
+    accessibility: defaultBehavior,
     size: 'medium',
     getInitials(name: string) {
       if (!name) {
@@ -81,11 +90,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,6 @@ 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,
   }
 
   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,12 @@ class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
 
   public static propTypes = {
     ...commonPropTypes.createCommon(),
-    accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     buttons: customPropTypes.collectionShorthand,
     circular: PropTypes.bool,
   }
 
   public static defaultProps = {
+    accessibility: defaultBehavior,
     as: 'div',
   }
 

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

@@ -39,7 +39,6 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
     ...commonPropTypes.createCommon({
       content: false,
     }),
-    accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     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'
 
@@ -53,12 +61,14 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
   }
 
   static defaultProps = {
+    accessibility: defaultBehavior,
     as: 'li',
     contentPosition: 'start',
     attached: false,
   }
 
   renderComponent({
+    accessibility,
     ElementType,
     classes,
     unhandledProps,
@@ -69,6 +79,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,6 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: 'shorthand' }),
-    accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     actionMenu: customPropTypes.itemShorthand,
     author: customPropTypes.itemShorthand,
     badge: customPropTypes.itemShorthand,

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

@@ -94,7 +94,6 @@ class Dialog extends AutoControlledComponent<ReactProps<DialogProps>, DialogStat
       content: true,
     }),
     actions: customPropTypes.itemShorthand,
-    accessibility: PropTypes.func,
     cancelButton: customPropTypes.itemShorthand,
     confirmButton: customPropTypes.itemShorthand,
     defaultOpen: PropTypes.bool,

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

@@ -12,13 +12,21 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } 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
 
@@ -47,15 +55,17 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
   }
 
   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/Dropdown/Dropdown.tsx

@@ -210,6 +210,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
 
   static propTypes = {
     ...commonPropTypes.createCommon({
+      accessibility: false,
       children: false,
       content: false,
     }),

packages/react/src/components/Dropdown/DropdownItem.tsx

@@ -49,6 +49,7 @@ class DropdownItem extends UIComponent<ReactProps<DropdownItemProps>, any> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({
+      accessibility: false,
       children: false,
       content: false,
     }),

packages/react/src/components/Dropdown/DropdownSearchInput.tsx

@@ -68,6 +68,7 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
 
   static propTypes = {
     ...commonPropTypes.createCommon({
+      accessibility: false,
       children: false,
       content: false,
     }),

packages/react/src/components/Dropdown/DropdownSelectedItem.tsx

@@ -72,6 +72,7 @@ class DropdownSelectedItem extends UIComponent<ReactProps<DropdownSelectedItemPr
 
   static propTypes = {
     ...commonPropTypes.createCommon({
+      accessibility: false,
       children: false,
     }),
     active: PropTypes.bool,

packages/react/src/components/Flex/Flex.tsx

@@ -57,6 +57,7 @@ class Flex extends UIComponent<ReactProps<FlexProps>> {
 
   public static propTypes = {
     ...commonPropTypes.createCommon({
+      accessibility: false,
       content: false,
     }),
 

packages/react/src/components/Flex/FlexItem.tsx

@@ -43,6 +43,7 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
 
   static propTypes = {
     ...commonPropTypes.createCommon({
+      accessibility: false,
       content: false,
     }),
     align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),

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
 
@@ -51,19 +59,21 @@ class Form extends UIComponent<ReactProps<FormProps>, any> {
   }
 
   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
 
@@ -66,6 +74,7 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
   }
 
   public static defaultProps = {
+    accessibility: defaultBehavior,
     as: 'div',
     control: { as: Input },
   }
@@ -108,7 +117,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,6 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
     ...commonPropTypes.createCommon({
       content: false,
     }),
-    accessibility: PropTypes.func,
     columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     content: customPropTypes.every([
       customPropTypes.disallow(['children']),
@@ -66,6 +65,7 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
   }
 
   public renderComponent({
+    accessibility,
     ElementType,
     classes,
     unhandledProps,
@@ -76,6 +76,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}