feat(vue-starter-template): add template improvements#2320
feat(vue-starter-template): add template improvements#2320Maciej D (mdanilowicz) merged 4 commits intomainfrom
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 addresses issue #2319 by making UI improvements to the Vue starter template: fixing jumping menu hover behavior, adding product thumbnail URL fallback, and improving accessibility in checkout components.
Changes:
- Enhanced
getSmallestThumbnailUrlhelper to fall back tomedia.urlwhen thumbnails are missing or empty, with corresponding tests. - Added descriptive
altattributes to payment/shipping method images andaria-labelattributes to quantity select controls for improved accessibility. - Fixed jumping hover behavior in account menu and menu elements by using a transparent border as default instead of adding a border on hover (preventing layout shift).
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
packages/helpers/src/media/getSmallestThumbnailUrl.ts |
Added url property to the type constraint and media.url fallback when thumbnails are absent |
packages/helpers/src/media/getSmallestThumbnailUrl.test.ts |
Added tests for the new fallback behavior |
templates/vue-starter-template/app/components/form/QuantitySelect.vue |
Added type="button", aria-label, unique id/name for accessibility |
templates/vue-starter-template/app/components/checkout/ShippingMethods.vue |
Added descriptive alt attribute to shipping method image |
templates/vue-starter-template/app/components/checkout/PaymentMethods.vue |
Added descriptive alt attribute to payment method image |
templates/vue-starter-template/app/components/layout/AccountMenu.vue |
Fixed hover border jump by using transparent border as default |
templates/vue-starter-template/app/components/account/menu/element.vue |
Fixed hover border jump by using transparent border as default |
.changeset/orange-chicken-smoke.md |
Changeset for the helpers package update |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| url?: string; | ||
| }, | ||
| >(media?: T): string | undefined { | ||
| if (!media || !media?.thumbnails?.length) { | ||
| if (media?.url) { | ||
| return media.url; | ||
| } |
There was a problem hiding this comment.
The JSDoc comment says "Returns the smallest thumbnail url from the media object" but the function now also returns media.url as a fallback when thumbnails are missing. Consider updating the docstring to mention this fallback behavior, e.g., "Returns the smallest thumbnail url from the media object, or falls back to media.url when thumbnails are missing or empty."
Maciej D (mdanilowicz)
requested review from
Björn Meyer (BrocksiNet),
Maciek Kucmus (mkucmus) and
Patryk Tomczyk (patzick)
.changeset/orange-chicken-smoke.md
Outdated
| @@ -0,0 +1,5 @@ | |||
| --- | |||
| "@shopware/helpers": minor | |||
There was a problem hiding this comment.
this is more like a patch change, other than that all good
This pull request introduces a minor update to the
@shopware/helperspackage, specifically improving thegetSmallestThumbnailUrlfunction by adding a fallback tomedia.urlwhen thumbnails are missing or empty. Additionally, several accessibility and UI improvements are made across Vue components, including enhanced alt text for images, improved border styling for menu elements, and better accessibility for quantity selection controls.Helper function improvements
getSmallestThumbnailUrlinpackages/helpers/src/media/getSmallestThumbnailUrl.tsto returnmedia.urlas a fallback when thumbnails are missing or empty, with corresponding tests added ingetSmallestThumbnailUrl.test.ts. [1] [2] [3]Accessibility enhancements
altattributes to payment and shipping method images inPaymentMethods.vueandShippingMethods.vuefor improved accessibility. [1] [2]QuantitySelect.vueby addingaria-labelattributes to quantity buttons and input, and using unique input IDs. [1] [2] [3]UI improvements
AccountMenu.vue,element.vue). [1] [2]closes: #2319