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,