Skip to content

Carousel: Cards as focusable anchor links #34329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

Mitch-At-Work
Copy link
Contributor

Not sure if we will land this, or how valid this is an accessibility path, but we had a few teams asking so wanted to showcase how it could be done.

Previous Behavior

Cards were only focusable or unfocusable

New Behavior

CarouselCardButton provides an anchor link version of CarouselCard, preventing group focus but retaining tab focus.

Copy link

github-actions bot commented Apr 25, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.238 MB
310.504 kB
1.239 MB
310.678 kB
1.823 kB
174 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
react-accordion
Accordion (including children components)
107.832 kB
33.117 kB
react-aria
ARIA - Default
237 B
181 B
react-avatar
Avatar
49.41 kB
15.856 kB
react-avatar
AvatarGroup
20.21 kB
8.004 kB
react-avatar
AvatarGroupItem
63.554 kB
20.073 kB
react-badge
Badge
26.037 kB
8.624 kB
react-badge
CounterBadge
26.816 kB
8.899 kB
react-badge
PresenceBadge
25.823 kB
9.491 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
114.889 kB
31.812 kB
react-button
Button
37.68 kB
10.889 kB
react-button
CompoundButton
44.094 kB
12.191 kB
react-button
MenuButton
42.495 kB
12.237 kB
react-button
SplitButton
50.561 kB
13.803 kB
react-button
ToggleButton
53.612 kB
12.665 kB
react-calendar-compat
Calendar Compat
150.185 kB
40.052 kB
react-card
Card - All
102.34 kB
28.887 kB
react-card
Card
94.982 kB
27.068 kB
react-card
CardFooter
14.637 kB
5.902 kB
react-card
CardHeader
17.17 kB
6.769 kB
react-card
CardPreview
14.703 kB
6.027 kB
react-checkbox
Checkbox
35.221 kB
12.11 kB
react-color-picker
ColorArea
50.284 kB
17.696 kB
react-color-picker
ColorPicker
18.925 kB
7.529 kB
react-color-picker
ColorSlider
42.47 kB
15.741 kB
react-combobox
Combobox (including child components)
106.288 kB
34.738 kB
react-combobox
Dropdown (including child components)
106.913 kB
34.661 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.737 kB
20.275 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
225.747 kB
65.487 kB
react-components
react-components: FluentProvider & webLightTheme
44.573 kB
14.637 kB
react-datepicker-compat
DatePicker Compat
226.173 kB
64.134 kB
react-dialog
Dialog (including children components)
102.132 kB
30.684 kB
react-divider
Divider
21.431 kB
7.984 kB
react-field
Field
23.548 kB
8.941 kB
react-image
Image
15.463 kB
6.271 kB
react-input
Input
28.117 kB
9.479 kB
react-jsx-runtime
Classic Pragma
1.101 kB
550 B
react-jsx-runtime
JSX Dev Runtime
3.815 kB
1.664 kB
react-jsx-runtime
JSX Runtime
4.411 kB
1.894 kB
react-label
Label
14.774 kB
6.025 kB
react-link
Link
17.702 kB
7.169 kB
react-list
List
89.509 kB
26.675 kB
react-list
ListItem
112.847 kB
33.467 kB
react-menu
Menu (including children components)
155.646 kB
46.879 kB
react-menu
Menu (including selectable components)
158.628 kB
47.477 kB
react-message-bar
MessageBar (all components)
24.982 kB
9.301 kB
react-motion
@fluentui/react-motion - createMotionComponent()
4.005 kB
1.758 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
4.857 kB
2.128 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.714 kB
819 B
react-overflow
hooks only
12.832 kB
4.828 kB
react-persona
Persona
56.301 kB
17.736 kB
react-popover
Popover
131.142 kB
41.034 kB
react-portal
Portal
14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-positioning
usePositioning
28.166 kB
10.056 kB
react-progress
ProgressBar
17.188 kB
6.921 kB
react-provider
FluentProvider
24.749 kB
8.939 kB
react-radio
Radio
32.775 kB
10.379 kB
react-radio
RadioGroup
15.865 kB
6.464 kB
react-select
Select
27.835 kB
10.162 kB
react-slider
Slider
38.332 kB
12.851 kB
react-spinbutton
SpinButton
35.318 kB
11.787 kB
react-spinner
Spinner
25.35 kB
8.573 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
106.721 kB
30.838 kB
react-switch
Switch
35.422 kB
11.344 kB
react-table
DataGrid
161.3 kB
45.735 kB
react-table
Table (Primitives only)
42.77 kB
13.889 kB
react-table
Table as DataGrid
132.057 kB
36.619 kB
react-table
Table (Selection only)
70.64 kB
20.037 kB
react-table
Table (Sort only)
69.283 kB
19.651 kB
react-tag-picker
@fluentui/react-tag-picker - package
187.176 kB
56.223 kB
react-tags
InteractionTag
15.538 kB
6.249 kB
react-tags
Tag
30.339 kB
9.927 kB
react-tags
TagGroup
83.851 kB
24.879 kB
react-teaching-popover
TeachingPopover
101.639 kB
30.51 kB
react-text
Text - Default
17.164 kB
6.756 kB
react-text
Text - Wrappers
20.345 kB
7.086 kB
react-textarea
Textarea
26.684 kB
9.786 kB
react-timepicker-compat
TimePicker
109.264 kB
36.293 kB
react-toast
Toast (including Toaster)
102.274 kB
30.775 kB
react-tooltip
Tooltip
57.261 kB
19.971 kB
react-tree
FlatTree
148.956 kB
42.731 kB
react-tree
PersonaFlatTree
149.708 kB
42.868 kB
react-tree
PersonaTree
145.907 kB
41.717 kB
react-tree
Tree
145.161 kB
41.581 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against a7824c7e63504a9f4c02299ee6996897d1a96fc8

Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link

@github-actions github-actions bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png 1 Changed
vr-tests-react-components/Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Drawer.overlay drawer full.chromium.png 1138 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 496 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 913 Changed
vr-tests-react-components/Skeleton converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Translucent Skeleton with circle - High Contrast.default.chromium.png 1 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png 659 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1321 Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

There were 3 duplicate changes discarded. Check the build logs for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant