Add shared SectionActions component for section CTA groups#393
Conversation
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
et3 | 6cd547b | Commit Preview URL Branch Preview URL |
Jan 13 2026, 08:42 PM |
Summary of ChangesHello @zz-plant, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new shared Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![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 reusable <SectionActions> component to centralize the layout for call-to-action button groups, which is a great step towards reducing code duplication and improving maintainability. The new component is correctly implemented and has been applied consistently across several pages.
My main feedback is on the new SectionActions.astro component, where a few enhancements can be made to improve accessibility and follow Astro's best practices. I've added a couple of specific comments with suggestions.
Overall, this is a solid refactoring that improves the codebase. Well done!
| ariaLabel?: string; | ||
| } | ||
|
|
||
| const { className, ariaLabel } = Astro.props as Props; |
There was a problem hiding this comment.
The explicit type cast as Props is not necessary here. Astro's compiler can infer the types of Astro.props from the Props interface defined in the component script. Removing the cast makes the code more idiomatic and aligns with modern Astro practices.
const { className, ariaLabel } = Astro.props;
| const classes = ["section__actions", className].filter(Boolean).join(" "); | ||
| --- | ||
|
|
||
| <div class={classes} aria-label={ariaLabel}> |
There was a problem hiding this comment.
For better accessibility, I suggest a couple of improvements here:
- Add
role="group": This will semantically group the actions for assistive technologies. A group should have an accessible name, so it's best to apply this role conditionally only whenariaLabelis provided. - Make
aria-labelmore robust: Usingaria-label={ariaLabel || undefined}prevents rendering an emptyaria-label=""attribute if an empty string is passed as the prop.
These changes will make the component more accessible and robust.
<div class={classes} role={ariaLabel ? 'group' : undefined} aria-label={ariaLabel || undefined}>
1 participant
Motivation
div.section__actionsmarkup by centralizing CTA layout into a reusable component.classNameandariaLabelso pages can standardize layout and accessibility.Description
src/components/SectionActions.astrowhich acceptsclassName?: stringandariaLabel?: stringand renders a<div class="section__actions">wrapper with a slot.div.section__actionsblocks with the new<SectionActions>component insrc/pages/agent-toolkit/*,src/pages/diagnostics/index.astro,src/pages/institute/how-studio-fits.astro, andsrc/pages/start-here/index.astro.section__actionsCSS class.Testing
bun run check(which executeslint, unit tests,tsc,astro:check,validate:json, andvalidate:glossary) and it completed successfully.astro:checkand TypeScript produced non-blocking hints and deprecation warnings.Codex Task