Skip to content

Apply BitCarousel improvements (#12881) #12882

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.

Sign up for GitHub

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

Merged
msynk merged 5 commits into from
Aug 11, 2026
Merged

Apply BitCarousel improvements (#12881) #12882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1a5c743
apply BitCarousel improvements #12881
msynk Aug 11, 2026
9a460f3
resolve review comments
msynk Aug 11, 2026
e035d23
fix reduced motion issues
msynk Aug 11, 2026
54c665c
local review resolution
msynk Aug 11, 2026
12d4041
resolve review comments 2
msynk Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 87 additions & 32 deletions src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,76 @@

<div @ref="RootElement" @attributes="HtmlAttributes"
id="@_Id"
role="region"
aria-roledescription="carousel"
aria-label="@AriaLabel"
style="@StyleBuilder.Value"
class="@ClassBuilder.Value"
dir="@Dir?.ToString().ToLower()">
dir="@Dir?.ToString().ToLower()"
tabindex="@((NoKeyboard || IsEnabled is false) ? null : (TabIndex ?? "0"))"
@onkeydown="HandleKeyDown"
@onfocusin="HandleFocusIn"
@onfocusout="HandleFocusOut"
@onmouseenter="HandleMouseEnter"
@onmouseleave="HandleMouseLeave">

@* The controls are rendered before the slides so the play/pause button is the first thing the keyboard
reaches, which is what the carousel pattern of the ARIA authoring practices asks of a carousel that
moves on its own: the motion can be stopped before anything else is dealt with. The stylesheet puts
the row back below the slides, so nothing about the way the carousel looks changes with it. *@
@if ((HideDots is false && _pagesCount > 1) || (AutoPlay && ShowPlayPause))
{
<div class="bit-csl-dcn @Classes?.DotsContainer"
style="@_directionStyle @Styles?.DotsContainer">
@if (AutoPlay && ShowPlayPause)
{
var playPauseIcon = IsPaused
? BitIconInfo.From(PlayIcon, PlayIconName ?? "Play")
: BitIconInfo.From(PauseIcon, PauseIconName ?? "Pause");
<button @onclick="TogglePlay"
type="button"
aria-controls="@_ContainerId"
aria-label="@(IsPaused ? PlayButtonAriaLabel : PauseButtonAriaLabel)"
disabled="@(IsEnabled is false)"
class="bit-csl-ppb @Classes?.PlayPauseButton"
style="@Styles?.PlayPauseButton">
<i aria-hidden="true"
style="@Styles?.PlayPauseButtonIcon"
class="@playPauseIcon?.GetCssClasses() @Classes?.PlayPauseButtonIcon" />
</button>
}
@if (HideDots is false && _pagesCount > 1)
{
@* The group holds the dots alone (not the play/pause button), so its accessible label
describes exactly what it contains. *@
<div role="group" aria-label="@DotsAriaLabel" class="bit-csl-dts">
@for (int i = 0; i < _pagesCount; i++)
{
int index = i;
<button @onclick="(() => HandleGotoPage(index))"
type="button"
aria-controls="@_ContainerId"
aria-label="@($"{DotAriaLabel} {index + 1}")"
aria-current="@(_currentPage == index ? "true" : null)"
disabled="@(IsEnabled is false)"
style="@Styles?.Dots @(_currentPage == index ? Styles?.GetCurrentDot() : null)"
class="bit-csl-dot @(DotTemplate is null ? null : "bit-csl-dtt") @((_currentPage == index ? $"bit-csl-cud {Classes?.GetCurrentDot()}" : "").Trim()) @Classes?.Dots">@DotTemplate?.Invoke(index)</button>
}
</div>
}
</div>
}

<div @ref="_carouselContainer"
id="@_ContainerId"
@onwheel="HandleWheel"
@onwheel:preventDefault="Wheel"
@onpointerup="HandlePointerUp"
@onpointerleave="HandlePointerUp"
@onpointermove="HandlePointerMove"
@onpointerdown="HandlePointerDown"
@onpointerdown:preventDefault="true"
class="bit-csl-cnt @Classes?.Container"
aria-live="@(IsPlaying ? "off" : "polite")"
class="bit-csl-cnt @(NoDrag ? "bit-csl-ndr" : null) @Classes?.Container"
style="@_directionStyle @Styles?.Container">

<CascadingValue Value="this" IsFixed="true">
Expand All @@ -22,35 +81,31 @@

@if (HideNextPrev is false)
{
var goLeftIcon = BitIconInfo.From(GoLeftIcon, GoLeftIconName ?? "ChevronRight");
var goRightIcon = BitIconInfo.From(GoRightIcon, GoRightIconName ?? "ChevronRight bit-ico-r180");
<div @onclick="GoLeft"
class="bit-csl-lbt @Classes?.Buttons @Classes?.GoLeftButton"
style="@_goLeftButtonStyle @Styles?.Buttons @Styles?.GoLeftButton">
<i style="@Styles?.GoLeftButtonIcon"
class="@goLeftIcon?.GetCssClasses() @Classes?.GoLeftButtonIcon" />
</div>
var goLeftIcon = BitIconInfo.From(GoLeftIcon, GoLeftIconName ?? (Vertical ? "ChevronDown" : "ChevronRight"));
var goRightIcon = BitIconInfo.From(GoRightIcon, GoRightIconName ?? (Vertical ? "ChevronUp" : "ChevronRight bit-ico-r180"));
<button @onclick="HandleGoLeft"
type="button"
aria-controls="@_ContainerId"
aria-label="@GetGoLeftAriaLabel()"
disabled="@(IsEnabled is false)"
class="bit-csl-lbt @Classes?.Buttons @Classes?.GoLeftButton"
style="@_goLeftButtonStyle @Styles?.Buttons @Styles?.GoLeftButton">
<i aria-hidden="true"
style="@Styles?.ButtonIcons @Styles?.GoLeftButtonIcon"
class="@goLeftIcon?.GetCssClasses() @Classes?.ButtonIcons @Classes?.GoLeftButtonIcon" />
</button>

<div @onclick="GoRight"
class="bit-csl-rbt @Classes?.Buttons @Classes?.GoRightButton"
style="@_goRightButtonStyle @Styles?.Buttons @Styles?.GoRightButton">
<i style="@Styles?.GoRightButtonIcon"
class="@goRightIcon?.GetCssClasses() @Classes?.GoRightButtonIcon" />
</div>
<button @onclick="HandleGoRight"
type="button"
aria-controls="@_ContainerId"
aria-label="@GetGoRightAriaLabel()"
Comment thread
msynk marked this conversation as resolved.
disabled="@(IsEnabled is false)"
class="bit-csl-rbt @Classes?.Buttons @Classes?.GoRightButton"
style="@_goRightButtonStyle @Styles?.Buttons @Styles?.GoRightButton">
<i aria-hidden="true"
style="@Styles?.ButtonIcons @Styles?.GoRightButtonIcon"
class="@goRightIcon?.GetCssClasses() @Classes?.ButtonIcons @Classes?.GoRightButtonIcon" />
</button>
}
</div>

@if (HideDots is false)
{
<div class="bit-csl-dcn @Classes?.DotsContainer"
style="@_directionStyle @Styles?.DotsContainer">
@for (int i = 0; i < _pagesCount; i++)
{
int index = i;
<div @onclick="(() => GotoPage(index))"
style="@Styles?.Dots"
class="bit-csl-dot @((_currentPage == index ? $"bit-csl-cud {Classes?.CurrectDot}" : "").Trim()) @Classes?.Dots"></div>
}
</div>
}
</div>
</div>
Loading
Loading