feat(@clayui/autocomplete): LPD-55597 Improve infinite scrolling accessibility with SR announcements and visual feedback #6213
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds infinite scrolling capabilities to the @clayui/autocomplete component with accessibility improvements including screen reader announcements and visual feedback. The implementation introduces a new useInfiniteScrolling hook that decorates the onLoadMore prop to enable three key features: SR announcements, scroll-triggered loading, and focus-triggered loading when reaching the last item.
Key Changes:
- Introduced
useInfiniteScrollinghook with accessibility-focused infinite scrolling implementation - Extended
AutocompleteMessagestype to support new infinite scrolling announcement messages - Added
batchLoadCountprop to specify the number of items loaded per batch - Created story examples demonstrating infinite scrolling with various data sources
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 12 comments.
| File | Description |
|---|---|
packages/clay-autocomplete/src/useInfiniteScrolling.tsx |
New hook implementing infinite scrolling with SR announcements, IntersectionObserver-based loading trigger, and scroll position management |
packages/clay-autocomplete/src/Autocomplete.tsx |
Integrated useInfiniteScrolling hook, extended message type definitions, and added infinite scrolling trigger component to dropdown menu |
packages/clay-autocomplete/stories/Autocomplete.stories.tsx |
Added InfiniteScrolling story demonstrating the feature with Rick and Morty API and generated number lists |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
limaagabriel
force-pushed
the
LPD-55597
branch
from
547da87 to
eda4593
Compare
limaagabriel
force-pushed
the
LPD-55597
branch
from
eda4593 to
fc78a95
Compare
limaagabriel
force-pushed
the
LPD-55597
branch
from
bf4c0bd to
1085409
Compare
limaagabriel
force-pushed
the
LPD-55597
branch
from
6ec5e58 to
35d9fbd
Compare
packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx
Outdated
Show resolved
Hide resolved
packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx
Outdated
Show resolved
Hide resolved
packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx
Outdated
Show resolved
Hide resolved
…inite scroll trigger
…tests into a single test
limaagabriel
force-pushed
the
LPD-55597
branch
from
76f0256 to
c118a44
Compare
…em using the autocomplete focuses on the last item, but doesn't scroll to it
…focusing the last item, letting the scroll handle this case as well
…with the appropriate enum
…s where the list is short and scrolling isn't available, by proactively checking if it is at the trigger zone
…ndicate the intention of some keyboard bindings
…he autocomplete, so it is possible to import NetworkStatus
ethib137
left a comment
ethib137
left a comment
There was a problem hiding this comment.
LGTM... thanks... Can you also create another subtask for applying this to Portal by adding the new language keys to the usages where infinite scroll is taking place. I don't think we have one for that yet, right?
|
@ethib137 Yeah, I don't think we have this ticket yet. I'll create it right away. |
3 participants
Ticket: https://liferay.atlassian.net/browse/LPD-55597
This update adds the
useInfiniteScrollinghook to theAutocompletecomponent. This hook implements several specific improvements that are best grouped. Additionally, it deviates slightly from the genericCollectionbehavior.It works by decorating the
onLoadMoreprop. Whenever it is provided, this hook understands that infinite scrolling is enabled. Therefore, it decorates the function to let the effects work by adding three main features:This hook uses more refs to avoid adding re-renders to the component itself. These refs store data to allow the effects to be more controlled.