feat: add delivery service CTA presets #954
Conversation
|
Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information. |
commit: |
WalkthroughAdds a readonly FOOD_DELIVERY_SERVICES list and FoodDeliveryServiceType, updates PresetImageType to include those values, and expands presetImageIcons and themeConfigOptions with multiple delivery services. Introduces new SVG/anchor button components (Deliveroo, DoorDash, Grubhub, SkipTheDishes, Postmates, EzCater, UberEats, AppStore, GooglePlay, GalaxyStore, AppGallery) and removes the consolidated app-store-buttons file. Updates the CTA atom to use useBackground(), clone presetImage label elements to inject a computed backgroundColor for food-delivery CTAs, include background in memo dependencies, and generalize the Uber‑eats rule to FOOD_DELIVERY_SERVICES. Adds a Grid test for delivery service CTAs (version 47). Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/visual-editor/src/components/atoms/cta.tsx(5 hunks)packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx(1 hunks)packages/visual-editor/src/types/types.ts(1 hunks)packages/visual-editor/src/utils/presetImageIcons.tsx(2 hunks)packages/visual-editor/src/utils/themeConfigOptions.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/atoms/cta.tsx (2)
packages/visual-editor/src/utils/presetImageIcons.tsx (1)
presetImageIcons(18-31)packages/visual-editor/src/types/types.ts (1)
FOOD_DELIVERY_SERVICES(28-36)
🪛 Biome (2.1.2)
packages/visual-editor/src/components/atoms/cta.tsx
[error] 90-90: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Safe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
🪛 GitHub Actions: main
packages/visual-editor/src/components/atoms/cta.tsx
[error] 9-9: TypeScript error TS2300: Duplicate identifier 'useBackground'.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: semgrep/ci
- GitHub Check: create-dev-release
🔇 Additional comments (5)
packages/visual-editor/src/types/types.ts (1)
28-45: LGTM! Clean type system extension.The addition of
FOOD_DELIVERY_SERVICESconstant andFoodDeliveryServiceTypefollows TypeScript best practices. The use ofas constensures type safety, and the indexed access type pattern for derivingFoodDeliveryServiceTypeis idiomatic.packages/visual-editor/src/components/atoms/cta.tsx (2)
92-108: Verify the background color logic is intentional.The current logic sets
buttonBackgroundColorto#F9F9F9(light gray) when the page background is white, and to#FFFFFF(white) when the background is not white. This appears counterintuitive—typically you'd want a lighter button on darker backgrounds and vice versa. Please confirm this is the intended behavior for visual contrast.
11-11: No action needed. The import on line 11 is not duplicated within this file.useBackgroundis imported once and used once on line 56. All imports in the file are unique identifiers with no conflicts.Likely an incorrect or invalid review comment.
packages/visual-editor/src/utils/presetImageIcons.tsx (1)
8-30: LGTM! Clean extension of preset mappings.The new delivery service button imports and mappings follow the existing pattern consistently. All imports align with the new components added in
app-store-buttons.tsx.packages/visual-editor/src/utils/themeConfigOptions.ts (1)
300-309: LGTM! Properly structured option additions.The new preset image options are well-structured and consistent with existing entries. The i18n keys follow the established naming convention.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx (1)
966-966: Fix remaining kebab-case SVG attribute.The
clip-pathattribute on line 966 (PostmatesButton) and line 1034 (EzCaterButton) should use camelCaseclipPathfor JSX compliance. Other new button components were correctly updated to useclipPath, but these two instances were missed.🔎 Apply this diff:
PostmatesButton (line 966):
- <g clip-path="url(#clip0_18869_1778)"> + <g clipPath="url(#clip0_18869_1778)">EzCaterButton (line 1034):
- <g clip-path="url(#clip0_18869_1802)"> + <g clipPath="url(#clip0_18869_1802)">Also applies to: 1034-1034
packages/visual-editor/src/components/atoms/cta.tsx (2)
93-111: Wrap the case body in braces to fix scoping issue.The
let labeldeclaration can be accessed by other switch clauses. Wrap the entire case body in a block{ }to properly scope the variable.
102-106: UseisDarkBackgroundfor more robust background detection.The current check
!background?.bgColor || background.bgColor === "bg-white"should usebackground.isDarkBackgroundinstead, as suggested by benlife5. ThebgColorproperty is a CSS class resolved by the theme system, whileisDarkBackgroundis a semantic boolean property that more accurately represents the background context.
🧹 Nitpick comments (1)
packages/visual-editor/src/components/atoms/cta.tsx (1)
95-99: Extract duplicated food delivery service check to a variable.The condition
(FOOD_DELIVERY_SERVICES as readonly string[]).includes(props.presetImageType)is repeated in both the label styling logic (lines 97-98) and the className logic (lines 157-158). Extract this to a variable to improve maintainability and reduce duplication.🔎 View suggested refactor
In the
useResolvedCtaPropsfunction, compute this once in theuseMemo:const resolvedDynamicProps = useMemo(() => { + const isFoodDeliveryService = + props.presetImageType && + (FOOD_DELIVERY_SERVICES as readonly string[]).includes(props.presetImageType); + switch (ctaType) { // ... other cases ... case "presetImage": if (!props.presetImageType) { return null; } let label = presetImageIcons[props.presetImageType]; if ( - props.presetImageType && - (FOOD_DELIVERY_SERVICES as readonly string[]).includes( - props.presetImageType - ) && + isFoodDeliveryService && React.isValidElement(label) ) {Then update the
buttonClassNamelogic outside theuseMemoto use a similar extracted variable:+ const isFoodDeliveryService = + props.presetImageType && + (FOOD_DELIVERY_SERVICES as readonly string[]).includes(props.presetImageType); + const buttonClassName = themeManagerCn( "flex", { "w-fit h-[51px] items-center justify-center": ctaType === "presetImage", "!w-auto": - ctaType === "presetImage" && - props.presetImageType && - (FOOD_DELIVERY_SERVICES as readonly string[]).includes( - props.presetImageType - ), + ctaType === "presetImage" && isFoodDeliveryService, }, className );Also applies to: 154-159
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/visual-editor/src/components/atoms/cta.tsx(5 hunks)packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-15T20:59:25.571Z
Learnt from: benlife5
Repo: yext/visual-editor PR: 943
File: packages/visual-editor/src/components/contentBlocks/image/Image.tsx:175-191
Timestamp: 2025-12-15T20:59:25.571Z
Learning: In the ImageWrapper component at packages/visual-editor/src/components/contentBlocks/image/Image.tsx, when an Image is wrapped in a MaybeLink, the aria-label should be omitted because the image's alt text serves as the accessible name for the link. Adding an aria-label would override the image's alt text.
Applied to files:
packages/visual-editor/src/components/atoms/cta.tsx
🧬 Code graph analysis (1)
packages/visual-editor/src/components/atoms/cta.tsx (2)
packages/visual-editor/src/utils/presetImageIcons.tsx (1)
presetImageIcons(18-31)packages/visual-editor/src/types/types.ts (1)
FOOD_DELIVERY_SERVICES(28-36)
🪛 Biome (2.1.2)
packages/visual-editor/src/components/atoms/cta.tsx
[error] 93-93: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Safe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
🔇 Additional comments (3)
packages/visual-editor/src/components/atoms/cta.tsx (3)
6-13: LGTM! Imports correctly support the new background-aware styling.The addition of
useBackgroundandFOOD_DELIVERY_SERVICESproperly supports the generalized food delivery service handling introduced in this PR.
59-59: LGTM! Background hook correctly integrated.The
useBackground()hook is properly utilized to enable dynamic styling based on the page background.
133-133: LGTM! Dependency array correctly updated.Adding
backgroundto the dependency array ensures that the memoized props re-evaluate when the page background changes, which is necessary for the dynamic button styling to work correctly.
packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx
Outdated
Show resolved
Hide resolved
This reverts commit 2df60e8.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/visual-editor/src/utils/themeConfigOptions.ts (1)
328-334: Consider using i18n for delivery service labels to match existing pattern.The existing app store options (lines 315-327) use the
msg()function for internationalization, but the new delivery service options use plain string literals. This creates an inconsistency in the codebase and may limit localization support for these labels in non-English locales.🔎 Suggested refactor to align with i18n pattern
- { label: "Deliveroo", value: "deliveroo" }, - { label: "DoorDash", value: "doordash" }, - { label: "Grubhub", value: "grubhub" }, - { label: "Skip The Dishes", value: "skip-the-dishes" }, - { label: "Postmates", value: "postmates" }, - { label: "Uber Eats", value: "uber-eats" }, - { label: "ezCater", value: "ezcater" }, + { label: msg("presetImages.deliveroo", "Deliveroo"), value: "deliveroo" }, + { label: msg("presetImages.doordash", "DoorDash"), value: "doordash" }, + { label: msg("presetImages.grubhub", "Grubhub"), value: "grubhub" }, + { label: msg("presetImages.skipTheDishes", "Skip The Dishes"), value: "skip-the-dishes" }, + { label: msg("presetImages.postmates", "Postmates"), value: "postmates" }, + { label: msg("presetImages.uberEats", "Uber Eats"), value: "uber-eats" }, + { label: msg("presetImages.ezCater", "ezCater"), value: "ezcater" },
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (12)
packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 29 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 29 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 45 - CTAs with Dark background.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 45 - CTAs with different site colors.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 29 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 29 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 45 - CTAs with Dark background.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 45 - CTAs with different site colors.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 29 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 29 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 45 - CTAs with Dark background.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 45 - CTAs with different site colors.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (2)
packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx(1 hunks)packages/visual-editor/src/utils/themeConfigOptions.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: call_unit_test / unit_tests (20.x)
- GitHub Check: call_unit_test / unit_tests (18.x)
- GitHub Check: semgrep/ci
- GitHub Check: create-dev-release
packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx
Outdated
Show resolved
Hide resolved
...isual-editor/src/components/testing/screenshots/Grid/[desktop] version 29 - various CTAs.png
Show resolved
Hide resolved
packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 47 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 47 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 47 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (15)
packages/visual-editor/src/components/base/buttons/AppGalleryButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/AppStoreButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/DeliverooButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/DoordashButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/EzCaterButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GalaxyStoreButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GrubhubButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/PostmatesButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/SkipTheDishesButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/UberEatsButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx(0 hunks)packages/visual-editor/src/types/types.ts(1 hunks)packages/visual-editor/src/utils/presetImageIcons.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- packages/visual-editor/src/components/base/buttons/app-store-buttons.tsx
🧰 Additional context used
🧬 Code graph analysis (4)
packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx (1)
packages/visual-editor/src/utils/cn.ts (1)
cn(65-67)
packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx (1)
packages/visual-editor/src/utils/cn.ts (1)
cn(65-67)
packages/visual-editor/src/utils/presetImageIcons.tsx (7)
packages/visual-editor/src/components/base/buttons/DeliverooButton.tsx (1)
DeliverooButton(1-37)packages/visual-editor/src/components/base/buttons/DoordashButton.tsx (1)
DoordashButton(1-87)packages/visual-editor/src/components/base/buttons/GrubhubButton.tsx (1)
GrubhubButton(1-37)packages/visual-editor/src/components/base/buttons/SkipTheDishesButton.tsx (1)
SkipTheDishesButton(1-51)packages/visual-editor/src/components/base/buttons/PostmatesButton.tsx (1)
PostmatesButton(1-43)packages/visual-editor/src/components/base/buttons/UberEatsButton.tsx (1)
UberEatsButton(1-27)packages/visual-editor/src/components/base/buttons/EzCaterButton.tsx (1)
EzCaterButton(1-63)
packages/visual-editor/src/components/base/buttons/GalaxyStoreButton.tsx (1)
packages/visual-editor/src/utils/cn.ts (1)
cn(65-67)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: call_unit_test / unit_tests (18.x)
- GitHub Check: call_unit_test / unit_tests (20.x)
- GitHub Check: create-dev-release
- GitHub Check: semgrep/ci
🔇 Additional comments (12)
packages/visual-editor/src/components/base/buttons/UberEatsButton.tsx (1)
1-27: LGTM!The component follows the correct pattern with proper React JSX conventions and includes appropriate accessibility features.
packages/visual-editor/src/components/base/buttons/DeliverooButton.tsx (1)
1-37: LGTM!The component correctly uses camelCase attributes (
clipPath,fillRule,clipRule) following React JSX conventions.packages/visual-editor/src/components/base/buttons/GrubhubButton.tsx (1)
1-37: LGTM!The component follows React JSX conventions correctly with proper camelCase attributes.
packages/visual-editor/src/components/base/buttons/AppGalleryButton.tsx (1)
1-124: LGTM!The component has a correct aria-label and follows React JSX conventions properly.
packages/visual-editor/src/components/base/buttons/DoordashButton.tsx (1)
1-87: LGTM!The component correctly uses camelCase
clipPathattributes and follows React JSX conventions throughout.packages/visual-editor/src/components/base/buttons/GalaxyStoreButton.tsx (1)
1-150: LGTM!The component follows a clean pattern with proper accessibility (
aria-label), responsive sizing via thesizeprop, and correct className composition using thecnutility. The SVG badge is well-structured with the gradient fill for the Galaxy Store logo.packages/visual-editor/src/components/base/buttons/AppStoreButton.tsx (1)
1-115: LGTM!The component is consistent with the other app store button components, with proper accessibility, responsive sizing, and clean className composition.
packages/visual-editor/src/components/base/buttons/SkipTheDishesButton.tsx (1)
1-51: LGTM!The component follows the delivery-service button pattern with a
backgroundColorprop for theming. The SVG usesrole="img"and a<title>element for proper accessibility. This pattern differs from app store buttons (which wrap in anchor tags) since delivery service buttons are designed to be composed within CTA containers.packages/visual-editor/src/types/types.ts (1)
27-46: LGTM!The type definitions are well-structured. Using
as constwith the array and derivingFoodDeliveryServiceTypevia indexed access is idiomatic TypeScript. The union type inPresetImageTypenow cleanly incorporates all delivery services.packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx (1)
1-257: LGTM!The component is consistent with other app store button components (
AppStoreButton,GalaxyStoreButton), with proper accessibility viaaria-label, responsive sizing, and thecnutility for className composition. The SVG correctly includes gradient definitions and filters for the official Google Play badge appearance.packages/visual-editor/src/utils/presetImageIcons.tsx (2)
3-13: LGTM!The imports are correctly structured and all imported components are properly used in the preset mappings below.
22-28: Verify consistent sizing across CTA buttons.The app store buttons (lines 17-20) include a
size="lg"prop, but the new food delivery service buttons don't have any size props. Please confirm this sizing difference is intentional and that the visual appearance will be consistent across all CTA button types in the editor.
packages/visual-editor/src/components/base/buttons/EzCaterButton.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx
Outdated
Show resolved
Hide resolved
packages/visual-editor/src/components/base/buttons/PostmatesButton.tsx
Outdated
Show resolved
Hide resolved
asanehisa
left a comment
asanehisa
left a comment
There was a problem hiding this comment.
overall lgtm, address any coderabbit comments that seem legit + if not resolve them
mkilpatrick
left a comment
mkilpatrick
left a comment
There was a problem hiding this comment.
Heed the robot nits
packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx
Outdated
Show resolved
Hide resolved
...itor/src/components/testing/screenshots/Grid/[mobile] version 47 - delivery service CTAs.png
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/visual-editor/locales/fi/visual-editor.json (1)
569-607: Delivery services lack internationalization support.The PR adds delivery service CTA presets (Deliveroo, DoorDash, Grubhub, Skip The Dishes, Postmates, ezCater) to
themeConfigOptions.ts, but these are hardcoded with English labels instead of using themsg()i18n function like app store presets do. This means:
- Finnish users (and all other locales) will see English labels only
- No translation entries exist in any locale file for these services
- Only Uber Eats is properly localized, creating inconsistency
Update
packages/visual-editor/src/utils/themeConfigOptions.tsto usemsg("presetImages.deliveroo", "Deliveroo")pattern and add translations for all 24 locales. Reference the existing presetImages structure in locale files (e.g.,packages/visual-editor/locales/fi/visual-editor.json).
🧹 Nitpick comments (3)
packages/visual-editor/locales/sk/visual-editor.json (1)
33-36: LGTM! New ARIA labels properly added for app store buttons.The four new accessibility labels for AppGallery, AppStore, GalaxyStore, and GooglePlay are correctly placed and follow the existing naming convention. These additions align with the PR's objective of adding delivery service CTA presets and app store download buttons.
If your team doesn't already have a Slovak-speaking reviewer in the localization workflow, you may want to have a native speaker verify the translation quality of these phrases, though they appear to use standard Slovak terminology for app store downloads.
packages/visual-editor/locales/nb/visual-editor.json (1)
33-36: LGTM! Accessibility labels properly added for app store buttons.The new aria labels are well-structured, follow the file's naming conventions, and are correctly placed alphabetically. These labels improve accessibility for the new app store/gallery button components.
Optional: Consider native speaker verification
While the Norwegian translations appear reasonable and follow standard app store button phrasing patterns, consider having a native Norwegian speaker verify the translations for:
- Natural phrasing and idiom usage
- Gender/number agreement
- Consistency with official app store terminology in Norwegian markets
The current translations:
- "Utforsk det på AppGallery" (Explore it on AppGallery)
- "Last ned på App Store" (Download on App Store)
- "Tilgjengelig på Galaxy Store" (Available on Galaxy Store)
- "Få den på Google Play" (Get it on Google Play)
packages/visual-editor/locales/lt/visual-editor.json (1)
33-36: Verify Lithuanian translations and consider consistent phrasing.The four new aria labels use different Lithuanian verbs/phrases:
- "Naršykite jį" (Browse it)
- "Atsisiųskite iš" (Download from)
- "Galima įsigyti" (Available at)
- "Gaukite jį iš" (Get it from)
While this variation might intentionally match each store's official Lithuanian branding, consistent phrasing across similar UI elements typically improves accessibility and user experience. Consider using parallel structure (e.g., all starting with "Atsisiųskite iš" or "Gaukite jį iš") unless the variation is deliberate.
Please verify these translations with a native Lithuanian speaker or localization expert to ensure:
- The translations are accurate and contextually appropriate
- The phrasing pattern (consistent vs. varied) aligns with your localization strategy
- The aria labels match the expected user experience for Lithuanian speakers
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
packages/visual-editor/locales/cs/visual-editor.json(1 hunks)packages/visual-editor/locales/da/visual-editor.json(1 hunks)packages/visual-editor/locales/de/visual-editor.json(1 hunks)packages/visual-editor/locales/en-GB/visual-editor.json(1 hunks)packages/visual-editor/locales/en/visual-editor.json(1 hunks)packages/visual-editor/locales/es/visual-editor.json(1 hunks)packages/visual-editor/locales/et/visual-editor.json(1 hunks)packages/visual-editor/locales/fi/visual-editor.json(1 hunks)packages/visual-editor/locales/fr/visual-editor.json(1 hunks)packages/visual-editor/locales/hr/visual-editor.json(1 hunks)packages/visual-editor/locales/hu/visual-editor.json(1 hunks)packages/visual-editor/locales/it/visual-editor.json(1 hunks)packages/visual-editor/locales/ja/visual-editor.json(1 hunks)packages/visual-editor/locales/lt/visual-editor.json(1 hunks)packages/visual-editor/locales/lv/visual-editor.json(1 hunks)packages/visual-editor/locales/nb/visual-editor.json(1 hunks)packages/visual-editor/locales/nl/visual-editor.json(1 hunks)packages/visual-editor/locales/pl/visual-editor.json(1 hunks)packages/visual-editor/locales/pt/visual-editor.json(1 hunks)packages/visual-editor/locales/ro/visual-editor.json(1 hunks)packages/visual-editor/locales/sk/visual-editor.json(1 hunks)packages/visual-editor/locales/sv/visual-editor.json(1 hunks)packages/visual-editor/locales/tr/visual-editor.json(1 hunks)packages/visual-editor/locales/zh-TW/visual-editor.json(1 hunks)packages/visual-editor/locales/zh/visual-editor.json(1 hunks)packages/visual-editor/src/components/base/buttons/AppGalleryButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/AppStoreButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/EzCaterButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GalaxyStoreButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/PostmatesButton.tsx(1 hunks)packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx
- packages/visual-editor/src/components/base/buttons/AppStoreButton.tsx
- packages/visual-editor/src/components/base/buttons/AppGalleryButton.tsx
- packages/visual-editor/src/components/base/buttons/GalaxyStoreButton.tsx
- packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx
- packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: call_unit_test / unit_tests (20.x)
- GitHub Check: call_unit_test / unit_tests (18.x)
- GitHub Check: create-dev-release
- GitHub Check: semgrep/ci
🔇 Additional comments (22)
packages/visual-editor/locales/nl/visual-editor.json (1)
33-36: LGTM! New ARIA labels for app store buttons look good.The four new ARIA label entries follow proper naming conventions and JSON structure. The Dutch translations appear contextually appropriate for their purpose of providing accessible button labels for app store/gallery download links.
If you have access to a native Dutch speaker or translation verification process, you may want to confirm the phrasing aligns with common Dutch app store terminology, but the translations look reasonable.
packages/visual-editor/src/components/base/buttons/EzCaterButton.tsx (1)
1-63: LGTM! Clean implementation with proper accessibility.The component is well-structured with good accessibility features (
role="img"and<title>). TheclipPathattribute on Line 17 correctly uses camelCase syntax for React JSX (the past review concern has been resolved). ThebackgroundColorprop is properly typed and applied to the SVG background.packages/visual-editor/src/components/base/buttons/PostmatesButton.tsx (1)
1-43: LGTM! Consistent implementation with proper accessibility.The component follows the same clean pattern as the other delivery service buttons. The
clipPathattribute on Line 17 correctly uses camelCase syntax for React JSX (the past review concern has been resolved). Accessibility is properly handled withrole="img"and<title>, and thebackgroundColorprop is correctly typed and applied.packages/visual-editor/locales/fr/visual-editor.json (1)
33-36: LGTM! Aria labels appropriately translated for accessibility.These French translations for app store aria labels are correct and necessary for screen reader accessibility. This is distinct from the delivery service brand names discussed in the past review—aria labels should be localized so French-speaking users with screen readers hear the appropriate descriptive text.
packages/visual-editor/locales/zh/visual-editor.json (1)
33-36: LGTM! Accessibility labels added correctly.The four new aria label keys for app store/gallery buttons are consistently placed and appropriately translated for Simplified Chinese. These align with the new app store button components introduced in the broader delivery service CTA feature.
packages/visual-editor/locales/en-GB/visual-editor.json (1)
33-36: LGTM! Official app store branding used correctly.The aria labels match the official branding for app store badges ("Download on the App Store", "Get it on Google Play", etc.), ensuring consistency with platform guidelines and user expectations.
packages/visual-editor/locales/zh-TW/visual-editor.json (1)
33-36: LGTM! Consistent localization for Traditional Chinese.The aria label additions are properly translated using Traditional Chinese characters and follow the same pattern as other locale files in this PR.
packages/visual-editor/locales/es/visual-editor.json (1)
33-36: LGTM! Spanish translations added correctly.The aria labels are appropriately translated for Spanish-speaking users and maintain consistency with the other locale files in this PR.
packages/visual-editor/locales/et/visual-editor.json (1)
33-36: LGTM! Clean localization additions.The four new aria-label keys are well-structured, follow a consistent naming pattern, and provide accessibility support for the app store download buttons introduced in this PR. The JSON syntax is correct and the keys are properly placed at the root level.
packages/visual-editor/locales/da/visual-editor.json (1)
33-36: The different verbs used in the Danish aria labels ("Udforsk det", "Download", "Tilgængelig", "Få det") cannot be verified against official app store localization without direct access to Apple, Google, Samsung, and Huawei's official Danish translations. Consider cross-referencing with official store localization assets or contacting each platform directly to confirm these translations match their official branding.packages/visual-editor/locales/pl/visual-editor.json (1)
33-36: Verify Polish translations against official app store badge text from platform developer resources.The aria labels use different action verbs (Przeglądaj, Pobierz, Dostępne, Pobierz go) which may intentionally align with official platform badge text. To ensure brand compliance and consistency:
- Compare against official badge text available in Apple App Store marketing resources
- Check Google Play Store official Polish badge variants
- Verify Samsung Galaxy Store Polish badge text in Seller Portal
- Confirm Huawei AppGallery Polish badge text in AppGallery Connect
packages/visual-editor/locales/en/visual-editor.json (1)
33-36: LGTM! Aria labels are well-crafted for accessibility.The four new aria-label keys are properly formatted and provide clear, actionable descriptions for screen readers. The text values match the official branding from each app store, which ensures consistency with user expectations.
packages/visual-editor/locales/lv/visual-editor.json (1)
33-36: Remove review comment - aria label keys are already consistent across all locale files.The four aria label keys (ariaLabelAppGallery, ariaLabelAppStore, ariaLabelGalaxyStore, ariaLabelGooglePlay) are present in all 25+ supported locale files, including Latvian. The consistency requirement is already satisfied, and no developer action is needed. The JSON structure and alphabetical placement are correct.
packages/visual-editor/locales/de/visual-editor.json (2)
33-36: Translations appear sound but cannot verify against proprietary official badge files.The German translations maintain proper brand names (App Store, Google Play, Galaxy Store, AppGallery) and use grammatically correct German with consistent formal register. While Apple's guidelines confirm "App Store" always appears in English and should never be translated, the exact official German phrasing for download badges from each platform is not publicly accessible. If brand accuracy is critical, confirm these translations directly with each company's localization teams or access their developer marketing materials for the official German badge text.
33-36: Verify aria-label consistency for delivery service buttons.The PR adds both app store buttons and food delivery service buttons (Deliveroo, DoorDash, Grubhub, SkipTheDishes, Postmates, EzCater, UberEats), but only app store aria-labels are present in this locale file. For accessibility consistency, verify whether the delivery service buttons also require similar aria-labels for screen readers.
Run the following script to check if delivery service aria-labels exist in other locale files or if they're handled differently:
#!/bin/bash # Description: Check for delivery service aria-labels across locale files # Search for delivery service aria-labels echo "=== Checking for delivery service aria-labels ===" rg -n "ariaLabel.*(?:Deliveroo|DoorDash|Grubhub|SkipTheDishes|Postmates|EzCater|UberEats)" --type json # Search for app store aria-labels to compare pattern echo -e "\n=== App store aria-labels for comparison ===" rg -n "ariaLabel(?:AppGallery|AppStore|GalaxyStore|GooglePlay)" --type json # Check how delivery services are defined in presetImages echo -e "\n=== Delivery services in presetImages ===" rg -n -A1 '"(?:deliveroo|doorDash|grubhub|skipTheDishes|postmates|ezCater|uberEats)"' packages/visual-editor/locales/packages/visual-editor/locales/tr/visual-editor.json (1)
33-36: LGTM! New app store ARIA labels added correctly.The four new accessibility labels for app stores are properly structured and alphabetically placed. These keys already exist in other locale files (Portuguese, Chinese), confirming they're consumed by the application. The Turkish translations are contextually appropriate for their respective app store buttons.
packages/visual-editor/locales/cs/visual-editor.json (1)
33-36: Czech ARIA labels are structurally correct; phrasing variation requires verification against platform guidelines.The four new ARIA labels are properly positioned and follow Czech language conventions. The varied phrasing across buttons is acceptable from an accessibility and localization standpoint, but should be verified to ensure alignment with each platform's official Czech terminology. Confirm these translations reflect Apple, Google, Samsung, and Huawei's standard Czech marketing language for their respective app stores.
packages/visual-editor/locales/ja/visual-editor.json (1)
33-36: App store aria-label translations are correct and complete.The four app store translations (lines 33-36) are properly localized for Japanese and align with the app store entries in the presetImages section. The variation in verb usage across the translations (見てみる, ダウンロード, 入手可能, 入手) reflects the distinct marketing language for each app store and is appropriate for accessibility.
Delivery services mentioned in the PR (Deliveroo, DoorDash, Grubhub, SkipTheDishes, Postmates, EzCater) do not have corresponding entries in the locale file structure, so aria-label translations for these services are not applicable.
packages/visual-editor/locales/sv/visual-editor.json (1)
33-36: No action needed. The Swedish locale file correctly includes aria labels for the app store buttons (AppGallery, App Store, Galaxy Store, Google Play). The delivery service buttons (Deliveroo, DoorDash, Grubhub, SkipTheDishes) use a different accessibility implementation—SVG elements withrole="img"and<title>elements rather than anchor elements witharia-labelattributes—and therefore don't reference locale strings. If aria label localization for delivery services is desired, the components themselves would need to be refactored to use the same pattern as app store buttons, which is beyond the scope of locale file updates.packages/visual-editor/locales/fi/visual-editor.json (1)
33-36: No changes needed. The ARIA labels correctly mirror the English source text, which intentionally uses different verbs for different app stores ("Explore," "Download," "Available," "Get") to reflect distinct user actions. ARIA best practices emphasize consistency between visible labels and accessible names—not identical phrasing across all labels.Likely an incorrect or invalid review comment.
packages/visual-editor/locales/ro/visual-editor.json (1)
33-36: LGTM. The new ARIA label keys are well-structured, follow existing naming conventions, and properly support accessibility for the new app-store button components introduced in this PR.Consider optional verification by your localization team:
Translation accuracy: Have a native Romanian speaker verify these translations align with official app store branding terminology.
Cross-locale consistency: Confirm equivalent keys have been added to all other locale files for consistent internationalization support.
packages/visual-editor/locales/hr/visual-editor.json (1)
33-36: LGTM! Well-structured accessibility label additions.The new aria label keys are properly formatted, alphabetically ordered, and follow the file's naming conventions. These additions support the new app-store button components introduced in this PR, with correct implementation using the
pt()i18n function in AppGalleryButton, AppStoreButton, GalaxyStoreButton, and GooglePlayButton components.
… into add-cta-presets
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
packages/visual-editor/locales/pt/visual-editor.json (1)
33-36: Inconsistent ARIA label phrasing across app stores.The four new ARIA labels use different action verbs ("Explore-o", "Baixe", "Disponível", "Obtenha") and inconsistent prepositions ("no" vs. "em"). For accessibility and user experience, standardize to a single pattern—e.g., all using "Disponível na/no {{serviceName}}" or "Baixar na/no {{serviceName}}"—and ensure gendered prepositions match each store name.
🧹 Nitpick comments (1)
packages/visual-editor/locales/hr/visual-editor.json (1)
33-36: LGTM! New ARIA labels are structured correctly.The four new accessibility label keys are properly formatted with the
{{serviceName}}template variable and follow the existing naming conventions. The JSON structure is valid.While the structure is correct, consider having a native Croatian speaker verify the translations for accuracy and natural phrasing if this hasn't been done already.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 47 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 47 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 47 - delivery service CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (30)
packages/visual-editor/locales/cs/visual-editor.json(1 hunks)packages/visual-editor/locales/da/visual-editor.json(1 hunks)packages/visual-editor/locales/de/visual-editor.json(1 hunks)packages/visual-editor/locales/en-GB/visual-editor.json(1 hunks)packages/visual-editor/locales/en/visual-editor.json(1 hunks)packages/visual-editor/locales/es/visual-editor.json(1 hunks)packages/visual-editor/locales/et/visual-editor.json(1 hunks)packages/visual-editor/locales/fi/visual-editor.json(1 hunks)packages/visual-editor/locales/fr/visual-editor.json(1 hunks)packages/visual-editor/locales/hr/visual-editor.json(1 hunks)packages/visual-editor/locales/hu/visual-editor.json(1 hunks)packages/visual-editor/locales/it/visual-editor.json(1 hunks)packages/visual-editor/locales/ja/visual-editor.json(1 hunks)packages/visual-editor/locales/lt/visual-editor.json(1 hunks)packages/visual-editor/locales/lv/visual-editor.json(1 hunks)packages/visual-editor/locales/nb/visual-editor.json(1 hunks)packages/visual-editor/locales/nl/visual-editor.json(1 hunks)packages/visual-editor/locales/pl/visual-editor.json(1 hunks)packages/visual-editor/locales/pt/visual-editor.json(1 hunks)packages/visual-editor/locales/ro/visual-editor.json(1 hunks)packages/visual-editor/locales/sk/visual-editor.json(1 hunks)packages/visual-editor/locales/sv/visual-editor.json(1 hunks)packages/visual-editor/locales/tr/visual-editor.json(1 hunks)packages/visual-editor/locales/zh-TW/visual-editor.json(1 hunks)packages/visual-editor/locales/zh/visual-editor.json(1 hunks)packages/visual-editor/src/components/base/buttons/AppGalleryButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/AppStoreButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GalaxyStoreButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx(1 hunks)packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (21)
- packages/visual-editor/src/components/base/buttons/AppGalleryButton.tsx
- packages/visual-editor/locales/nl/visual-editor.json
- packages/visual-editor/locales/fi/visual-editor.json
- packages/visual-editor/src/components/base/buttons/GalaxyStoreButton.tsx
- packages/visual-editor/locales/sv/visual-editor.json
- packages/visual-editor/src/components/base/buttons/GooglePlayWhiteButton.tsx
- packages/visual-editor/locales/zh-TW/visual-editor.json
- packages/visual-editor/locales/en/visual-editor.json
- packages/visual-editor/locales/pl/visual-editor.json
- packages/visual-editor/locales/et/visual-editor.json
- packages/visual-editor/locales/es/visual-editor.json
- packages/visual-editor/src/components/base/buttons/AppStoreButton.tsx
- packages/visual-editor/locales/sk/visual-editor.json
- packages/visual-editor/locales/hu/visual-editor.json
- packages/visual-editor/locales/da/visual-editor.json
- packages/visual-editor/locales/ja/visual-editor.json
- packages/visual-editor/locales/it/visual-editor.json
- packages/visual-editor/locales/en-GB/visual-editor.json
- packages/visual-editor/locales/de/visual-editor.json
- packages/visual-editor/locales/lv/visual-editor.json
- packages/visual-editor/locales/zh/visual-editor.json
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx (1)
packages/visual-editor/src/utils/cn.ts (1)
cn(65-67)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: call_unit_test / unit_tests (20.x)
- GitHub Check: call_unit_test / unit_tests (18.x)
- GitHub Check: create-dev-release
- GitHub Check: semgrep/ci
🔇 Additional comments (6)
packages/visual-editor/locales/ro/visual-editor.json (1)
33-36: Verify Romanian gender agreement for interpolated service names.The JSON structure and interpolation syntax are correct. However, the Romanian translations use masculine grammatical forms (e.g., "Explorează-l", "Obțineți-l", "Disponibil"). Please verify that these forms are appropriate for all service names that will be interpolated into
{{serviceName}}, as Romanian is a gendered language and some service names may require feminine or neuter agreement.Consider having a native Romanian speaker review these ARIA labels to ensure they sound natural when read by screen readers and maintain proper grammatical agreement across all use cases.
packages/visual-editor/locales/fr/visual-editor.json (1)
33-36: LGTM! Proper i18n implementation with placeholders.The ARIA labels correctly use
{{serviceName}}placeholders for brand names, which will be injected in English at runtime. The surrounding French text is accurately translated and matches official app store marketing language. This approach aligns with the past review resolution to keep service names in English.packages/visual-editor/locales/nb/visual-editor.json (1)
33-36: Verify pronoun consistency with a native Norwegian speaker or localization expert.The Norwegian translations show inconsistent pronoun usage across the four aria-labels:
- Line 33: "Utforsk det" (neuter pronoun)
- Line 34: "Last ned" (no pronoun)
- Line 35: "Tilgjengelig" (no pronoun)
- Line 36: "Få den" (common gender pronoun)
Since "app" in Norwegian ("appen") is typically common gender, the variation may indicate a translation inconsistency—or it could be intentional to match each store's official branded phrases. Verify these translations align with the official app store button text in Norwegian.
packages/visual-editor/locales/lt/visual-editor.json (1)
33-36: All locale files consistently include the four required ARIA label keys.Verification confirms that all 25 supported locale files (cs, da, de, en-GB, en, es, et, fi, fr, hr, hu, it, ja, lt, lv, nb, nl, pl, pt, ro, sk, sv, tr, zh-TW, zh) contain the four ARIA label keys:
ariaLabelAppGallery,ariaLabelAppStore,ariaLabelGalaxyStore, andariaLabelGooglePlay. The addition has been applied consistently across the entire localization suite with 100% coverage.packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx (1)
5-18: Component structure looks solid.The component signature and anchor element are well-structured:
- Size prop with sensible defaults
- Props spreading allows flexibility
- className properly merged via
cn()utility- Accessible aria-label set using i18n helper
packages/visual-editor/locales/tr/visual-editor.json (1)
33-36: LGTM! New ARIA labels align with PR objectives and are consistently implemented across locales.The four new accessibility label keys for app stores/galleries are well-structured with correct
{{serviceName}}placeholder usage. JSON syntax is valid, and verification confirms these additions appear consistently across all locale files including Turkish, Czech, Danish, German, and English variants.Consider verifying the Turkish translation quality with a native speaker if not already done, though the verb conjugations (keşfedin, indirin, edinin) and preposition usage (üzerinde, üzerinden) appear linguistically sound.
| "ariaLabelAppGallery": "Prozkoumejte to na {{serviceName}}", | ||
| "ariaLabelAppStore": "Stáhnout na {{serviceName}}", | ||
| "ariaLabelGalaxyStore": "Dostupné na {{serviceName}}", | ||
| "ariaLabelGooglePlay": "Získejte to na {{serviceName}}", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for delivery service ARIA label patterns in locale files
echo "=== Searching for delivery service ARIA labels ==="
rg -n "ariaLabel.*(?:Deliveroo|DoorDash|Doordash|Grubhub|SkipTheDishes|Postmates|EzCater|UberEats)" packages/visual-editor/locales/ 2>/dev/null || echo "No delivery service ARIA labels found"
echo -e "\n=== Checking locale file structure ==="
# Check the Czech locale file to see what ARIA labels exist
rg -n "ariaLabel" packages/visual-editor/locales/cs/visual-editor.json | head -20
echo -e "\n=== Searching for delivery button components ==="
find packages/visual-editor/src -type f \( -name "*button*" -o -name "*Button*" \) 2>/dev/null | head -10Repository: yext/visual-editor
Length of output: 1218
🏁 Script executed:
#!/bin/bash
# Inspect delivery and app store button implementations
echo "=== Checking DeliverooButton implementation ==="
cat -n packages/visual-editor/src/components/base/buttons/DeliverooButton.tsx
echo -e "\n=== Checking AppStoreButton implementation ==="
cat -n packages/visual-editor/src/components/base/buttons/AppStoreButton.tsx
echo -e "\n=== Checking if buttons use a base class or pattern ==="
head -30 packages/visual-editor/src/components/base/buttons/AppGalleryButton.tsxRepository: yext/visual-editor
Length of output: 17640
🏁 Script executed:
#!/bin/bash
# Check if other delivery buttons follow the same pattern as DeliverooButton
echo "=== Checking GrubhubButton ==="
head -20 packages/visual-editor/src/components/base/buttons/GrubhubButton.tsx
echo -e "\n=== Checking GooglePlayButton (app store) ==="
head -20 packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx
echo -e "\n=== Checking how buttons are used - search for button imports ==="
rg -n "DeliverooButton|GrubhubButton|AppStoreButton" packages/visual-editor/src --type=tsx --type=ts -B 2 -A 2 | head -40Repository: yext/visual-editor
Length of output: 1398
🏁 Script executed:
#!/bin/bash
# Search for how delivery buttons are used in components
echo "=== Searching for DeliverooButton usage ==="
rg "DeliverooButton" packages/visual-editor/src -A 3 | head -20
echo -e "\n=== Searching for all button component files ==="
ls -la packages/visual-editor/src/components/base/buttons/ | grep Button.tsxRepository: yext/visual-editor
Length of output: 2278
Add ARIA labels for delivery service buttons in locale files.
This PR adds aria-label entries for app store buttons (AppGallery, AppStore, GalaxyStore, GooglePlay) but omits them for delivery service buttons (Deliveroo, DoorDash, Grubhub, SkipTheDishes, Postmates, EzCater, UberEats).
The delivery buttons currently use SVG elements with only <title> tags, which have limited screen reader support. Add corresponding ariaLabel* keys for each delivery service to match the pattern used for app store buttons and ensure full WCAG accessibility compliance for all interactive button components.
🤖 Prompt for AI Agents
In packages/visual-editor/locales/cs/visual-editor.json around lines 33 to 36,
add missing aria-label keys for the delivery service buttons to mirror the app
store pattern; specifically add keys ariaLabelDeliveroo, ariaLabelDoorDash,
ariaLabelGrubhub, ariaLabelSkipTheDishes, ariaLabelPostmates, ariaLabelEzCater,
and ariaLabelUberEats with Czech values following the same template as the
existing app store entries (use a phrase ending with "na {{serviceName}}"
consistent with the other keys).
| "ariaLabelAppGallery": "Naršykite jį {{serviceName}}", | ||
| "ariaLabelAppStore": "Atsisiųskite iš {{serviceName}}", | ||
| "ariaLabelGalaxyStore": "Galima {{serviceName}}", | ||
| "ariaLabelGooglePlay": "Gaukite jį iš {{serviceName}}", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the English locale file for visual-editor
find . -path "*locales/en*visual-editor.json" -type f | head -5
# Also check the structure of the locales directory
find . -path "*/locales/*" -name "visual-editor.json" -type f | head -10Repository: yext/visual-editor
Length of output: 727
🏁 Script executed:
#!/bin/bash
# Read the English locale file and extract the four ARIA label values
cat ./packages/visual-editor/locales/en/visual-editor.json | jq '{
ariaLabelAppGallery,
ariaLabelAppStore,
ariaLabelGalaxyStore,
ariaLabelGooglePlay
}'Repository: yext/visual-editor
Length of output: 292
Lithuanian translations require correction for accuracy and preposition consistency.
The translations have multiple issues:
- Line 35
"Galima {{serviceName}}"is grammatically incomplete—it lacks the preposition and proper structure of the English source "Available on {{serviceName}}" - Lines 34 & 36 incorrectly use "iš" (from) instead of matching the English preposition "on"
- Line 33 also omits the preposition structure present in the English source
All four ARIA labels need review by a Lithuanian speaker or translator to ensure they match the English source strings both structurally and semantically. Use prepositions like "ant" (on) or "per" (through) to align with the English intent.
🤖 Prompt for AI Agents
In packages/visual-editor/locales/lt/visual-editor.json around lines 33 to 36,
the four ARIA label translations are grammatically incorrect and use wrong or
missing prepositions; update them to match the English source structure "on
{{serviceName}}" by using appropriate Lithuanian prepositions (e.g., "ant" or
"per") and correct word order so each string reads naturally and semantically
mirrors the source (have a Lithuanian speaker produce and replace the four
entries with accurate equivalents like "Naršykite ant {{serviceName}}",
"Atsisiųskite per {{serviceName}}", "Pasiekiama ant {{serviceName}}", "Gaukite
ant {{serviceName}}" or other idiomatic variants).
| <svg | ||
| width={size === "md" ? 135 : 149} | ||
| height={size === "md" ? 40 : 44} | ||
| viewBox="0 0 135 40" | ||
| fill="none" | ||
| > | ||
| <path | ||
| d="M68.136 21.7511C65.784 21.7511 63.867 23.5401 63.867 26.0041C63.867 28.4531 65.784 30.2571 68.136 30.2571C70.489 30.2571 72.406 28.4531 72.406 26.0041C72.405 23.5401 70.488 21.7511 68.136 21.7511ZM68.136 28.5831C66.847 28.5831 65.736 27.5201 65.736 26.0051C65.736 24.4741 66.848 23.4271 68.136 23.4271C69.425 23.4271 70.536 24.4741 70.536 26.0051C70.536 27.5191 69.425 28.5831 68.136 28.5831ZM58.822 21.7511C56.47 21.7511 54.553 23.5401 54.553 26.0041C54.553 28.4531 56.47 30.2571 58.822 30.2571C61.175 30.2571 63.092 28.4531 63.092 26.0041C63.092 23.5401 61.175 21.7511 58.822 21.7511ZM58.822 28.5831C57.533 28.5831 56.422 27.5201 56.422 26.0051C56.422 24.4741 57.534 23.4271 58.822 23.4271C60.111 23.4271 61.222 24.4741 61.222 26.0051C61.223 27.5191 60.111 28.5831 58.822 28.5831ZM47.744 23.0571V24.8611H52.062C51.933 25.8761 51.595 26.6171 51.079 27.1321C50.451 27.7601 49.468 28.4531 47.744 28.4531C45.086 28.4531 43.008 26.3101 43.008 23.6521C43.008 20.9941 45.086 18.8511 47.744 18.8511C49.178 18.8511 50.225 19.4151 50.998 20.1401L52.271 18.8671C51.191 17.8361 49.758 17.0471 47.744 17.0471C44.103 17.0471 41.042 20.0111 41.042 23.6521C41.042 27.2931 44.103 30.2571 47.744 30.2571C49.709 30.2571 51.192 29.6121 52.351 28.4041C53.543 27.2121 53.914 25.5361 53.914 24.1831C53.914 23.7651 53.882 23.3781 53.817 23.0561H47.744V23.0571ZM93.052 24.4581C92.698 23.5081 91.618 21.7511 89.411 21.7511C87.22 21.7511 85.399 23.4751 85.399 26.0041C85.399 28.3881 87.204 30.2571 89.62 30.2571C91.569 30.2571 92.697 29.0651 93.165 28.3721L91.715 27.4051C91.232 28.1141 90.571 28.5811 89.62 28.5811C88.67 28.5811 87.993 28.1461 87.558 27.2921L93.245 24.9401L93.052 24.4581ZM87.252 25.8761C87.204 24.2321 88.525 23.3951 89.476 23.3951C90.217 23.3951 90.845 23.7661 91.055 24.2971L87.252 25.8761ZM82.629 30.0001H84.497V17.4991H82.629V30.0001ZM79.567 22.7021H79.503C79.084 22.2021 78.278 21.7511 77.264 21.7511C75.137 21.7511 73.188 23.6201 73.188 26.0211C73.188 28.4051 75.137 30.2581 77.264 30.2581C78.279 30.2581 79.084 29.8071 79.503 29.2921H79.567V29.9041C79.567 31.5311 78.697 32.4011 77.296 32.4011C76.152 32.4011 75.443 31.5801 75.153 30.8871L73.526 31.5641C73.993 32.6911 75.233 34.0771 77.296 34.0771C79.487 34.0771 81.34 32.7881 81.34 29.6461V22.0101H79.568V22.7021H79.567ZM77.425 28.5831C76.136 28.5831 75.057 27.5031 75.057 26.0211C75.057 24.5221 76.136 23.4271 77.425 23.4271C78.697 23.4271 79.696 24.5221 79.696 26.0211C79.696 27.5031 78.697 28.5831 77.425 28.5831ZM101.806 17.4991H97.335V30.0001H99.2V25.2641H101.805C103.873 25.2641 105.907 23.7671 105.907 21.3821C105.907 18.9971 103.874 17.4991 101.806 17.4991ZM101.854 23.5241H99.2V19.2391H101.854C103.249 19.2391 104.041 20.3941 104.041 21.3821C104.041 22.3501 103.249 23.5241 101.854 23.5241ZM113.386 21.7291C112.035 21.7291 110.636 22.3241 110.057 23.6431L111.713 24.3341C112.067 23.6431 112.727 23.4171 113.418 23.4171C114.383 23.4171 115.364 23.9961 115.38 25.0251V25.1541C115.042 24.9611 114.318 24.6721 113.434 24.6721C111.649 24.6721 109.831 25.6531 109.831 27.4861C109.831 29.1591 111.295 30.2361 112.935 30.2361C114.189 30.2361 114.881 29.6731 115.315 29.0131H115.379V29.9781H117.181V25.1851C117.182 22.9671 115.524 21.7291 113.386 21.7291ZM113.16 28.5801C112.55 28.5801 111.697 28.2741 111.697 27.5181C111.697 26.5531 112.759 26.1831 113.676 26.1831C114.495 26.1831 114.882 26.3601 115.38 26.6011C115.235 27.7601 114.238 28.5801 113.16 28.5801ZM123.743 22.0021L121.604 27.4221H121.54L119.32 22.0021H117.31L120.639 29.5771L118.741 33.7911H120.687L125.818 22.0021H123.743ZM106.937 30.0001H108.802V17.4991H106.937V30.0001Z" | ||
| fill="white" | ||
| /> | ||
| <path | ||
| d="M47.418 10.2429C47.418 11.0809 47.1701 11.7479 46.673 12.2459C46.109 12.8379 45.3731 13.1339 44.4691 13.1339C43.6031 13.1339 42.8661 12.8339 42.2611 12.2339C41.6551 11.6329 41.3521 10.8889 41.3521 10.0009C41.3521 9.11194 41.6551 8.36794 42.2611 7.76794C42.8661 7.16694 43.6031 6.86694 44.4691 6.86694C44.8991 6.86694 45.3101 6.95094 45.7001 7.11794C46.0911 7.28594 46.404 7.50894 46.6381 7.78794L46.111 8.31594C45.714 7.84094 45.167 7.60394 44.468 7.60394C43.836 7.60394 43.29 7.82594 42.829 8.26994C42.368 8.71394 42.1381 9.29094 42.1381 9.99994C42.1381 10.7089 42.368 11.2859 42.829 11.7299C43.29 12.1739 43.836 12.3959 44.468 12.3959C45.138 12.3959 45.6971 12.1729 46.1441 11.7259C46.4341 11.4349 46.602 11.0299 46.647 10.5109H44.468V9.78994H47.375C47.405 9.94694 47.418 10.0979 47.418 10.2429Z" | ||
| fill="white" | ||
| /> | ||
| <path | ||
| d="M52.0281 7.737H49.2961V9.639H51.7601V10.36H49.2961V12.262H52.0281V13H48.5251V7H52.0281V7.737Z" | ||
| fill="white" | ||
| /> | ||
| <path | ||
| d="M55.279 13H54.508V7.737H52.832V7H56.955V7.737H55.279V13Z" | ||
| fill="white" | ||
| /> | ||
| <path d="M59.938 13V7H60.709V13H59.938Z" fill="white" /> | ||
| <path | ||
| d="M64.1281 13H63.3572V7.737H61.6812V7H65.8042V7.737H64.1281V13Z" | ||
| fill="white" | ||
| /> | ||
| <path | ||
| d="M73.6089 12.225C73.0189 12.831 72.2859 13.134 71.4089 13.134C70.5319 13.134 69.7989 12.831 69.2099 12.225C68.6199 11.619 68.3259 10.877 68.3259 9.99999C68.3259 9.12299 68.6199 8.38099 69.2099 7.77499C69.7989 7.16899 70.5319 6.86499 71.4089 6.86499C72.2809 6.86499 73.0129 7.16999 73.6049 7.77899C74.1969 8.38799 74.4929 9.12799 74.4929 9.99999C74.4929 10.877 74.1979 11.619 73.6089 12.225ZM69.7789 11.722C70.2229 12.172 70.7659 12.396 71.4089 12.396C72.0519 12.396 72.5959 12.171 73.0389 11.722C73.4829 11.272 73.7059 10.698 73.7059 9.99999C73.7059 9.30199 73.4829 8.72799 73.0389 8.27799C72.5959 7.82799 72.0519 7.60399 71.4089 7.60399C70.7659 7.60399 70.2229 7.82899 69.7789 8.27799C69.3359 8.72799 69.1129 9.30199 69.1129 9.99999C69.1129 10.698 69.3359 11.272 69.7789 11.722Z" | ||
| fill="white" | ||
| /> | ||
| <path | ||
| d="M75.5749 13V7H76.513L79.429 11.667H79.4619L79.429 10.511V7H80.1999V13H79.3949L76.344 8.106H76.3109L76.344 9.262V13H75.5749Z" | ||
| fill="white" | ||
| /> | ||
| <path | ||
| d="M47.418 10.2429C47.418 11.0809 47.1701 11.7479 46.673 12.2459C46.109 12.8379 45.3731 13.1339 44.4691 13.1339C43.6031 13.1339 42.8661 12.8339 42.2611 12.2339C41.6551 11.6329 41.3521 10.8889 41.3521 10.0009C41.3521 9.11194 41.6551 8.36794 42.2611 7.76794C42.8661 7.16694 43.6031 6.86694 44.4691 6.86694C44.8991 6.86694 45.3101 6.95094 45.7001 7.11794C46.0911 7.28594 46.404 7.50894 46.6381 7.78794L46.111 8.31594C45.714 7.84094 45.167 7.60394 44.468 7.60394C43.836 7.60394 43.29 7.82594 42.829 8.26994C42.368 8.71394 42.1381 9.29094 42.1381 9.99994C42.1381 10.7089 42.368 11.2859 42.829 11.7299C43.29 12.1739 43.836 12.3959 44.468 12.3959C45.138 12.3959 45.6971 12.1729 46.1441 11.7259C46.4341 11.4349 46.602 11.0299 46.647 10.5109H44.468V9.78994H47.375C47.405 9.94694 47.418 10.0979 47.418 10.2429Z" | ||
| stroke="white" | ||
| strokeWidth="0.2" | ||
| strokeMiterlimit="10" | ||
| /> | ||
| <path | ||
| d="M52.0281 7.737H49.2961V9.639H51.7601V10.36H49.2961V12.262H52.0281V13H48.5251V7H52.0281V7.737Z" | ||
| stroke="white" | ||
| strokeWidth="0.2" | ||
| strokeMiterlimit="10" | ||
| /> | ||
| <path | ||
| d="M55.279 13H54.508V7.737H52.832V7H56.955V7.737H55.279V13Z" | ||
| stroke="white" | ||
| strokeWidth="0.2" | ||
| strokeMiterlimit="10" | ||
| /> | ||
| <path | ||
| d="M59.938 13V7H60.709V13H59.938Z" | ||
| stroke="white" | ||
| strokeWidth="0.2" | ||
| strokeMiterlimit="10" | ||
| /> | ||
| <path | ||
| d="M64.1281 13H63.3572V7.737H61.6812V7H65.8042V7.737H64.1281V13Z" | ||
| stroke="white" | ||
| strokeWidth="0.2" | ||
| strokeMiterlimit="10" | ||
| /> | ||
| <path | ||
| d="M73.6089 12.225C73.0189 12.831 72.2859 13.134 71.4089 13.134C70.5319 13.134 69.7989 12.831 69.2099 12.225C68.6199 11.619 68.3259 10.877 68.3259 9.99999C68.3259 9.12299 68.6199 8.38099 69.2099 7.77499C69.7989 7.16899 70.5319 6.86499 71.4089 6.86499C72.2809 6.86499 73.0129 7.16999 73.6049 7.77899C74.1969 8.38799 74.4929 9.12799 74.4929 9.99999C74.4929 10.877 74.1979 11.619 73.6089 12.225ZM69.7789 11.722C70.2229 12.172 70.7659 12.396 71.4089 12.396C72.0519 12.396 72.5959 12.171 73.0389 11.722C73.4829 11.272 73.7059 10.698 73.7059 9.99999C73.7059 9.30199 73.4829 8.72799 73.0389 8.27799C72.5959 7.82799 72.0519 7.60399 71.4089 7.60399C70.7659 7.60399 70.2229 7.82899 69.7789 8.27799C69.3359 8.72799 69.1129 9.30199 69.1129 9.99999C69.1129 10.698 69.3359 11.272 69.7789 11.722Z" | ||
| stroke="white" | ||
| strokeWidth="0.2" | ||
| strokeMiterlimit="10" | ||
| /> | ||
| <path | ||
| d="M75.5749 13V7H76.513L79.429 11.667H79.4619L79.429 10.511V7H80.1999V13H79.3949L76.344 8.106H76.3109L76.344 9.262V13H75.5749Z" | ||
| stroke="white" | ||
| strokeWidth="0.2" | ||
| strokeMiterlimit="10" | ||
| /> | ||
| <g filter="url(#filter0_ii_1303_2188)"> | ||
| <path | ||
| d="M10.4361 7.53803C10.1451 7.84603 9.97314 8.32403 9.97314 8.94303V31.059C9.97314 31.679 10.1451 32.156 10.4361 32.464L10.5101 32.536L22.8991 20.147V20.001V19.855L10.5101 7.46503L10.4361 7.53803Z" | ||
| fill="url(#paint0_linear_1303_2188)" | ||
| /> | ||
| <path | ||
| d="M27.0279 24.278L22.8989 20.147V20.001V19.855L27.0289 15.725L27.1219 15.778L32.0149 18.558C33.4119 19.352 33.4119 20.651 32.0149 21.446L27.1219 24.226L27.0279 24.278Z" | ||
| fill="url(#paint1_linear_1303_2188)" | ||
| /> | ||
| <g filter="url(#filter1_i_1303_2188)"> | ||
| <path | ||
| d="M27.122 24.225L22.898 20.001L10.436 32.464C10.896 32.952 11.657 33.012 12.514 32.526L27.122 24.225Z" | ||
| fill="url(#paint2_linear_1303_2188)" | ||
| /> | ||
| </g> | ||
| <path | ||
| d="M27.122 15.777L12.514 7.47701C11.657 6.99001 10.896 7.05101 10.436 7.53901L22.899 20.002L27.122 15.777Z" | ||
| fill="url(#paint3_linear_1303_2188)" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <filter | ||
| id="filter0_ii_1303_2188" | ||
| x="9.97314" | ||
| y="7.14093" | ||
| width="23.0894" | ||
| height="25.7207" | ||
| filterUnits="userSpaceOnUse" | ||
| colorInterpolationFilters="sRGB" | ||
| > | ||
| <feFlood floodOpacity="0" result="BackgroundImageFix" /> | ||
| <feBlend | ||
| mode="normal" | ||
| in="SourceGraphic" | ||
| in2="BackgroundImageFix" | ||
| result="shape" | ||
| /> | ||
| <feColorMatrix | ||
| in="SourceAlpha" | ||
| type="matrix" | ||
| values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" | ||
| result="hardAlpha" | ||
| /> | ||
| <feOffset dy="-0.15" /> | ||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /> | ||
| <feColorMatrix | ||
| type="matrix" | ||
| values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" | ||
| /> | ||
| <feBlend | ||
| mode="normal" | ||
| in2="shape" | ||
| result="effect1_innerShadow_1303_2188" | ||
| /> | ||
| <feColorMatrix | ||
| in="SourceAlpha" | ||
| type="matrix" | ||
| values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" | ||
| result="hardAlpha" | ||
| /> | ||
| <feOffset dy="0.15" /> | ||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /> | ||
| <feColorMatrix | ||
| type="matrix" | ||
| values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" | ||
| /> | ||
| <feBlend | ||
| mode="normal" | ||
| in2="effect1_innerShadow_1303_2188" | ||
| result="effect2_innerShadow_1303_2188" | ||
| /> | ||
| </filter> | ||
| <filter | ||
| id="filter1_i_1303_2188" | ||
| x="10.436" | ||
| y="20.001" | ||
| width="16.686" | ||
| height="12.8607" | ||
| filterUnits="userSpaceOnUse" | ||
| colorInterpolationFilters="sRGB" | ||
| > | ||
| <feFlood floodOpacity="0" result="BackgroundImageFix" /> | ||
| <feBlend | ||
| mode="normal" | ||
| in="SourceGraphic" | ||
| in2="BackgroundImageFix" | ||
| result="shape" | ||
| /> | ||
| <feColorMatrix | ||
| in="SourceAlpha" | ||
| type="matrix" | ||
| values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" | ||
| result="hardAlpha" | ||
| /> | ||
| <feOffset dy="-0.15" /> | ||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /> | ||
| <feColorMatrix | ||
| type="matrix" | ||
| values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" | ||
| /> | ||
| <feBlend | ||
| mode="normal" | ||
| in2="shape" | ||
| result="effect1_innerShadow_1303_2188" | ||
| /> | ||
| </filter> | ||
| <linearGradient | ||
| id="paint0_linear_1303_2188" | ||
| x1="21.8009" | ||
| y1="8.70903" | ||
| x2="5.01895" | ||
| y2="25.491" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop stopColor="#00A0FF" /> | ||
| <stop offset="0.0066" stopColor="#00A1FF" /> | ||
| <stop offset="0.2601" stopColor="#00BEFF" /> | ||
| <stop offset="0.5122" stopColor="#00D2FF" /> | ||
| <stop offset="0.7604" stopColor="#00DFFF" /> | ||
| <stop offset="1" stopColor="#00E3FF" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| id="paint1_linear_1303_2188" | ||
| x1="33.8334" | ||
| y1="20.001" | ||
| x2="9.63753" | ||
| y2="20.001" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop stopColor="#FFE000" /> | ||
| <stop offset="0.4087" stopColor="#FFBD00" /> | ||
| <stop offset="0.7754" stopColor="#FFA500" /> | ||
| <stop offset="1" stopColor="#FF9C00" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| id="paint2_linear_1303_2188" | ||
| x1="24.8281" | ||
| y1="22.2949" | ||
| x2="2.06964" | ||
| y2="45.0534" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop stopColor="#FF3A44" /> | ||
| <stop offset="1" stopColor="#C31162" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| id="paint3_linear_1303_2188" | ||
| x1="7.29743" | ||
| y1="0.176806" | ||
| x2="17.4597" | ||
| y2="10.3391" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop stopColor="#32A071" /> | ||
| <stop offset="0.0685" stopColor="#2DA771" /> | ||
| <stop offset="0.4762" stopColor="#15CF74" /> | ||
| <stop offset="0.8009" stopColor="#06E775" /> | ||
| <stop offset="1" stopColor="#00F076" /> | ||
| </linearGradient> | ||
| </defs> | ||
| </svg> |
There was a problem hiding this comment.
Add aria-hidden="true" to the SVG element.
The inline SVG should be hidden from screen readers since the parent anchor already provides an aria-label. Without this attribute, screen readers may attempt to announce both the aria-label and explore the SVG structure, causing redundant or confusing output.
🔎 Proposed fix
<svg
+ aria-hidden="true"
width={size === "md" ? 135 : 149}
height={size === "md" ? 40 : 44}
viewBox="0 0 135 40"
fill="none"
>🤖 Prompt for AI Agents
In packages/visual-editor/src/components/base/buttons/GooglePlayButton.tsx
around lines 20 to 257, the root <svg> is missing aria-hidden and is being
exposed to screen readers (causing redundant announcements); add
aria-hidden="true" to the svg element (or aria-hidden={true} in JSX) so the
inline graphic is hidden from assistive tech, keeping the accessible label on
the parent anchor as the sole announcement.
This adds several delivery services as CTA button presets.