Skip to content

Commit 12bc097

Browse files
dmceachernmsftdmceachernmsft
authored
[VerticalGallery] A11y updates and styling vertical gallery through props (#2796)
* update styles to be passed in properly * add aria strings to nav buttons * Change files * Duplicate change files for beta release * fix lint --------- Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>
1 parent 226383d commit 12bc097

14 files changed

Lines changed: 151 additions & 11 deletions

‎change-beta/@azure-communication-react-579c6f56-846c-46c1-9459-1c2f3a3dd21c.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Add announcer labels for nav buttons in vertical gallery and allow for style updates through props.",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@azure-communication-react-579c6f56-846c-46c1-9459-1c2f3a3dd21c.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Add announcer labels for nav buttons in vertical gallery and allow for style updates through props.",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/communication-react/review/beta/communication-react.api.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1522,6 +1522,7 @@ export interface ComponentStrings {
15221522
UnsupportedBrowser: UnsupportedBrowserStrings;
15231523
UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
15241524
UnsupportedOperatingSystem: UnsupportedOperatingSystemStrings;
1525+
VerticalGallery: VerticalGalleryStrings;
15251526
videoGallery: VideoGalleryStrings;
15261527
videoTile: VideoTileStrings;
15271528
}
@@ -3205,6 +3206,25 @@ export const useTeamsCallAgent: () => undefined | /* @conditional-compile-remove
32053206
// @public
32063207
export const useTheme: () => Theme;
32073208

3209+
// @beta
3210+
export interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
3211+
counter?: IStyle;
3212+
nextButton?: IStyle;
3213+
previousButton?: IStyle;
3214+
}
3215+
3216+
// @beta
3217+
export interface VerticalGalleryStrings {
3218+
leftNavButtonAriaLabel?: string;
3219+
rightNavButtonAriaLabel?: string;
3220+
}
3221+
3222+
// @beta
3223+
export interface VerticalGalleryStyles extends BaseCustomStyles {
3224+
children?: IStyle;
3225+
controlBar?: VerticalGalleryControlBarStyles;
3226+
}
3227+
32083228
// @public
32093229
export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
32103230

@@ -3301,6 +3321,7 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
33013321
gridLayout?: GridLayoutStyles;
33023322
horizontalGallery?: HorizontalGalleryStyles;
33033323
localVideo?: IStyle;
3324+
verticalGallery?: VerticalGalleryStyles;
33043325
}
33053326

33063327
// @public

‎packages/communication-react/src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,3 +304,9 @@ export type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps }
304304
export { UnsupportedOperatingSystem } from '../../react-components/src';
305305
/* @conditional-compile-remove(unsupported-browser) */
306306
export type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from '../../react-components/src';
307+
/* @conditional-compile-remove(vertical-gallery) */
308+
export type {
309+
VerticalGalleryStyles,
310+
VerticalGalleryStrings,
311+
VerticalGalleryControlBarStyles
312+
} from '../../react-components/src';

‎packages/react-components/review/beta/react-components.api.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,7 @@ export interface ComponentStrings {
393393
UnsupportedBrowser: UnsupportedBrowserStrings;
394394
UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
395395
UnsupportedOperatingSystem: UnsupportedOperatingSystemStrings;
396+
VerticalGallery: VerticalGalleryStrings;
396397
videoGallery: VideoGalleryStrings;
397398
videoTile: VideoTileStrings;
398399
}
@@ -1666,6 +1667,25 @@ export const _usePermissions: () => _Permissions;
16661667
// @public
16671668
export const useTheme: () => Theme;
16681669

1670+
// @beta
1671+
export interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
1672+
counter?: IStyle;
1673+
nextButton?: IStyle;
1674+
previousButton?: IStyle;
1675+
}
1676+
1677+
// @beta
1678+
export interface VerticalGalleryStrings {
1679+
leftNavButtonAriaLabel?: string;
1680+
rightNavButtonAriaLabel?: string;
1681+
}
1682+
1683+
// @beta
1684+
export interface VerticalGalleryStyles extends BaseCustomStyles {
1685+
children?: IStyle;
1686+
controlBar?: VerticalGalleryControlBarStyles;
1687+
}
1688+
16691689
// @public
16701690
export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
16711691

@@ -1754,6 +1774,7 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
17541774
gridLayout?: GridLayoutStyles;
17551775
horizontalGallery?: HorizontalGalleryStyles;
17561776
localVideo?: IStyle;
1777+
verticalGallery?: VerticalGalleryStyles;
17571778
}
17581779

17591780
// @public

‎packages/react-components/review/stable/react-components.api.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1412,6 +1412,25 @@ export const _useContainerWidth: (containerRef: RefObject<HTMLElement>) => numbe
14121412
// @public
14131413
export const useTheme: () => Theme;
14141414

1415+
// @beta
1416+
export interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
1417+
counter?: IStyle;
1418+
nextButton?: IStyle;
1419+
previousButton?: IStyle;
1420+
}
1421+
1422+
// @beta
1423+
export interface VerticalGalleryStrings {
1424+
leftNavButtonAriaLabel?: string;
1425+
rightNavButtonAriaLabel?: string;
1426+
}
1427+
1428+
// @beta
1429+
export interface VerticalGalleryStyles extends BaseCustomStyles {
1430+
children?: IStyle;
1431+
controlBar?: VerticalGalleryControlBarStyles;
1432+
}
1433+
14151434
// @public
14161435
export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
14171436

‎packages/react-components/src/components/VerticalGallery.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33

44
import { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';
55
import React, { useEffect, useMemo, useState } from 'react';
6+
/* @conditional-compile-remove(vertical-gallery) */
7+
import { useLocale } from '../localization';
68
import { useIdentifiers } from '../identifiers';
79
import { useTheme } from '../theming';
810
import { BaseCustomStyles } from '../types';
@@ -18,6 +20,8 @@ import { bucketize } from './utils/overFlowGalleriesUtils';
1820

1921
/**
2022
* Styles for the VerticalGallery component
23+
*
24+
* @beta
2125
*/
2226
export interface VerticalGalleryStyles extends BaseCustomStyles {
2327
/** Styles for each video tile in the vertical gallery */
@@ -26,8 +30,22 @@ export interface VerticalGalleryStyles extends BaseCustomStyles {
2630
controlBar?: VerticalGalleryControlBarStyles;
2731
}
2832

33+
/**
34+
* Strings for localization of the vertical gallery.
35+
*
36+
* @beta
37+
*/
38+
export interface VerticalGalleryStrings {
39+
/** Aria label for the left page navigation button */
40+
leftNavButtonAriaLabel?: string;
41+
/** Aria label for the right page navigation button */
42+
rightNavButtonAriaLabel?: string;
43+
}
44+
2945
/**
3046
* Styles for the control bar inside the VerticalGallery component
47+
*
48+
* @beta
3149
*/
3250
export interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
3351
/**
@@ -156,6 +174,9 @@ const VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.E
156174
const theme = useTheme();
157175
const ids = useIdentifiers();
158176

177+
/* @conditional-compile-remove(vertical-gallery) */
178+
const strings = useLocale().strings.VerticalGallery;
179+
159180
const pageCounterContainerStyles = useMemo(() => {
160181
return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);
161182
}, [styles?.root]);
@@ -180,6 +201,8 @@ const VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.E
180201
className={previousButtonSyles}
181202
onClick={onPreviousButtonClick}
182203
disabled={buttonsDisabled?.previous}
204+
/* @conditional-compile-remove(vertical-gallery) */
205+
ariaLabel={strings.leftNavButtonAriaLabel}
183206
data-ui-id={ids.overflowGalleryLeftNavButton}
184207
>
185208
<Icon iconName="VerticalGalleryLeftButton" styles={navIconStyles} />
@@ -189,6 +212,8 @@ const VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.E
189212
className={nextButtonsStyles}
190213
onClick={onNextButtonClick}
191214
disabled={buttonsDisabled?.next}
215+
/* @conditional-compile-remove(vertical-gallery) */
216+
ariaLabel={strings.rightNavButtonAriaLabel}
192217
data-ui-id={ids.overflowGalleryRightNavButton}
193218
>
194219
<Icon iconName="VerticalGalleryRightButton" styles={navIconStyles} />

‎packages/react-components/src/components/VideoGallery.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';
3636
import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';
3737
/* @conditional-compile-remove(pinned-participants) */
3838
import { useId } from '@fluentui/react-hooks';
39+
/* @conditional-compile-remove(vertical-gallery) */
40+
import { VerticalGalleryStyles } from './VerticalGallery';
3941

4042
/**
4143
* @private
@@ -136,6 +138,9 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
136138
horizontalGallery?: HorizontalGalleryStyles;
137139
/** Styles for the local video */
138140
localVideo?: IStyle;
141+
/* @conditional-compile-remove(vertical-gallery) */
142+
/** Styles for the vertical gallery */
143+
verticalGallery?: VerticalGalleryStyles;
139144
}
140145

141146
/* @conditional-compile-remove(vertical-gallery) */

‎packages/react-components/src/components/VideoGallery/DefaultLayout.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
8181
isNarrow={isNarrow}
8282
shouldFloatLocalVideo={false}
8383
overflowGalleryElements={horizontalGalleryTiles}
84-
styles={styles?.horizontalGallery}
84+
horizontalGalleryStyles={styles?.horizontalGallery}
85+
/* @conditional-compile-remove(vertical-gallery) */
86+
veritcalGalleryStyles={styles?.verticalGallery}
8587
/* @conditional-compile-remove(pinned-participants) */
8688
overflowGalleryLayout={overflowGalleryLayout}
8789
/>
@@ -90,7 +92,8 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
9092
isNarrow,
9193
horizontalGalleryTiles,
9294
styles?.horizontalGallery,
93-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
95+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
96+
/* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery
9497
]);
9598

9699
return (

‎packages/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,9 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
152152
isNarrow={isNarrow}
153153
shouldFloatLocalVideo={true}
154154
overflowGalleryElements={horizontalGalleryTiles}
155-
styles={styles?.horizontalGallery}
155+
horizontalGalleryStyles={styles?.horizontalGallery}
156+
/* @conditional-compile-remove(vertical-gallery) */
157+
veritcalGalleryStyles={styles?.verticalGallery}
156158
/* @conditional-compile-remove(vertical-gallery) */
157159
overflowGalleryLayout={overflowGalleryLayout}
158160
/>
@@ -161,7 +163,8 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
161163
isNarrow,
162164
horizontalGalleryTiles,
163165
styles?.horizontalGallery,
164-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
166+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
167+
/* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery
165168
]);
166169

167170
return (

0 commit comments

Comments
 (0)
⚡