feat(status): Add status behavior

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Export `lock` SVG icon @VyshnaviDasari ([#906](https://github.com/stardust-ui/react/pull/906))
+- Adding status behavior @kolaps33 ([#880](https://github.com/stardust-ui/react/pull/880))
 - Add basic animation library for Teams theme @bhamlefty @mnajdova ([#871](https://github.com/stardust-ui/react/pull/871)
 
 ### Fixes

docs/src/components/DocsBehaviorRoot.tsx

@@ -39,7 +39,7 @@ class DocsBehaviorRoot extends React.Component<any, any> {
             as="h1"
             aria-level="2"
             content={pageTitle}
-            description={`Keyboard and Screenreader options for ${match.params.name}s.`}
+            description={`Keyboard and Screenreader options for ${match.params.name} component.`}
           />
 
           {behaviorMenuItems

docs/src/examples/components/Status/Types/StatusExample.shorthand.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Status } from '@stardust-ui/react'
 
-const StatusExampleShorthand = () => <Status />
+const StatusExampleShorthand = () => <Status title="default state" />
 
 export default StatusExampleShorthand

docs/src/examples/components/Status/Types/StatusTypeExample.shorthand.tsx

@@ -3,15 +3,15 @@ import { Status } from '@stardust-ui/react'
 
 const StatusTypeExampleShorthand = () => (
   <div>
-    <Status state="success" /> <code>state="success"</code>
+    <Status state="success" title="success" /> <code>state="success"</code>
     <br />
-    <Status state="info" /> <code>state="info"</code>
+    <Status state="info" title="info" /> <code>state="info"</code>
     <br />
-    <Status state="warning" /> <code>state="warning"</code>
+    <Status state="warning" title="warning" /> <code>state="warning"</code>
     <br />
-    <Status state="error" /> <code>state="error"</code>
+    <Status state="error" title="error" /> <code>state="error"</code>
     <br />
-    <Status state="unknown" /> <code>state="unknown"</code>
+    <Status state="unknown" title="unknown" /> <code>state="unknown"</code>
   </div>
 )
 

docs/src/examples/components/Status/Variations/StatusColorExample.shorthand.tsx

@@ -3,17 +3,17 @@ import { Status } from '@stardust-ui/react'
 
 const StatusColorExampleShorthand = () => (
   <div>
-    <Status color="red" />
+    <Status color="red" title="red" />
     &emsp;
-    <Status color="orange" />
+    <Status color="orange" title="orange" />
     &emsp;
-    <Status color="yellow" />
+    <Status color="yellow" title="yellow" />
     &emsp;
-    <Status color="green" />
+    <Status color="green" title="green" />
     &emsp;
-    <Status color="blue" />
+    <Status color="blue" title="blue" />
     &emsp;
-    <Status color="violet" />
+    <Status color="violet" title="violet" />
   </div>
 )
 

docs/src/examples/components/Status/Variations/StatusIconExample.shorthand.tsx

@@ -3,9 +3,9 @@ import { Status } from '@stardust-ui/react'
 
 const StatusIconExampleShorthand = () => (
   <div>
-    <Status state="success" icon="check" />
+    <Status state="success" icon="check" title="available" />
     &emsp;
-    <Status state="error" icon="minus" />
+    <Status state="error" icon="minus" title="busy" />
   </div>
 )
 

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
 

packages/react/src/components/Status/Status.tsx

@@ -1,6 +1,8 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import Icon from '../Icon/Icon'
+import { statusBehavior } from '../../lib/accessibility'
+import { Accessibility } from '../../lib/accessibility/types'
 
 import {
   customPropTypes,
@@ -13,6 +15,12 @@ import {
 import { ReactProps, ShorthandValue } from '../../types'
 
 export interface StatusProps extends UIComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default statusBehavior
+   */
+  accessibility?: Accessibility
+
   /** A custom color. */
   color?: string
 
@@ -28,6 +36,8 @@ export interface StatusProps extends UIComponentProps {
 
 /**
  * A status graphically represents someone's or something's state.
+ * @accessibility
+ * The 'img' role is used to identify an element as image. 'Title' attribute have to be provided on status component. Then reader narrate content of 'title' attribute.
  */
 class Status extends UIComponent<ReactProps<StatusProps>, any> {
   static create: Function
@@ -41,22 +51,24 @@ class Status extends UIComponent<ReactProps<StatusProps>, any> {
       children: false,
       content: false,
     }),
+    accessibility: PropTypes.func,
     color: PropTypes.string,
     icon: customPropTypes.itemShorthand,
     size: customPropTypes.size,
     state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']),
   }
 
   static defaultProps = {
+    accessibility: statusBehavior,
     as: 'span',
     size: 'medium',
     state: 'unknown',
   }
 
-  renderComponent({ ElementType, classes, unhandledProps, variables, styles }) {
+  renderComponent({ accessibility, ElementType, classes, unhandledProps, variables, styles }) {
     const { icon } = this.props as StatusProps
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType {...unhandledProps} className={classes.root} {...accessibility.attributes.root}>
         {Icon.create(icon, {
           defaultProps: {
             size: 'smallest',

packages/react/src/index.ts

@@ -182,6 +182,7 @@ export {
   default as popupFocusTrapBehavior,
 } from './lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior'
 export { default as dialogBehavior } from './lib/accessibility/Behaviors/Dialog/dialogBehavior'
+export { default as statusBehavior } from './lib/accessibility/Behaviors/Status/statusBehavior'
 
 //
 // Utilities

packages/react/src/lib/accessibility/Behaviors/Status/statusBehavior.ts

@@ -0,0 +1,18 @@
+import { Accessibility } from '../../types'
+
+/**
+ * @description
+ * The 'img' role is used to identify an element as image. Alt attribute have to be provided on status component.
+ *
+ * @specification
+ * Adds role='img'.
+ */
+const statusBehavior: Accessibility = (props: any) => ({
+  attributes: {
+    root: {
+      role: 'img',
+    },
+  },
+})
+
+export default statusBehavior

packages/react/src/lib/accessibility/index.ts

@@ -29,3 +29,4 @@ export { default as chatMessageBehavior } from './Behaviors/Chat/chatMessageBeha
 export { default as gridBehavior } from './Behaviors/Grid/gridBehavior'
 export { default as treeTitleBehavior } from './Behaviors/Tree/treeTitleBehavior'
 export { default as dialogBehavior } from './Behaviors/Dialog/dialogBehavior'
+export { default as statusBehavior } from './Behaviors/Status/statusBehavior'

packages/react/test/specs/behaviors/behavior-test.tsx

@@ -31,6 +31,7 @@ import {
   toolbarButtonBehavior,
   treeTitleBehavior,
   gridBehavior,
+  statusBehavior,
 } from 'src/lib/accessibility'
 import { TestHelper } from './testHelper'
 import definitions from './testDefinitions'
@@ -66,5 +67,6 @@ testHelper.addBehavior('toolbarButtonBehavior', toolbarButtonBehavior)
 testHelper.addBehavior('treeTitleBehavior', treeTitleBehavior)
 testHelper.addBehavior('gridBehavior', gridBehavior)
 testHelper.addBehavior('dialogBehavior', dialogBehavior)
+testHelper.addBehavior('statusBehavior', statusBehavior)
 
 testHelper.run(behaviorMenuItems)