feat(Accessibility): checkbox behavior for multiselect pattern

CHANGELOG.md

@@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `useStyles()` hook to use theming capabilities in custom components @layershifter, @mnajdova ([#2217](https://github.com/microsoft/fluent-ui-react/pull/2217))
 - 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 `checkboxMultiselect` behavior and example @jurokapsiar ([#2264](https://github.com/microsoft/fluent-ui-react/pull/2264))
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))

docs/src/examples/components/Checkbox/Types/CheckboxListboxExample.shorthand.tsx

@@ -0,0 +1,13 @@
+import { List, Checkbox, checkboxMultiselectBehavior } from '@fluentui/react'
+import * as React from 'react'
+
+const CheckboxLisboxExample = () => (
+  <List selectable aria-multiselectable={true}>
+    <Checkbox label="Option 1" accessibility={checkboxMultiselectBehavior} />
+    <Checkbox label="Option 2" accessibility={checkboxMultiselectBehavior} />
+    <Checkbox label="Option 3" accessibility={checkboxMultiselectBehavior} />
+    <Checkbox label="Option 4" accessibility={checkboxMultiselectBehavior} />
+  </List>
+)
+
+export default CheckboxLisboxExample

docs/src/examples/components/Checkbox/Types/index.tsx

@@ -15,6 +15,11 @@ const Types = () => (
       description="A checkbox can be formatted to show an on or off choice."
       examplePath="components/Checkbox/Types/CheckboxExampleToggle"
     />
+    <ComponentExample
+      title="Multiselect Listbox"
+      description="A checkbox can be used in multiselect listbox (selectable List)"
+      examplePath="components/Checkbox/Types/CheckboxListboxExample"
+    />
   </ExampleSection>
 )
 

packages/accessibility/src/behaviors/Checkbox/checkboxMultiselectBehavior.ts

@@ -0,0 +1,40 @@
+import * as keyboardKey from 'keyboard-key'
+import { Accessibility } from '../../types'
+import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
+
+/**
+ * @description
+ * Allows grouping of related checkboxes
+ * Use inside of a container with `role='listbox'` and `aria-multiselectable='true'`
+ * @specification
+ * Adds role='option'. This allows screen readers to handle the component as an option in listbox.
+ * Adds attribute 'aria-selected=true' based on the property 'checked'.
+ * Adds attribute 'aria-disabled=true' based on the property 'disabled'.
+ * Adds attribute 'data-is-focusable=true' to 'root' slot.
+ */
+const checkboxMultiselectBehavior: Accessibility<CheckboxMultiselectBehaviorProps> = props => ({
+  attributes: {
+    root: {
+      'aria-selected': !!props.checked,
+      'aria-disabled': props.disabled,
+      role: 'option',
+      [IS_FOCUSABLE_ATTRIBUTE]: true,
+    },
+  },
+  keyActions: {
+    root: {
+      performClick: {
+        keyCombinations: [{ keyCode: keyboardKey.Spacebar }],
+      },
+    },
+  },
+})
+
+export default checkboxMultiselectBehavior
+
+type CheckboxMultiselectBehaviorProps = {
+  /** Whether or not item is checked. */
+  checked: boolean
+  /** If the checkbox is in disabled state. */
+  disabled?: boolean
+}

packages/accessibility/src/behaviors/index.ts

@@ -50,6 +50,7 @@ export { default as accordionBehavior } from './Accordion/accordionBehavior'
 export { default as accordionTitleBehavior } from './Accordion/accordionTitleBehavior'
 export { default as accordionContentBehavior } from './Accordion/accordionContentBehavior'
 export { default as checkboxBehavior } from './Checkbox/checkboxBehavior'
+export { default as checkboxMultiselectBehavior } from './Checkbox/checkboxMultiselectBehavior'
 export { default as tooltipAsDescriptionBehavior } from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsLabelBehavior } from './Tooltip/tooltipAsLabelBehavior'
 export { default as sliderBehavior } from './Slider/sliderBehavior'

packages/accessibility/test/behaviors/behavior-test.tsx

@@ -10,6 +10,7 @@ import {
   basicListItemBehavior,
   buttonBehavior,
   checkboxBehavior,
+  checkboxMultiselectBehavior,
   embedBehavior,
   iconBehavior,
   imageBehavior,
@@ -93,6 +94,7 @@ testHelper.addBehavior('basicListBehavior', basicListBehavior)
 testHelper.addBehavior('basicListItemBehavior', basicListItemBehavior)
 testHelper.addBehavior('buttonBehavior', buttonBehavior)
 testHelper.addBehavior('checkboxBehavior', checkboxBehavior)
+testHelper.addBehavior('checkboxMultiselectBehavior', checkboxMultiselectBehavior)
 testHelper.addBehavior('embedBehavior', embedBehavior)
 testHelper.addBehavior('iconBehavior', iconBehavior)
 testHelper.addBehavior('inputBehavior', inputBehavior)