feat(status): Add status behavior

docs/src/components/DocsBehaviorRoot.tsx

@@ -41,7 +41,7 @@ class DocsBehaviorRoot extends React.Component<any, any> {
               <Header
                 as="h1"
                 content={pageTitle}
-                subheader={`Keyboard and Screenreader options for ${match.params.name}s.`}
+                subheader={`Keyboard and Screenreader options for ${match.params.name} component.`}
               />
             </Grid.Column>
           </Grid.Row>

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 alt="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" alt="success" /> <code>state="success"</code>
     <br />
-    <Status state="info" /> <code>state="info"</code>
+    <Status state="info" alt="info" /> <code>state="info"</code>
     <br />
-    <Status state="warning" /> <code>state="warning"</code>
+    <Status state="warning" alt="warning" /> <code>state="warning"</code>
     <br />
-    <Status state="error" /> <code>state="error"</code>
+    <Status state="error" alt="error" /> <code>state="error"</code>
     <br />
-    <Status state="unknown" /> <code>state="unknown"</code>
+    <Status state="unknown" alt="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" alt="red" />
     &emsp;
-    <Status color="orange" />
+    <Status color="orange" alt="orange" />
     &emsp;
-    <Status color="yellow" />
+    <Status color="yellow" alt="yellow" />
     &emsp;
-    <Status color="green" />
+    <Status color="green" alt="green" />
     &emsp;
-    <Status color="blue" />
+    <Status color="blue" alt="blue" />
     &emsp;
-    <Status color="violet" />
+    <Status color="violet" alt="violet" />
   </div>
 )
 

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

@@ -3,11 +3,11 @@ import { Status } from '@stardust-ui/react'
 
 const StatusCustomExampleShorthand = () => (
   <div>
-    <Status color="orange" icon="clock" title="Be right back" />
+    <Status color="orange" icon="clock" title="Be right back" alt="be right back" />
     &emsp;
-    <Status color="blue" icon="home" title="Working from home" />
+    <Status color="blue" icon="home" title="Working from home" alt="working from home" />
     &emsp;
-    <Status color="red" icon="minus" title="Do not disturb" />
+    <Status color="red" icon="minus" title="Do not disturb" alt="do not disturb" />
   </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" alt="available" />
     &emsp;
-    <Status state="error" icon="minus" />
+    <Status state="error" icon="minus" alt="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
+ * Don't forget to put appropriate 'alt' attribute describing status. This is necessary for correct screen reader behavior.
  */
 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,19 @@
+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)