feat(Accordion): disabled accordion title (#2290)

* disabled accordion title

Author: jurokapsiar

CHANGELOG.md

@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add optional wrapper function to `List` which can be used to inject custom scrollbars to `Dropdown` @jurokapsiar ([#2092](https://github.com/microsoft/fluent-ui-react/pull/2092))
 - Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
 - Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
+- Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))

packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts

@@ -4,7 +4,7 @@ import { Accessibility } from '../../types'
 /**
  * @description
  * Adds accessibility attributed to implement the Accordion design pattern.
- * Adds 'aria-disabled' to the 'content' slot with a value based on active and canBeCollapsed props.
+ * Adds 'aria-disabled' to the 'content' slot with a value based on disabled, active and canBeCollapsed props.
  * Adds role='heading' and aria-level='3' if the element type is not a header.
  *
  * @specification
@@ -16,6 +16,7 @@ import { Accessibility } from '../../types'
  */
 const accordionTitleBehavior: Accessibility<AccordionTitleBehaviorProps> = props => {
   const isHeading = /(h\d{1})$/.test(props.as)
+  const forcedOpen = props.active && !props.canBeCollapsed
   return {
     attributes: {
       root: {
@@ -24,7 +25,7 @@ const accordionTitleBehavior: Accessibility<AccordionTitleBehaviorProps> = props
       },
       content: {
         'aria-expanded': !!props.active,
-        'aria-disabled': !!(props.active && !props.canBeCollapsed),
+        'aria-disabled': !!(forcedOpen || props.disabled),
         'aria-controls': props.accordionContentId,
         role: 'button',
         tabIndex: 0,
@@ -49,6 +50,8 @@ type AccordionTitleBehaviorProps = {
   active?: boolean
   /** If at least one panel needs to stay active and this title does not correspond to the last active one. */
   canBeCollapsed?: boolean
+  /** An accordion title can show it is currently unable to be interacted with. */
+  disabled?: boolean
   /** Id of the content it owns. */
   accordionContentId?: string
 }

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

@@ -38,6 +38,9 @@ export interface AccordionTitleProps
   /** If at least one panel needs to stay active and this title does not correspond to the last active one. */
   canBeCollapsed?: boolean
 
+  /** An accordion title can show it is currently unable to be interacted with. */
+  disabled?: boolean
+
   /** AccordionTitle index inside Accordion. */
   index?: number
 
@@ -78,6 +81,7 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
     active: PropTypes.bool,
     contentRef: customPropTypes.ref,
     canBeCollapsed: PropTypes.bool,
+    disabled: PropTypes.bool,
     index: PropTypes.number,
     onClick: PropTypes.func,
     indicator: customPropTypes.itemShorthand,
@@ -97,7 +101,9 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
   }
 
   handleClick = (e: React.SyntheticEvent) => {
-    _.invoke(this.props, 'onClick', e, this.props)
+    if (!this.props.disabled) {
+      _.invoke(this.props, 'onClick', e, this.props)
+    }
   }
 
   handleFocus = (e: React.SyntheticEvent) => {

packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts

@@ -2,11 +2,11 @@ import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 import { AccordionTitleProps } from '../../../../components/Accordion/AccordionTitle'
 
 const accordionTitleStyles: ComponentSlotStylesPrepared<AccordionTitleProps> = {
-  root: () => ({
+  root: ({ props: p }) => ({
     display: 'inline-block',
     verticalAlign: 'middle',
     padding: '.5rem 0',
-    cursor: 'pointer',
+    cursor: p.disabled ? 'default' : 'pointer',
   }),
   indicator: () => ({
     userSelect: 'none',

packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx

@@ -1,5 +1,8 @@
+import * as React from 'react'
+import * as keyboardKey from 'keyboard-key'
 import AccordionTitle from 'src/components/Accordion/AccordionTitle'
 import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
+import { mountWithProvider } from 'test/utils'
 
 describe('AccordionTitle', () => {
   isConformant(AccordionTitle, {
@@ -21,4 +24,46 @@ describe('AccordionTitle', () => {
       })
     })
   })
+
+  const getContent = wrapper => wrapper.find(`div.${AccordionTitle.slotClassNames.content}`)
+
+  describe('click handler', () => {
+    it('is called on click', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} />)
+
+      getContent(wrapper).simulate('click')
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('is not called on click for disabled title', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} disabled={true} />)
+
+      getContent(wrapper).simulate('click')
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Enter key', () => {
+    it('calls onClick', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} />)
+
+      getContent(wrapper).simulate('keydown', {
+        keyCode: keyboardKey.Enter,
+      })
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('does not call onClick for disabled title', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} disabled={true} />)
+
+      getContent(wrapper).simulate('keydown', {
+        keyCode: keyboardKey.Enter,
+      })
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
 })