Skip to content

Commit 0bfe0c7

Browse files
smhigleysmhigley
authored
fix(TeachingPopover): a11y bug fixes (#33194)
1 parent 0b5ff6e commit 0bfe0c7

10 files changed

+36
-22
lines changed

‎change/@fluentui-react-teaching-popover-c3487ced-27ab-4e86-ab00-dca2debf985c.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "fix: accName updates and semantic fixes",
4+
"packageName": "@fluentui/react-teaching-popover",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-teaching-popover/library/etc/react-teaching-popover.api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ export type TeachingPopoverHeaderProps = ComponentProps<TeachingPopoverHeaderSlo
272272

273273
// @public (undocumented)
274274
export type TeachingPopoverHeaderSlots = {
275-
root: Slot<'h3', 'h1' | 'h2' | 'h4' | 'h5' | 'h6' | 'div'>;
275+
root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
276276
dismissButton?: Slot<'button'>;
277277
icon?: Slot<'div'>;
278278
};

‎packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/__snapshots__/TeachingPopoverCarouselNavButton.test.tsx.snap

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`TeachingPopoverCarouselNavButton renders a default state 1`] = `
44
<div>
55
<button
6+
aria-selected="false"
67
class="fui-TeachingPopoverCarouselNavButton"
78
data-tabster="{\\"focusable\\":{\\"isDefault\\":false}}"
89
role="tab"

‎packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export const useTeachingPopoverCarouselNavButton_unstable = (
5252
ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,
5353
role: 'tab',
5454
type: 'button',
55+
'aria-selected': `${!!isSelected}`,
5556
...defaultTabProps,
5657
},
5758
},

‎packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.types.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import { PopoverContextValue } from '@fluentui/react-popover';
33

44
export type TeachingPopoverHeaderSlots = {
55
/**
6-
* The element wrapping the text and close button. By default this is an h3, but can be a div.
6+
* The element wrapping the text and close button. By default this is an div; although it can be a heading, this should not be done.
7+
* Instead, wrap the child text in a heading tag if one is needed.
78
* Be sure to include role and aria heading level if div is used.
89
*/
9-
root: Slot<'h3', 'h1' | 'h2' | 'h4' | 'h5' | 'h6' | 'div'>;
10+
root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
1011
/**
1112
* The component to be used as close button in heading
1213
*/

‎packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`TeachingPopoverHeader renders a default state 1`] = `
44
<div>
5-
<h3
5+
<div
66
class="fui-TeachingPopoverHeader"
77
>
88
<div
@@ -45,6 +45,6 @@ exports[`TeachingPopoverHeader renders a default state 1`] = `
4545
/>
4646
</svg>
4747
</button>
48-
</h3>
48+
</div>
4949
</div>
5050
`;

‎packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,16 @@ export const useTeachingPopoverHeader_unstable = (
3333
return {
3434
appearance,
3535
components: {
36-
root: 'h3',
36+
root: 'div',
3737
dismissButton: 'button',
3838
icon: 'div',
3939
},
4040
root: slot.always(
41-
getIntrinsicElementProps('h3', {
41+
getIntrinsicElementProps('div', {
4242
ref,
4343
...props,
4444
}),
45-
{ elementType: 'h3' },
45+
{ elementType: 'div' },
4646
),
4747
icon: slot.optional(icon, {
4848
renderByDefault: true,

‎packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarousel.stories.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,32 @@ export const Carousel = () => (
2424
</TeachingPopoverTrigger>
2525
<TeachingPopoverSurface>
2626
<TeachingPopoverHeader>Tips</TeachingPopoverHeader>
27-
<TeachingPopoverCarousel defaultValue={'test-0'}>
28-
<TeachingPopoverCarouselCard value="test-0">
27+
<TeachingPopoverCarousel defaultValue={'1'}>
28+
<TeachingPopoverCarouselCard value="1">
2929
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
3030
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
3131
<div>This is page: 1</div>
3232
</TeachingPopoverBody>
3333
</TeachingPopoverCarouselCard>
3434

35-
<TeachingPopoverCarouselCard value="test-1">
35+
<TeachingPopoverCarouselCard value="2">
3636
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
3737
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
3838
<div>This is page: 2</div>
3939
</TeachingPopoverBody>
4040
</TeachingPopoverCarouselCard>
4141

42-
<TeachingPopoverCarouselCard value="test-3">
42+
<TeachingPopoverCarouselCard value="3">
4343
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
4444
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
4545
<div>This is page: 3</div>
4646
</TeachingPopoverBody>
4747
</TeachingPopoverCarouselCard>
4848

4949
<TeachingPopoverCarouselFooter next="Next" previous="Previous" initialStepText="Close" finalStepText="Finish">
50-
<TeachingPopoverCarouselNav>{() => <TeachingPopoverCarouselNavButton />}</TeachingPopoverCarouselNav>
50+
<TeachingPopoverCarouselNav>
51+
{index => <TeachingPopoverCarouselNavButton aria-label={`Tip ${index}`} />}
52+
</TeachingPopoverCarouselNav>
5153
</TeachingPopoverCarouselFooter>
5254
</TeachingPopoverCarousel>
5355
</TeachingPopoverSurface>

‎packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselAppearanceBrand.stories.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,32 @@ export const CarouselBrand = () => (
2424
</TeachingPopoverTrigger>
2525
<TeachingPopoverSurface>
2626
<TeachingPopoverHeader>Tips</TeachingPopoverHeader>
27-
<TeachingPopoverCarousel defaultValue="test-0">
28-
<TeachingPopoverCarouselCard value="test-0">
27+
<TeachingPopoverCarousel defaultValue="1">
28+
<TeachingPopoverCarouselCard value="1">
2929
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
3030
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
3131
<div>This is page: 1</div>
3232
</TeachingPopoverBody>
3333
</TeachingPopoverCarouselCard>
3434

35-
<TeachingPopoverCarouselCard value="test-1">
35+
<TeachingPopoverCarouselCard value="2">
3636
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
3737
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
3838
<div>This is page: 2</div>
3939
</TeachingPopoverBody>
4040
</TeachingPopoverCarouselCard>
4141

42-
<TeachingPopoverCarouselCard value="test-2">
42+
<TeachingPopoverCarouselCard value="3">
4343
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
4444
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
4545
<div>This is page: 3</div>
4646
</TeachingPopoverBody>
4747
</TeachingPopoverCarouselCard>
4848

4949
<TeachingPopoverCarouselFooter next="Next" previous="Previous" initialStepText="Close" finalStepText="Finish">
50-
<TeachingPopoverCarouselNav>{() => <TeachingPopoverCarouselNavButton />}</TeachingPopoverCarouselNav>
50+
<TeachingPopoverCarouselNav>
51+
{index => <TeachingPopoverCarouselNavButton aria-label={`Tip ${index}`} />}
52+
</TeachingPopoverCarouselNav>
5153
</TeachingPopoverCarouselFooter>
5254
</TeachingPopoverCarousel>
5355
</TeachingPopoverSurface>

‎packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselText.stories.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,22 @@ export const CarouselText = () => (
2323
</TeachingPopoverTrigger>
2424
<TeachingPopoverSurface>
2525
<TeachingPopoverHeader>Tips"</TeachingPopoverHeader>
26-
<TeachingPopoverCarousel defaultValue="test-1">
27-
<TeachingPopoverCarouselCard value="test-1">
26+
<TeachingPopoverCarousel defaultValue="1">
27+
<TeachingPopoverCarouselCard value="1">
2828
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
2929
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
3030
<div>This is page: 1</div>
3131
</TeachingPopoverBody>
3232
</TeachingPopoverCarouselCard>
3333

34-
<TeachingPopoverCarouselCard value="test-2">
34+
<TeachingPopoverCarouselCard value="2">
3535
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
3636
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
3737
<div>This is page: 2</div>
3838
</TeachingPopoverBody>
3939
</TeachingPopoverCarouselCard>
4040

41-
<TeachingPopoverCarouselCard value="test-3">
41+
<TeachingPopoverCarouselCard value="3">
4242
<TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage} />}>
4343
<TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
4444
<div>This is page: 3</div>

0 commit comments

Comments
 (0)