diff --git a/CHANGELOG.md b/CHANGELOG.md index 91574c00c0..14838563f1 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts b/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts index 3c25b4f5d0..c19a674928 100644 --- a/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts +++ b/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts @@ -1,5 +1,6 @@ import * as keyboardKey from 'keyboard-key' import { Accessibility } from '../../types' +import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes' /** * @specification @@ -7,6 +8,7 @@ import { Accessibility } from '../../types' * 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 = props => ({ attributes: { @@ -15,6 +17,7 @@ const checkboxBehavior: Accessibility = props => ({ 'aria-disabled': props.disabled, role: 'checkbox', tabIndex: 0, + [IS_FOCUSABLE_ATTRIBUTE]: true, }, }, keyActions: { diff --git a/packages/accessibility/src/behaviors/Radio/radioGroupItemBehavior.ts b/packages/accessibility/src/behaviors/Radio/radioGroupItemBehavior.ts index b3e31722fb..98a3a37b97 100644 --- a/packages/accessibility/src/behaviors/Radio/radioGroupItemBehavior.ts +++ b/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 = props root: { role: 'radio', tabIndex: props.checked ? 0 : -1, + ...(props.checked && { [IS_FOCUSABLE_ATTRIBUTE]: true }), 'aria-checked': props.checked, 'aria-disabled': props.disabled, },