docs(accessibility): add decsriptions to components and behaviors

CHANGELOG.md

@@ -34,6 +34,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `menu` prop to `MenuItem` @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
 - Enable RTL for `FocusZone` @sophieH29 ([#646](https://github.com/stardust-ui/react/pull/646))
 
+### Documentation
+- Add more accessibility descriptions to components and behaviors @jurokapsiar  ([#648](https://github.com/stardust-ui/react/pull/648))
+
 <!--------------------------------[ v0.15.0 ]------------------------------- -->
 ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.14.0...v0.15.0)

docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx

@@ -26,6 +26,8 @@ const ComponentDocAccessibility = ({ info }) => {
         variables={{ color: 'black' }}
       />
 
+      {description && <p style={{ whiteSpace: 'pre-line' }}>{description}</p>}
+
       {behaviorName && (
         <p>
           Default behavior:{' '}
@@ -45,8 +47,6 @@ const ComponentDocAccessibility = ({ info }) => {
           ))}
         </p>
       )}
-
-      {description && <p style={{ whiteSpace: 'pre-line' }}>{description}</p>}
     </>
   )
 }

docs/src/components/DocsBehaviorRoot.tsx

@@ -69,26 +69,31 @@ class DocsBehaviorRoot extends React.Component<any, any> {
                   </div>
                 </Grid.Column>
                 <div style={{ padding: '1em' }}>
-                  <span> Description: </span>
-                  <br />
-                  {variation.description &&
-                    variation.description.split('\n').map((splittedText, keyValue) => {
-                      return (
+                  {variation.description && (
+                    <>
+                      <strong>Description:</strong>
+                      <br />
+                      {variation.description.split('\n').map((splittedText, keyValue) => (
                         <span key={keyValue}>
                           {splittedText}
                           <br />
                         </span>
-                      )
-                    })}
-                  {variation.specification &&
-                    variation.specification.split('\n').map((splittedText, keyValue) => {
-                      return (
+                      ))}
+                    </>
+                  )}
+                  {variation.specification && (
+                    <>
+                      {variation.description && <br />}
+                      <strong>Specification:</strong>
+                      <br />
+                      {variation.specification.split('\n').map((splittedText, keyValue) => (
                         <span key={keyValue}>
                           {splittedText}
                           <br />
                         </span>
-                      )
-                    })}
+                      ))}
+                    </>
+                  )}
                 </div>
               </Grid.Row>
             ))}

src/components/Accordion/Accordion.tsx

@@ -71,6 +71,9 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
 
 /**
  * An accordion allows users to toggle the display of sections of content.
+ * @accessibility
+ * Implements ARIA Accordion design pattern (keyboard navigation not yet supported).
+ * Consider using Tree if you intend to wrap Lists in an Accordion.
  */
 class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any> {
   static displayName = 'Accordion'

src/components/Dropdown/Dropdown.tsx

@@ -123,6 +123,8 @@ export interface DropdownState {
 /**
  * Dropdown allows user to select one or more values from a list of items.
  * Can also be created with search capability.
+ * @accessibility
+ * Implements ARIA collapsible Listbox design pattern, uses aria-live to announce state changes.
  */
 export default class Dropdown extends AutoControlledComponent<
   Extendable<DropdownProps>,

src/components/Menu/Menu.tsx

@@ -72,6 +72,8 @@ export interface MenuState {
 
 /**
  * A menu displays grouped navigation actions.
+ * @accessibility
+ * Implements ARIA Menu, Toolbar or Tabs design pattern, depending on the behavior used.
  */
 class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
   static displayName = 'Menu'

src/components/RadioGroup/RadioGroup.tsx

@@ -46,6 +46,8 @@ export interface RadioGroupProps extends UIComponentProps, ChildrenComponentProp
 
 /**
  * A radio group allows a user to select a value from a small set of options.
+ * @accessibility
+ * Implements ARIA Radio Group design pattern.
  */
 class RadioGroup extends AutoControlledComponent<ReactProps<RadioGroupProps>, any> {
   static displayName = 'RadioGroup'

src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts

@@ -3,6 +3,7 @@ import popupFocusTrapBehavior from '../Popup/popupFocusTrapBehavior'
 
 /**
  * @description
+ * Implements ARIA Dialog (Modal) design pattern.
  * Adds role='button' to 'trigger' component's part, if it is not focusable element and no role attribute provided.
  * Adds tabIndex='0' to 'trigger' component's part, if it is not tabbable element and no tabIndex attribute provided.
  *

src/lib/accessibility/Behaviors/Menu/menuBehavior.ts

@@ -3,6 +3,7 @@ import { FocusZoneDirection } from '../../FocusZone'
 
 /**
  * @description
+ * Implements ARIA Menu design pattern.
  * The 'menu' role is used to identify an element that creates a list of common actions or functions that a user can invoke.
  *
  * @specification

src/lib/accessibility/Behaviors/Radio/radioGroupBehavior.ts

@@ -2,6 +2,8 @@ import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
 
 /**
+ * @description
+ * Implements ARIA Radio Group design pattern.
  * @specification
  *  Adds role='radiogroup'. This allows screen readers to handle the component as a radio group.
  *  Performs 'nextItem' action on ArrowDown, ArrowRight.

src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts

@@ -1,6 +1,9 @@
 import { Accessibility, FocusZoneMode } from '../../types'
 
 /**
+ * @description
+ * Implements ARIA Tabs design pattern.
+ * Child item components need to have tabBehavior assigned.
  * @specification
  * Adds role 'tablist' to 'root' component's part.
  * Embeds FocusZone into component allowing arrow key navigation through the children of the component.

src/lib/accessibility/Behaviors/Toolbar/toolbarBehavior.ts

@@ -1,6 +1,9 @@
 import { Accessibility, FocusZoneMode } from '../../types'
 
 /**
+ * @description
+ * Implements ARIA Toolbar design pattern.
+ * Child item components need to have toolbarButtonBehavior assigned.
  * @specification
  * Adds role 'toolbar' to 'root' component's part.
  * Embeds FocusZone into component allowing arrow key navigation through the children of the component.