feat: Implement Material 3 carousel component#114
Conversation
Adds `md-carousel` and `md-carousel-item` components based on Material 3 guidelines. - `md-carousel` serves as an uncontained scrolling container leveraging flexbox and CSS `scroll-snap-type: x mandatory`. - `md-carousel-item` implements individual items with `scroll-snap-align: start`. - Components correctly wire accessibility ARIA roles `list` and `listitem` via ElementInternals. - Updates `all.js` and `common.js` to include the new components. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new Carousel component consisting of Carousel and CarouselItem LitElements, along with their respective exports in all.js and common.js. The review feedback highlights a need to improve the accessibility of the Carousel container by adding keyboard focusability and an explicit aria-orientation attribute.
| this.internals = this.attachInternals() | ||
| this.internals.role = 'list' |
There was a problem hiding this comment.
The carousel container is scrollable but lacks keyboard focusability, which prevents users who rely on arrow keys from navigating the content. Additionally, explicitly setting the aria-orientation helps assistive technologies correctly interpret the component's layout.
this.internals = this.attachInternals()
this.internals.role = 'list'
this.internals.ariaOrientation = 'horizontal'
this.tabIndex = 01 participant
This PR implements the missing Material 3 Carousel components (
md-carouselandmd-carousel-item).It follows modern web component standards using Lit and uses CSS
scroll-snapfor smooth horizontal scrolling, matching the uncontained carousel variant defined in Material Design 3 guidelines.The components are fully integrated into the library exports (
all.jsandcommon.js) and have been visually verified for correct layout and scrolling behavior. ARIA roles are integrated out-of-the-box using ElementInternals for improved accessibility.PR created automatically by Jules for task 12307278285894705633 started by @treeder