From 0bfe0c7fdf8981d7ccf8c4c15e927d8202fbdd12 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Thu, 2 Jan 2025 12:50:39 -0800 Subject: [PATCH 1/8] fix(TeachingPopover): a11y bug fixes (#33194) --- ...popover-c3487ced-27ab-4e86-ab00-dca2debf985c.json | 7 +++++++ .../library/etc/react-teaching-popover.api.md | 2 +- .../TeachingPopoverCarouselNavButton.test.tsx.snap | 1 + .../useTeachingPopoverCarouselNavButton.tsx | 1 + .../TeachingPopoverHeader.types.ts | 5 +++-- .../TeachingPopoverHeader.test.tsx.snap | 4 ++-- .../useTeachingPopoverHeader.tsx | 6 +++--- .../TeachingPopoverCarousel.stories.tsx | 12 +++++++----- ...eachingPopoverCarouselAppearanceBrand.stories.tsx | 12 +++++++----- .../TeachingPopoverCarouselText.stories.tsx | 8 ++++---- 10 files changed, 36 insertions(+), 22 deletions(-) create mode 100644 change/@fluentui-react-teaching-popover-c3487ced-27ab-4e86-ab00-dca2debf985c.json diff --git a/change/@fluentui-react-teaching-popover-c3487ced-27ab-4e86-ab00-dca2debf985c.json b/change/@fluentui-react-teaching-popover-c3487ced-27ab-4e86-ab00-dca2debf985c.json new file mode 100644 index 00000000000000..d70149ff0dba7c --- /dev/null +++ b/change/@fluentui-react-teaching-popover-c3487ced-27ab-4e86-ab00-dca2debf985c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: accName updates and semantic fixes", + "packageName": "@fluentui/react-teaching-popover", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md index 4a0e06d7267d22..fc82a68e5ec5ee 100644 --- a/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md +++ b/packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md @@ -272,7 +272,7 @@ export type TeachingPopoverHeaderProps = ComponentProps; + root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>; dismissButton?: Slot<'button'>; icon?: Slot<'div'>; }; diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/__snapshots__/TeachingPopoverCarouselNavButton.test.tsx.snap b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/__snapshots__/TeachingPopoverCarouselNavButton.test.tsx.snap index 78a88bfac2c6d1..e050da3edadd33 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/__snapshots__/TeachingPopoverCarouselNavButton.test.tsx.snap +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/__snapshots__/TeachingPopoverCarouselNavButton.test.tsx.snap @@ -3,6 +3,7 @@ exports[`TeachingPopoverCarouselNavButton renders a default state 1`] = `
- +
`; diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx index cdea9f64225ee9..24bf465c8628c4 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx @@ -33,16 +33,16 @@ export const useTeachingPopoverHeader_unstable = ( return { appearance, components: { - root: 'h3', + root: 'div', dismissButton: 'button', icon: 'div', }, root: slot.always( - getIntrinsicElementProps('h3', { + getIntrinsicElementProps('div', { ref, ...props, }), - { elementType: 'h3' }, + { elementType: 'div' }, ), icon: slot.optional(icon, { renderByDefault: true, diff --git a/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarousel.stories.tsx b/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarousel.stories.tsx index 0bf3420726d746..922bbe8253a05d 100644 --- a/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarousel.stories.tsx +++ b/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarousel.stories.tsx @@ -24,22 +24,22 @@ export const Carousel = () => ( Tips - - + + }> Teaching Bubble Title
This is page: 1
- + }> Teaching Bubble Title
This is page: 2
- + }> Teaching Bubble Title
This is page: 3
@@ -47,7 +47,9 @@ export const Carousel = () => (
- {() => } + + {index => } +
diff --git a/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselAppearanceBrand.stories.tsx b/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselAppearanceBrand.stories.tsx index 7345946feef749..9f51200274fe4c 100644 --- a/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselAppearanceBrand.stories.tsx +++ b/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselAppearanceBrand.stories.tsx @@ -24,22 +24,22 @@ export const CarouselBrand = () => ( Tips - - + + }> Teaching Bubble Title
This is page: 1
- + }> Teaching Bubble Title
This is page: 2
- + }> Teaching Bubble Title
This is page: 3
@@ -47,7 +47,9 @@ export const CarouselBrand = () => (
- {() => } + + {index => } +
diff --git a/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselText.stories.tsx b/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselText.stories.tsx index efadc4651f94f2..1d662919432aee 100644 --- a/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselText.stories.tsx +++ b/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselText.stories.tsx @@ -23,22 +23,22 @@ export const CarouselText = () => ( Tips" - - + + }> Teaching Bubble Title
This is page: 1
- + }> Teaching Bubble Title
This is page: 2
- + }> Teaching Bubble Title
This is page: 3
From 7bb97f178d73a470dc438a2b19d165d9d0bd4b51 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Thu, 2 Jan 2025 15:58:01 -0800 Subject: [PATCH 2/8] fix: v8 Combobox & Dropdown: add aria-invalid when errorMessage is set (#33529) --- ...entui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json | 7 +++++++ .../Pagination/__snapshots__/Pagination.test.tsx.snap | 1 + packages/react/src/components/ComboBox/ComboBox.test.tsx | 9 +++++++++ packages/react/src/components/ComboBox/ComboBox.tsx | 3 +++ .../ComboBox/__snapshots__/ComboBox.test.tsx.snap | 4 ++++ packages/react/src/components/Dropdown/Dropdown.base.tsx | 2 +- packages/react/src/components/Dropdown/Dropdown.test.tsx | 3 ++- .../Dropdown/__snapshots__/Dropdown.test.tsx.snap | 8 ++++---- .../TimePicker/__snapshots__/TimePicker.test.tsx.snap | 1 + 9 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json diff --git a/change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json b/change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json new file mode 100644 index 00000000000000..e3bfbd48d513a2 --- /dev/null +++ b/change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(Combobox and Dropdown): add aria-invalid when errorMessage is set", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap index 5d792ca0c57ca3..ace3981b0a5b91 100644 --- a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -1837,6 +1837,7 @@ exports[`Pagination render comboBox Pagination correctly 1`] = ` { expect(combobox.getAttribute('aria-disabled')).toEqual('true'); }); + it('sets alert message and aria-invalid when errorMessage is set', () => { + const { getByRole } = render( + , + ); + const alert = getByRole('alert'); + expect(alert.textContent).toBe('This is an example error.'); + expect(getByRole('combobox').getAttribute('aria-invalid')).toBe('true'); + }); + it('Renders no selected item in default case', () => { const { getByRole } = render(); expect(getByRole('combobox').getAttribute('value')).toEqual(''); diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 6e558e4fa347d2..e342c4b6798a35 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -646,6 +646,8 @@ class ComboBoxInternal extends React.Component 0 ? true : false; + return (