From ad10877503e3b15296f54d7c0c654956ab6f011a Mon Sep 17 00:00:00 2001 From: Daniel Marcano Date: Mon, 9 Oct 2023 18:37:08 +0200 Subject: [PATCH 01/16] fix: modify BooleanControl so that screen readers read a more accurate label, and update its interaction tests --- .../blocks/src/controls/Boolean.stories.tsx | 20 ++++++++++++------- code/ui/blocks/src/controls/Boolean.tsx | 16 +++++++++++---- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx index 001a13dcaef7..dee3291f3684 100644 --- a/code/ui/blocks/src/controls/Boolean.stories.tsx +++ b/code/ui/blocks/src/controls/Boolean.stories.tsx @@ -15,7 +15,6 @@ const meta = { info: 'This is info for the Boolean control stories', jsx: { useBooleanShorthandSyntax: false }, }, - args: { name: 'boolean' }, } as Meta; export default meta; @@ -23,25 +22,29 @@ export default meta; export const True: StoryObj = { args: { value: true, + name: 'True', }, }; export const False: StoryObj = { args: { value: false, + name: 'False', }, }; export const Undefined: StoryObj = { args: { value: undefined, + name: 'Undefined', }, }; export const Toggling: StoryObj = { args: { value: undefined, + name: 'Toggling', }, - play: async ({ canvasElement, id }) => { + play: async ({ canvasElement, id, name, ...props }) => { const channel = addons.getChannel(); channel.emit(RESET_STORY_ARGS, { storyId: id }); @@ -55,23 +58,26 @@ export const Toggling: StoryObj = { const setBooleanControl = canvas.getByText('Set boolean'); await fireEvent.click(setBooleanControl); - let toggle = await canvas.findByTitle('Change to true'); - expect(toggle).toBeInTheDocument(); + let toggle = await canvas.findByLabelText(name); + expect(toggle).toBeVisible(); // from False to True await fireEvent.click(toggle); - toggle = await canvas.findByTitle('Change to false'); - expect(toggle).toBeInTheDocument(); + toggle = await canvas.findByRole('switch'); + expect(toggle).not.toBeChecked(); // from True to False await fireEvent.click(toggle); - toggle = await canvas.findByTitle('Change to true'); + toggle = await canvas.findByRole('switch'); expect(toggle).toBeInTheDocument(); }, }; export const TogglingInDocs: StoryObj = { ...Toggling, + args: { + name: 'Toggling In Docs', + }, parameters: { docs: { autoplay: true, diff --git a/code/ui/blocks/src/controls/Boolean.tsx b/code/ui/blocks/src/controls/Boolean.tsx index 9d591d1a9c75..88e8f4fc801a 100644 --- a/code/ui/blocks/src/controls/Boolean.tsx +++ b/code/ui/blocks/src/controls/Boolean.tsx @@ -98,7 +98,14 @@ export type BooleanProps = ControlProps & BooleanConfig; * * ``` */ -export const BooleanControl: FC = ({ name, value, onChange, onBlur, onFocus }) => { +export const BooleanControl: FC = ({ + name, + value, + onChange, + onBlur, + onFocus, + ...props +}) => { const onSetFalse = useCallback(() => onChange(false), [onChange]); if (value === undefined) { return ( @@ -112,16 +119,17 @@ export const BooleanControl: FC = ({ name, value, onChange, onBlur const parsedValue = typeof value === 'string' ? parse(value) : value; return ( -