Skip to content

Commit

Permalink
ToggleGroupControl: support disabled options (WordPress#63450)
Browse files Browse the repository at this point in the history 
* Add disabled option tests

* Fix handling of disabled prop on ToggleGroupControl options

* Add basic disabled styles

* Update snapshots

* CHANGELOG

* Support accessibleWhenDisabled for ratio option items

* Support accessibleWhenDisabled for button option items

* Update snapshots

* Update tests to reflect that options are keyboard focusable while disabled

* Move CHANGELOG entry to enhancements section

* Revert "Support accessibleWhenDisabled for ratio option items"

This reverts commit 62959f0.

--- 

Co-authored-by: ciampo <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: stokesman <[email protected]>
Co-authored-by: jasmussen <[email protected]>
  • Loading branch information
@ciampo @mirka
@tyxla @stokesman @carstingaxion
6 people authored and carstingaxion committed Jul 18, 2024
1 parent eeaeb2c commit 86f7ebd
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 7 deletions.
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@

### Enhancements

- `ToggleGroupControl`: support disabled options ([#63450](https://github.com/WordPress/gutenberg/pull/63450)).
- `CustomSelectControl`: Stabilize `__experimentalShowSelectedHint` and `options[]. __experimentalHint` props ([#63248](https://github.com/WordPress/gutenberg/pull/63248)).

## 28.3.0 (2024-07-10)
Expand Down
42 changes: 36 additions & 6 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,11 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
border: 0;
}
.emotion-12[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-12:active {
background: #fff;
}
Expand Down Expand Up @@ -213,6 +218,11 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
border: 0;
}
.emotion-18[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-18:active {
background: #fff;
}
Expand All @@ -238,7 +248,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
class="components-toggle-group-control emotion-8 emotion-9"
data-wp-c16t="true"
data-wp-component="ToggleGroupControl"
id="toggle-group-control-as-radio-group-10"
id="toggle-group-control-as-radio-group-11"
role="radiogroup"
>
<div
Expand All @@ -252,7 +262,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
data-value="uppercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-as-radio-group-10-24"
id="toggle-group-control-as-radio-group-11-30"
role="radio"
type="button"
value="uppercase"
Expand Down Expand Up @@ -291,7 +301,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
data-value="lowercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-as-radio-group-10-25"
id="toggle-group-control-as-radio-group-11-31"
role="radio"
type="button"
value="lowercase"
Expand Down Expand Up @@ -452,6 +462,11 @@ exports[`ToggleGroupControl controlled should render correctly with text options
border: 0;
}
.emotion-12[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-12:active {
background: #fff;
}
Expand Down Expand Up @@ -486,7 +501,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
class="components-toggle-group-control emotion-8 emotion-9"
data-wp-c16t="true"
data-wp-component="ToggleGroupControl"
id="toggle-group-control-as-radio-group-9"
id="toggle-group-control-as-radio-group-10"
role="radiogroup"
>
<div
Expand All @@ -499,7 +514,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
data-value="rigas"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-as-radio-group-9-22"
id="toggle-group-control-as-radio-group-10-28"
role="radio"
type="button"
value="rigas"
Expand All @@ -521,7 +536,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
data-value="jack"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-as-radio-group-9-23"
id="toggle-group-control-as-radio-group-10-29"
role="radio"
type="button"
value="jack"
Expand Down Expand Up @@ -677,6 +692,11 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
border: 0;
}
.emotion-12[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-12:active {
background: #fff;
}
Expand Down Expand Up @@ -758,6 +778,11 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
border: 0;
}
.emotion-18[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-18:active {
background: #fff;
}
Expand Down Expand Up @@ -991,6 +1016,11 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
border: 0;
}
.emotion-12[disabled] {
opacity: 0.4;
cursor: default;
}
.emotion-12:active {
background: #fff;
}
Expand Down
114 changes: 114 additions & 0 deletions packages/components/src/toggle-group-control/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,13 @@ const optionsWithTooltip = (
/>
</>
);
const optionsWithDisabledOption = (
<>
<ToggleGroupControlOption value="pizza" label="Pizza" />
<ToggleGroupControlOption value="rice" label="Rice" disabled />
<ToggleGroupControlOption value="pasta" label="Pasta" />
</>
);

describe.each( [
[ 'uncontrolled', ToggleGroupControl ],
Expand Down Expand Up @@ -351,6 +358,53 @@ describe.each( [

expect( expectedFocusTarget ).toHaveFocus();
} );

it( 'should ignore disabled radio options', async () => {
const mockOnChange = jest.fn();

render(
<Component
value="pizza"
onChange={ mockOnChange }
label="Test Toggle Group Control"
>
{ optionsWithDisabledOption }
</Component>
);

await sleep();
await press.Tab();

expect(
screen.getByRole( 'radio', { name: 'Pizza' } )
).toBeChecked();
expect(
screen.getByRole( 'radio', { name: 'Rice' } )
).toBeDisabled();

// Arrow navigation skips the disabled option
await press.ArrowRight();
expect(
screen.getByRole( 'radio', { name: 'Pasta' } )
).toBeChecked();
expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );

// Arrow navigation skips the disabled option
await press.ArrowLeft();
expect(
screen.getByRole( 'radio', { name: 'Pizza' } )
).toBeChecked();
expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
expect( mockOnChange ).toHaveBeenLastCalledWith( 'pizza' );

// Clicks don't cause the option to be selected
await click( screen.getByRole( 'radio', { name: 'Rice' } ) );
expect(
screen.getByRole( 'radio', { name: 'Pizza' } )
).toBeChecked();
expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
} );
} );

describe( 'isDeselectable = true', () => {
Expand Down Expand Up @@ -421,6 +475,66 @@ describe.each( [
} )
).toHaveFocus();
} );

it( 'should ignore disabled options', async () => {
const mockOnChange = jest.fn();

render(
<Component
value="pizza"
isDeselectable
onChange={ mockOnChange }
label="Test Toggle Group Control"
>
{ optionsWithDisabledOption }
</Component>
);

await sleep();
await press.Tab();

expect(
screen.getByRole( 'button', {
name: 'Pizza',
pressed: true,
} )
).toBeVisible();
expect(
screen.getByRole( 'button', {
name: 'Rice',
pressed: false,
} )
).toBeDisabled();

// Tab key navigation skips the disabled option
await press.Tab();
await press.Space();
expect(
screen.getByRole( 'button', {
name: 'Pasta',
pressed: true,
} )
).toHaveFocus();
expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );

// Tab key navigation skips the disabled option
await press.ShiftTab();
expect(
screen.getByRole( 'button', {
name: 'Pizza',
pressed: false,
} )
).toHaveFocus();

// Clicks don't cause the option to be selected.
await click(
screen.getByRole( 'button', {
name: 'Rice',
} )
);
expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
} );
} );
} );
} );
7 changes: 6 additions & 1 deletion packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ function ToggleGroupControlOptionBase(
false
>,
// the element's id is generated internally
'id'
| 'id'
// due to how the component works, only the `disabled` prop should be used
| 'aria-disabled'
>,
forwardedRef: ForwardedRef< any >
) {
Expand Down Expand Up @@ -82,6 +84,7 @@ function ToggleGroupControlOptionBase(
children,
showTooltip = false,
onFocus: onFocusProp,
disabled,
...otherButtonProps
} = buttonProps;

Expand Down Expand Up @@ -130,6 +133,7 @@ function ToggleGroupControlOptionBase(
{ isDeselectable ? (
<button
{ ...commonProps }
disabled={ disabled }
onFocus={ onFocusProp }
aria-pressed={ isPressed }
type="button"
Expand All @@ -139,6 +143,7 @@ function ToggleGroupControlOptionBase(
</button>
) : (
<Ariakit.Radio
disabled={ disabled }
render={
<button
type="button"
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ export const buttonView = ( {
border: 0;
}
&[disabled] {
opacity: 0.4;
cursor: default;
}
&:active {
background: ${ CONFIG.toggleGroupControlBackgroundColor };
}
Expand Down

0 comments on commit 86f7ebd

Please sign in to comment.