fix(Accessibility): allow focusing radio and checkbox in the focus zone

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Update Silver color scheme, changing `backgroundHover` and `backgroundPressed` for high-contrast theme @pompomon ([#2078](https://github.com/microsoft/fluent-ui-react/pull/2078))
 - Updating the `attachment` component styles to match Teams theme @notandrew ([#2012](https://github.com/stardust-ui/react/pull/2012))
 - Honor `disableAnimations` prop in `Provider` @miroslavstastny ([#2087](https://github.com/microsoft/fluent-ui-react/pull/2087))
+- Allow focusing radio and checkbox in the focus zone @jurokapsiar ([#2103](https://github.com/microsoft/fluent-ui-react/pull/2103))
 - Apply unhandled props of `Ref` to the children if used @jurokapsiar ([#2105](https://github.com/microsoft/fluent-ui-react/pull/2105))
 
 ### Features

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

@@ -1,12 +1,14 @@
 import * as keyboardKey from 'keyboard-key'
 import { Accessibility } from '../../types'
+import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
 
 /**
  * @specification
  * Adds role='checkbox'. This allows screen readers to handle the component as a checkbox button.
  * Adds attribute 'aria-checked=true' based on the property 'checked'.
  * Adds attribute 'aria-disabled=true' based on the property 'disabled'.
  * Adds attribute 'tabIndex=0' to 'root' slot.
+ * Adds attribute 'data-is-focusable=true' to 'root' slot.
  */
 const checkboxBehavior: Accessibility<CheckboxBehaviorProps> = props => ({
   attributes: {
@@ -15,6 +17,7 @@ const checkboxBehavior: Accessibility<CheckboxBehaviorProps> = props => ({
       'aria-disabled': props.disabled,
       role: 'checkbox',
       tabIndex: 0,
+      [IS_FOCUSABLE_ATTRIBUTE]: true,
     },
   },
   keyActions: {

packages/accessibility/src/behaviors/Radio/radioGroupItemBehavior.ts

@@ -1,11 +1,13 @@
 import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
+import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
 
 /**
  * @specification
  *  Adds role='radio'. This allows screen readers to handle the component as a radio button.
  *  Adds attribute 'aria-checked=true' based on the property 'checked'.
  *  Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
+ *  Adds attribute 'data-is-focusable=true' based on the property 'checked'.
  *  Triggers 'performClick' action with 'Spacebar' on 'root'.
  *  Implements roving tabIndex.
  */
@@ -14,6 +16,7 @@ const radioGroupItemBehavior: Accessibility<RadioGroupItemBehaviorProps> = props
     root: {
       role: 'radio',
       tabIndex: props.checked ? 0 : -1,
+      ...(props.checked && { [IS_FOCUSABLE_ATTRIBUTE]: true }),
       'aria-checked': props.checked,
       'aria-disabled': props.disabled,
     },