Skip to content

FIX: Make showLoadMore button keyboard accessible across list components - #2338

Open
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:fix/load-more-keyboard-accessibility
Open

FIX: Make showLoadMore button keyboard accessible across list components#2338
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:fix/load-more-keyboard-accessibility

Conversation

@Talha12Shiekh

Copy link
Copy Markdown

Proposed Changes

Ensures that the "Show more" / "Load more" button is fully keyboard-focusable and interactive across all ReactiveSearch list components:

  1. Focusable Elements (tabIndex={0}): Added tabIndex={0} to the load-more <Button> components in MultiList.js, SingleList.js, MultiDropdownList.js, and SingleDropdownList.js.
  2. Keyboard Handlers (onKeyPress): Created a handleKeyPress handler in each component that listens for Enter and Space key presses, prevents the default scrolling behavior, and triggers handleLoadMore().
  3. Accessibility (A11y): Ensures visually impaired and keyboard-only users can navigate and trigger component expansion without mouse interaction.

Linked Issues

Checklist

  • Describe the proposed changes and how it'll improve the library experience.
  • Please make sure that there are no linting errors in the code.
  • Add a demo video/gif/screenshot to explain how did you test the fix.
  • If it is a global change, try to add any side effects that it could have.
  • Create a PR to add/update the docs (if needed) at here.
  • Create a PR to add/update the storybook (if needed) at here.

Improvements to the Library Experience

  • Accessibility: Enables seamless keyboard navigation and keyboard-only triggering for expanding list selections.

Side Effects

  • None. Normal mouse clicks on the buttons continue to function exactly as before.

Testing

  • Successfully compiled modified list components to CommonJS/ES modules with Babel (yarn build).
  • Verified JSX code structure and event handling signatures are correct.

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.

Unable to trigger "Show all" button action for <MultiList/> via keyboard

1 participant