feat(Accordion): add a11y behavior for kb navigation and screen reader support

CHANGELOG.md

@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add keyboard navigation and screen reader support for `Accordion` @silviuavram ([#1322](https://github.com/stardust-ui/react/pull/1322)) 
+- Add `expanded` prop to `Accordion` @silviuavram ([#1322](https://github.com/stardust-ui/react/pull/1322)) 
+
 <!--------------------------------[ v0.31.0 ]------------------------------- -->
 ## [v0.31.0](https://github.com/stardust-ui/react/tree/v0.31.0) (2019-05-21)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.30.0...v0.31.0)

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

@@ -10,11 +10,12 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   rtlTextContainer,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
-import AccordionTitle from './AccordionTitle'
+import { accordionBehavior } from '../../lib/accessibility'
+import AccordionTitle, { AccordionTitleProps } from './AccordionTitle'
 import AccordionContent from './AccordionContent'
-import { defaultBehavior } from '../../lib/accessibility'
-import { Accessibility } from '../../lib/accessibility/types'
+import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 
 import {
   ComponentEventHandler,
@@ -23,6 +24,7 @@ import {
   ShorthandRenderFunction,
   withSafeTypeForAs,
 } from '../../types'
+import { ContainerFocusHandler } from '../../lib/accessibility/FocusHandling/FocusContainer'
 
 export interface AccordionSlotClassNames {
   content: string
@@ -39,6 +41,9 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
   /** Only allow one panel open at a time. */
   exclusive?: boolean
 
+  /** At least one panel should be expanded at any time. */
+  expanded?: boolean
+
   /**
    * Called when a panel title is clicked.
    *
@@ -76,7 +81,12 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
   accessibility?: Accessibility
 }
 
-class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, any> {
+export interface AccordionState {
+  activeIndex: number[] | number
+  focusedIndex: number
+}
+
+class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, AccordionState> {
   static displayName = 'Accordion'
 
   static className = 'ui-accordion'
@@ -99,6 +109,7 @@ class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, any>
       PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
     ]),
     exclusive: PropTypes.bool,
+    expanded: PropTypes.bool,
     onTitleClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
     panels: customPropTypes.every([
       customPropTypes.disallow(['children']),
@@ -115,64 +126,160 @@ class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, any>
   }
 
   public static defaultProps = {
-    accessibility: defaultBehavior as Accessibility,
+    accessibility: accordionBehavior,
+    as: 'dl',
   }
 
   static autoControlledProps = ['activeIndex']
 
   static Title = AccordionTitle
   static Content = AccordionContent
 
-  getInitialAutoControlledState({ exclusive }) {
-    return { activeIndex: exclusive ? -1 : [-1] }
+  private focusHandler: ContainerFocusHandler = null
+  private itemRefs = []
+
+  actionHandlers: AccessibilityActionHandlers = {
+    moveNext: e => {
+      e.preventDefault()
+      this.focusHandler.moveNext()
+    },
+    movePrevious: e => {
+      e.preventDefault()
+      this.focusHandler.movePrevious()
+    },
+    moveFirst: e => {
+      e.preventDefault()
+      this.focusHandler.moveFirst()
+    },
+    moveLast: e => {
+      e.preventDefault()
+      this.focusHandler.moveLast()
+    },
+  }
+
+  constructor(props, context) {
+    super(props, context)
+
+    this.focusHandler = new ContainerFocusHandler(
+      this.getNavigationItemsSize,
+      this.handleNavigationFocus,
+      true,
+    )
+  }
+
+  private handleNavigationFocus = (index: number) => {
+    this.setState({ focusedIndex: index }, () => {
+      const targetComponent = this.itemRefs[index] && this.itemRefs[index].current
+      targetComponent && targetComponent.focus()
+    })
   }
 
-  computeNewIndex = index => {
+  private getNavigationItemsSize = () => this.props.panels.length
+
+  getInitialAutoControlledState({ expanded, exclusive }: AccordionProps) {
+    const alwaysActiveIndex = expanded ? 0 : -1
+    return { activeIndex: exclusive ? alwaysActiveIndex : [alwaysActiveIndex] }
+  }
+
+  private computeNewIndex = (index: number): number | number[] => {
     const { activeIndex } = this.state
     const { exclusive } = this.props
 
+    if (!this.isIndexActionable(index)) {
+      return activeIndex
+    }
+
     if (exclusive) return index === activeIndex ? -1 : index
     // check to see if index is in array, and remove it, if not then add it
-    return _.includes(activeIndex, index) ? _.without(activeIndex, index) : [...activeIndex, index]
+    return _.includes(activeIndex as number[], index)
+      ? _.without(activeIndex as number[], index)
+      : [...(activeIndex as number[]), index]
   }
 
-  handleTitleOverrides = predefinedProps => ({
-    onClick: (e, titleProps) => {
+  private handleTitleOverrides = (predefinedProps: AccordionTitleProps) => ({
+    onClick: (e: React.SyntheticEvent, titleProps: AccordionTitleProps) => {
       const { index } = titleProps
       const activeIndex = this.computeNewIndex(index)
 
       this.trySetState({ activeIndex })
+      this.setState({ focusedIndex: index })
 
       _.invoke(predefinedProps, 'onClick', e, titleProps)
       _.invoke(this.props, 'onTitleClick', e, titleProps)
     },
+    onFocus: (e: React.SyntheticEvent, titleProps: AccordionTitleProps) => {
+      _.invoke(predefinedProps, 'onFocus', e, titleProps)
+      this.setState({ focusedIndex: predefinedProps.index })
+    },
   })
 
-  isIndexActive = (index): boolean => {
+  private isIndexActive = (index: number): boolean => {
     const { exclusive } = this.props
     const { activeIndex } = this.state
 
-    return exclusive ? activeIndex === index : _.includes(activeIndex, index)
+    return exclusive ? activeIndex === index : _.includes(activeIndex as number[], index)
+  }
+
+  /**
+   * Checks if panel at index can be actioned upon. Used in the case of expanded accordion,
+   * when at least a panel needs to stay active. Will return false if expanded prop is true,
+   * index is active and either it's an exclusive accordion or if there are no other active
+   * panels open besides this one.
+   *
+   * @param {number} index The index of the panel.
+   * @returns {boolean} If the panel can be set active/inactive.
+   */
+  private isIndexActionable = (index: number): boolean => {
+    if (!this.isIndexActive(index)) {
+      return true
+    }
+
+    const { activeIndex } = this.state
+    const { expanded, exclusive } = this.props
+
+    return !expanded || (!exclusive && (activeIndex as number[]).length > 1)
   }
 
   renderPanels = () => {
     const children: any[] = []
     const { panels, renderPanelContent, renderPanelTitle } = this.props
+    const { focusedIndex } = this.state
+
+    this.itemRefs = []
+    this.focusHandler.syncFocusedIndex(focusedIndex)
 
     _.each(panels, (panel, index) => {
       const { content, title } = panel
       const active = this.isIndexActive(index)
+      const canBeCollapsed = this.isIndexActionable(index)
+      const contentRef = React.createRef<HTMLElement>()
+      const titleId = title['id'] || _.uniqueId('accordion-title-')
+      const contentId = content['id'] || _.uniqueId('accordion-content-')
+      this.itemRefs[index] = contentRef
 
       children.push(
         AccordionTitle.create(title, {
-          defaultProps: { className: Accordion.slotClassNames.title, active, index },
+          defaultProps: {
+            className: Accordion.slotClassNames.title,
+            active,
+            index,
+            contentRef,
+            canBeCollapsed,
+            id: titleId,
+            accordionContentId: contentId,
+          },
           overrideProps: this.handleTitleOverrides,
           render: renderPanelTitle,
         }),
       )
       children.push(
         AccordionContent.create(content, {
-          defaultProps: { className: Accordion.slotClassNames.content, active },
+          defaultProps: {
+            className: Accordion.slotClassNames.content,
+            active,
+            id: contentId,
+            accordionTitleId: titleId,
+          },
           render: renderPanelContent,
         }),
       )
@@ -189,6 +296,7 @@ class Accordion extends AutoControlledComponent<WithAsProp<AccordionProps>, any>
         {...accessibility.attributes.root}
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
         className={classes.root}
       >
         {childrenExist(children) ? children : this.renderPanels()}

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

@@ -1,5 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+import * as _ from 'lodash'
 
 import {
   childrenExist,
@@ -12,11 +13,15 @@ import {
   rtlTextContainer,
 } from '../../lib'
 import { WithAsProp, ComponentEventHandler, withSafeTypeForAs } from '../../types'
+import { accordionContentBehavior } from '../../lib/accessibility'
 
 export interface AccordionContentProps
   extends UIComponentProps,
     ChildrenComponentProps,
     ContentComponentProps {
+  /** Id of the title it belongs to. */
+  accordionTitleId?: string
+
   /** Whether or not the content is visible. */
   active?: boolean
 
@@ -38,16 +43,28 @@ class AccordionContent extends UIComponent<WithAsProp<AccordionContentProps>, an
 
   static propTypes = {
     ...commonPropTypes.createCommon(),
+    accordionTitleId: PropTypes.string,
     active: PropTypes.bool,
     onClick: PropTypes.func,
   }
 
-  renderComponent({ ElementType, classes, unhandledProps }) {
+  static defaultProps = {
+    accessibility: accordionContentBehavior,
+    as: 'dd',
+  }
+
+  private handleClick = (e: React.SyntheticEvent) => {
+    _.invoke(this.props, 'onClick', e, this.props)
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps, accessibility }) {
     const { children, content } = this.props
 
     return (
       <ElementType
+        onClick={this.handleClick}
         {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...accessibility.attributes.root}
         {...unhandledProps}
         className={classes.root}
       >
@@ -63,6 +80,6 @@ AccordionContent.create = createShorthandFactory({
 })
 
 /**
- * A standard AccordionContent.
+ * A standard AccordionContent that is used to display content hosted in an accordion.
  */
 export default withSafeTypeForAs<typeof AccordionContent, AccordionContentProps>(AccordionContent)