Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AirportIllustration accessibility #4664

Merged
merged 2 commits into from
Mar 12, 2025
Merged

Conversation

sarkaaa
Copy link
Member

@sarkaaa sarkaaa commented Mar 11, 2025

Closes https://kiwicom.atlassian.net/browse/FEPLT-2275

Description by Callstackai

This PR adds an alt attribute to the AirportIllustration component for improved accessibility and updates the README to reflect this change.

Diagrams of code changes
sequenceDiagram
    participant Client
    participant AirportIllustration
    participant IllustrationPrimitive
    participant DOM

    Client->>AirportIllustration: Render with props (name, size, alt)
    Note over AirportIllustration: Default alt="" if not provided
    AirportIllustration->>IllustrationPrimitive: Forward props with alt
    IllustrationPrimitive->>DOM: Render img element with alt attribute
    DOM-->>Client: Display illustration with alt text

Loading
Files Changed
FileSummary
packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsxAdded an alt attribute to the AirportIllustration story.
packages/orbit-components/src/AirportIllustration/README.mdUpdated the README to include the alt attribute in the props table.
packages/orbit-components/src/AirportIllustration/__tests__/index.test.tsxUpdated tests to check for the new alt attribute.
packages/orbit-components/src/AirportIllustration/index.tsxModified the AirportIllustration component to accept and pass the alt prop.

This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions .md. See list of supported languages.

Copy link
Contributor

LLM Analysis of PR Changes

Okay, I will analyze the provided Git diff and provide feedback based on the given information and general best practices for UI component libraries, even though the codebase is missing.

Analysis of Git Diff for Pull Request 4664

1. Summary of the Changes:

The diff introduces a single change: it adds a default alt prop with the value "Airport illustration" to the defaultArgs of the AirportIllustration component's Storybook story.

diff --git a/packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsx b/packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsx
index ec1cedbb8..24c4fe96c 100644
--- a/packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsx
+++ b/packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsx
@@ -18,6 +18,7 @@ const meta: Meta<typeof AirportIllustration> = {
     size: SIZE_OPTIONS.MEDIUM,
     name: "BGYFastTrack",
     spaceAfter: SPACINGS_AFTER.SMALL,
+    alt: "Airport illustration",
   },

   argTypes: {

In essence, this change ensures that the Storybook example of AirportIllustration will render with a default alt attribute on the underlying image or SVG element.

2. Potential Issues or Bugs:

  • Generic alt text: "Airport illustration" is a very generic alt text. While better than no alt text at all, it might not be the most descriptive or helpful for users relying on screen readers. Depending on the variety of "Airport Illustrations" used within the Orbit library, a more specific or contextual default alt might be beneficial. For example, if there are illustrations depicting different airport scenarios (e.g., baggage claim, security, boarding), a more specific default or guidance on overriding the alt prop would be better.
  • Component Prop Existence: The diff only modifies the Storybook story. It assumes that the AirportIllustration component itself is designed to accept and render an alt prop on its underlying image or SVG element. If the AirportIllustration component does not actually accept and utilize an alt prop, then this change in Storybook is effectively useless and potentially misleading. This is the most critical potential issue to verify.
  • Consistency with other illustrations: It's important to check if other illustration components in the Orbit library (if any) also have default alt props in their Storybook stories. Inconsistency could be confusing for developers using the library.

3. Suggestions for Improvements:

  • Verify alt prop in component: The most crucial step is to verify that the AirportIllustration component in packages/orbit-components/src/AirportIllustration/AirportIllustration.tsx (or similar path) actually accepts an alt prop and renders it on the appropriate HTML element. This is essential for the change to have any effect.
  • More descriptive default alt text (Consider): Think about whether "Airport illustration" is sufficiently descriptive as a default. Depending on the context of Orbit and how these illustrations are used, something slightly more informative might be preferable. For example, "Generic airport illustration" or "Illustration depicting an airport". However, "Airport illustration" is a reasonable starting point and better than no alt text.
  • Document the alt prop: Ensure that the AirportIllustration component's documentation (likely in the component's file and potentially in a separate documentation website) clearly documents the alt prop, explaining its purpose for accessibility and providing guidance on when and how to use it.
  • Consider making alt prop more prominent in Storybook: While a default is good, ensure that the Storybook story also showcases how to override the default alt prop and encourage users to provide more context-specific alt text when using the component in real applications. You could add another story example specifically demonstrating the alt prop.
  • Review other illustration components: If Orbit has other illustration components, review them to ensure they also have alt props implemented correctly and consistently, ideally with default values or clear instructions.

4. Security Concerns:

This change in itself does not introduce any security concerns. Adding an alt attribute is related to accessibility and does not typically have security implications. However, ensure that the AirportIllustration component itself, and any underlying image or SVG handling, is not vulnerable to any security issues (e.g., arbitrary SVG injection if the illustration is rendered from user-provided data, which is unlikely in this context but worth a general thought).

5. Code Quality Observations:

  • Positive: The change is small, focused, and addresses an accessibility concern (providing alt text). This is a positive contribution to code quality and user experience.
  • Simplicity: The change is very simple and doesn't add unnecessary complexity.
  • Context is key: The overall code quality impact depends heavily on whether the AirportIllustration component itself is correctly implemented to handle the alt prop. If the component is ready, this is a good quality-of-life improvement. If the component is missing the alt prop functionality, this change is superficial.
  • Consistency: Assuming other components in Orbit follow similar patterns for props and Storybook setup, this change seems consistent.

In summary:

This is a positive, small change that aims to improve the accessibility of the AirportIllustration component in Storybook by adding a default alt prop. The most critical next step is to verify that the AirportIllustration component itself actually utilizes the alt prop. If it does, then the suggestions focus on refining the alt text, documenting it properly, and ensuring consistency across the Orbit library. If the component doesn't handle alt, then this PR is incomplete and needs to be extended to modify the component's implementation itself.

Copy link
Contributor

Copy link
Contributor

github-actions bot commented Mar 11, 2025

Size Change: +13 B (0%)

Total Size: 463 kB

Filename Size Change
packages/orbit-components/lib/AirportIllustration/index.js 354 B +14 B (+4.12%)
packages/orbit-components/lib/icons/ColoredTelegram.js 821 B -1 B (-0.12%)
ℹ️ View Unchanged
Filename Size
packages/orbit-components/lib/Accordion/AccordionContext.js 333 B
packages/orbit-components/lib/Accordion/AccordionSection/components/SectionContent.js 289 B
packages/orbit-components/lib/Accordion/AccordionSection/components/SectionFooter.js 420 B
packages/orbit-components/lib/Accordion/AccordionSection/components/SectionHeader.js 760 B
packages/orbit-components/lib/Accordion/AccordionSection/index.js 819 B
packages/orbit-components/lib/Accordion/index.js 652 B
packages/orbit-components/lib/Alert/AlertButton/consts.js 374 B
packages/orbit-components/lib/Alert/AlertButton/helpers/getAlertButtonBoxShadow.js 576 B
packages/orbit-components/lib/Alert/AlertButton/helpers/getAlertButtonIconForeground.js 267 B
packages/orbit-components/lib/Alert/AlertButton/helpers/getAlertButtonStyles.js 505 B
packages/orbit-components/lib/Alert/AlertButton/helpers/getAlertButtonTypeToken.js 771 B
packages/orbit-components/lib/Alert/AlertButton/index.js 621 B
packages/orbit-components/lib/Alert/consts.js 295 B
packages/orbit-components/lib/Alert/index.js 1.62 kB
packages/orbit-components/lib/Badge/consts.js 268 B
packages/orbit-components/lib/Badge/index.js 695 B
packages/orbit-components/lib/BadgeList/BadgeListItem/index.js 986 B
packages/orbit-components/lib/BadgeList/consts.js 266 B
packages/orbit-components/lib/BadgeList/index.js 337 B
packages/orbit-components/lib/Box/helpers/getBackground.js 220 B
packages/orbit-components/lib/Box/helpers/getBorderRadius.js 212 B
packages/orbit-components/lib/Box/helpers/getColor.js 210 B
packages/orbit-components/lib/Box/helpers/getElevation.js 209 B
packages/orbit-components/lib/Box/helpers/getMargin.js 351 B
packages/orbit-components/lib/Box/helpers/getOverflow.js 207 B
packages/orbit-components/lib/Box/helpers/getPadding.js 355 B
packages/orbit-components/lib/Box/helpers/getPosition.js 206 B
packages/orbit-components/lib/Box/helpers/getTextAlign.js 215 B
packages/orbit-components/lib/Box/helpers/getWrap.js 211 B
packages/orbit-components/lib/Box/helpers/index.js 607 B
packages/orbit-components/lib/Box/helpers/tailwindClasses.js 1.32 kB
packages/orbit-components/lib/Box/index.js 2.02 kB
packages/orbit-components/lib/Breadcrumbs/BreadcrumbsItem/index.js 924 B
packages/orbit-components/lib/Breadcrumbs/index.js 851 B
packages/orbit-components/lib/Button/consts.js 337 B
packages/orbit-components/lib/Button/index.js 1.21 kB
packages/orbit-components/lib/ButtonGroup/index.js 346 B
packages/orbit-components/lib/ButtonLink/consts.js 289 B
packages/orbit-components/lib/ButtonLink/helpers/getButtonLinkCommonProps.js 271 B
packages/orbit-components/lib/ButtonLink/helpers/getButtonLinkIconForeground.js 432 B
packages/orbit-components/lib/ButtonLink/helpers/getButtonLinkStyles.js 474 B
packages/orbit-components/lib/ButtonLink/helpers/getButtonLinkTypeToken.js 388 B
packages/orbit-components/lib/ButtonLink/index.js 918 B
packages/orbit-components/lib/ButtonMobileStore/consts.js 342 B
packages/orbit-components/lib/ButtonMobileStore/index.js 623 B
packages/orbit-components/lib/CallOutBanner/index.js 743 B
packages/orbit-components/lib/Card/CardSection/components/Expandable.js 375 B
packages/orbit-components/lib/Card/CardSection/index.js 1.3 kB
packages/orbit-components/lib/Card/components/Header.js 788 B
packages/orbit-components/lib/Card/index.js 860 B
packages/orbit-components/lib/CarrierLogo/consts.js 343 B
packages/orbit-components/lib/CarrierLogo/index.js 1.28 kB
packages/orbit-components/lib/Checkbox/index.js 1.38 kB
packages/orbit-components/lib/ChoiceGroup/components/Feedback.js 554 B
packages/orbit-components/lib/ChoiceGroup/components/FilterWrapper.js 634 B
packages/orbit-components/lib/ChoiceGroup/consts.js 236 B
packages/orbit-components/lib/ChoiceGroup/index.js 1.11 kB
packages/orbit-components/lib/Collapse/index.js 1.24 kB
packages/orbit-components/lib/common/consts.js 225 B
packages/orbit-components/lib/common/getFieldDataState.js 134 B
packages/orbit-components/lib/common/keyMaps.js 203 B
packages/orbit-components/lib/common/placements.js 431 B
packages/orbit-components/lib/common/tailwind/alignContent.js 563 B
packages/orbit-components/lib/common/tailwind/alignItems.js 536 B
packages/orbit-components/lib/common/tailwind/backgroundColor.js 2.33 kB
packages/orbit-components/lib/common/tailwind/color.js 2.33 kB
packages/orbit-components/lib/common/tailwind/direction.js 510 B
packages/orbit-components/lib/common/tailwind/display.js 648 B
packages/orbit-components/lib/common/tailwind/grow.js 405 B
packages/orbit-components/lib/common/tailwind/index.js 530 B
packages/orbit-components/lib/common/tailwind/justify.js 544 B
packages/orbit-components/lib/common/tailwind/margin.js 2.06 kB
packages/orbit-components/lib/common/tailwind/padding.js 1.71 kB
packages/orbit-components/lib/common/tailwind/shrink.js 418 B
packages/orbit-components/lib/common/tailwind/spaceAfter.js 506 B
packages/orbit-components/lib/common/tailwind/spacing.js 1.7 kB
packages/orbit-components/lib/common/tailwind/textAlign.js 506 B
packages/orbit-components/lib/common/tailwind/wrap.js 414 B
packages/orbit-components/lib/CountryFlag/consts.js 1.5 kB
packages/orbit-components/lib/CountryFlag/index.js 847 B
packages/orbit-components/lib/Coupon/index.js 374 B
packages/orbit-components/lib/defaultTheme.js 211 B
packages/orbit-components/lib/Dialog/index.js 1.53 kB
packages/orbit-components/lib/Drawer/components/DrawerClose.js 376 B
packages/orbit-components/lib/Drawer/consts.js 181 B
packages/orbit-components/lib/Drawer/index.js 1.63 kB
packages/orbit-components/lib/ErrorFormTooltip/hooks/useErrorTooltip.js 318 B
packages/orbit-components/lib/ErrorFormTooltip/index.js 407 B
packages/orbit-components/lib/ErrorFormTooltip/Tooltip/index.js 1.62 kB
packages/orbit-components/lib/FeatureIcon/consts.js 236 B
packages/orbit-components/lib/FeatureIcon/index.js 543 B
packages/orbit-components/lib/FormLabel/index.js 650 B
packages/orbit-components/lib/fromPlainObject.js 147 B
packages/orbit-components/lib/getTokens.js 144 B
packages/orbit-components/lib/Heading/consts.js 423 B
packages/orbit-components/lib/Heading/index.js 829 B
packages/orbit-components/lib/Heading/twClasses.js 834 B
packages/orbit-components/lib/Hide/index.js 379 B
packages/orbit-components/lib/hooks/useBoundingRect/index.js 427 B
packages/orbit-components/lib/hooks/useClickOutside/index.js 331 B
packages/orbit-components/lib/hooks/useEventListener/index.js 525 B
packages/orbit-components/lib/hooks/useFocusTrap/consts.js 215 B
packages/orbit-components/lib/hooks/useFocusTrap/index.js 648 B
packages/orbit-components/lib/hooks/useIntersect/index.js 424 B
packages/orbit-components/lib/hooks/useInterval/index.js 276 B
packages/orbit-components/lib/hooks/useIsMounted/index.js 269 B
packages/orbit-components/lib/hooks/useIsMountedRef/index.js 210 B
packages/orbit-components/lib/hooks/useLockScrolling/index.js 557 B
packages/orbit-components/lib/hooks/useLockScrolling/lock-scrolling.js 2.31 kB
packages/orbit-components/lib/hooks/useMediaQuery/index.js 951 B
packages/orbit-components/lib/hooks/usePrevious/index.js 257 B
packages/orbit-components/lib/hooks/useRandomId/index.js 239 B
packages/orbit-components/lib/hooks/useStateWithCallback/index.js 262 B
packages/orbit-components/lib/hooks/useStateWithTimeout/index.js 356 B
packages/orbit-components/lib/hooks/useTheme/index.js 240 B
packages/orbit-components/lib/hooks/useToggle/index.js 266 B
packages/orbit-components/lib/HorizontalScroll/helpers.js 199 B
packages/orbit-components/lib/HorizontalScroll/index.js 1.7 kB
packages/orbit-components/lib/HorizontalScroll/useScroll.js 1.01 kB
packages/orbit-components/lib/Icon/consts.js 307 B
packages/orbit-components/lib/Icon/createIcon.js 349 B
packages/orbit-components/lib/Icon/helpers/whiteListProps.js 252 B
packages/orbit-components/lib/Icon/IconList.js 670 B
packages/orbit-components/lib/Icon/index.js 856 B
packages/orbit-components/lib/icons/Accommodation.js 509 B
packages/orbit-components/lib/icons/AccountCircle.js 608 B
packages/orbit-components/lib/icons/Admin.js 804 B
packages/orbit-components/lib/icons/Ai.js 646 B
packages/orbit-components/lib/icons/AirConditioning.js 1.01 kB
packages/orbit-components/lib/icons/Airplane.js 781 B
packages/orbit-components/lib/icons/AirplaneDown.js 661 B
packages/orbit-components/lib/icons/AirplaneLanding.js 826 B
packages/orbit-components/lib/icons/AirplaneLandingLight.js 770 B
packages/orbit-components/lib/icons/AirplaneReturn.js 788 B
packages/orbit-components/lib/icons/AirplaneTakeoff.js 851 B
packages/orbit-components/lib/icons/AirplaneTakeoffLight.js 781 B
packages/orbit-components/lib/icons/AirplaneUp.js 664 B
packages/orbit-components/lib/icons/AirplaneUpOff.js 751 B
packages/orbit-components/lib/icons/AirportSecurity.js 615 B
packages/orbit-components/lib/icons/Alert.js 508 B
packages/orbit-components/lib/icons/AlertCircle.js 444 B
packages/orbit-components/lib/icons/AlertOctagon.js 413 B
packages/orbit-components/lib/icons/All.js 659 B
packages/orbit-components/lib/icons/AmbulanceLight.js 833 B
packages/orbit-components/lib/icons/Android.js 610 B
packages/orbit-components/lib/icons/Anywhere.js 920 B
packages/orbit-components/lib/icons/Apple.js 602 B
packages/orbit-components/lib/icons/AppNotification.js 787 B
packages/orbit-components/lib/icons/ArrowBack.js 388 B
packages/orbit-components/lib/icons/ArrowDown.js 465 B
packages/orbit-components/lib/icons/ArrowUp.js 450 B
packages/orbit-components/lib/icons/Atm.js 754 B
packages/orbit-components/lib/icons/Attachment.js 547 B
packages/orbit-components/lib/icons/BaggageCabin.js 675 B
packages/orbit-components/lib/icons/BaggageCabinLight.js 507 B
packages/orbit-components/lib/icons/BaggageCabinNone.js 744 B
packages/orbit-components/lib/icons/BaggageCabinNoneLight.js 649 B
packages/orbit-components/lib/icons/BaggageChecked10.js 633 B
packages/orbit-components/lib/icons/BaggageChecked10Light.js 533 B
packages/orbit-components/lib/icons/BaggageChecked10NoneLight.js 665 B
packages/orbit-components/lib/icons/BaggageChecked20.js 628 B
packages/orbit-components/lib/icons/BaggageChecked20Light.js 527 B
packages/orbit-components/lib/icons/BaggageChecked20NoneLight.js 677 B
packages/orbit-components/lib/icons/BaggageChecked30.js 645 B
packages/orbit-components/lib/icons/BaggageChecked30Light.js 540 B
packages/orbit-components/lib/icons/BaggageCheckedNone.js 754 B
packages/orbit-components/lib/icons/BaggageCheckedNoneLight.js 719 B
packages/orbit-components/lib/icons/BaggagePersonal.js 940 B
packages/orbit-components/lib/icons/BaggagePersonalLight.js 508 B
packages/orbit-components/lib/icons/BaggagePersonalNone.js 981 B
packages/orbit-components/lib/icons/BaggagePersonalNoneLight.js 646 B
packages/orbit-components/lib/icons/BaggageRecheck.js 593 B
packages/orbit-components/lib/icons/BaggageSet.js 799 B
packages/orbit-components/lib/icons/BaggageSetLight.js 661 B
packages/orbit-components/lib/icons/BaggageStorage.js 752 B
packages/orbit-components/lib/icons/Bank.js 602 B
packages/orbit-components/lib/icons/BillingDetails.js 666 B
packages/orbit-components/lib/icons/BoardingGate.js 781 B
packages/orbit-components/lib/icons/Boat.js 951 B
packages/orbit-components/lib/icons/Bookmark.js 476 B
packages/orbit-components/lib/icons/Bug.js 876 B
packages/orbit-components/lib/icons/Bus.js 715 B
packages/orbit-components/lib/icons/Cake.js 827 B
packages/orbit-components/lib/icons/Calendar.js 569 B
packages/orbit-components/lib/icons/CalendarAnytime.js 632 B
packages/orbit-components/lib/icons/CalendarDuration.js 626 B
packages/orbit-components/lib/icons/CalendarLight.js 667 B
packages/orbit-components/lib/icons/CalendarRange.js 618 B
packages/orbit-components/lib/icons/CalendarTripLength.js 663 B
packages/orbit-components/lib/icons/Camera.js 633 B
packages/orbit-components/lib/icons/Car.js 736 B
packages/orbit-components/lib/icons/CarDoor.js 478 B
packages/orbit-components/lib/icons/CareKiwiCom.js 546 B
packages/orbit-components/lib/icons/CarRental.js 1.03 kB
packages/orbit-components/lib/icons/Chart.js 539 B
packages/orbit-components/lib/icons/Chat.js 471 B
packages/orbit-components/lib/icons/Check.js 399 B
packages/orbit-components/lib/icons/CheckCircle.js 433 B
packages/orbit-components/lib/icons/ChevronBackward.js 421 B
packages/orbit-components/lib/icons/ChevronDoubleBackward.js 445 B
packages/orbit-components/lib/icons/ChevronDoubleForward.js 434 B
packages/orbit-components/lib/icons/ChevronDown.js 413 B
packages/orbit-components/lib/icons/ChevronForward.js 428 B
packages/orbit-components/lib/icons/ChevronUp.js 418 B
packages/orbit-components/lib/icons/Child.js 784 B
packages/orbit-components/lib/icons/ChildFriendly.js 670 B
packages/orbit-components/lib/icons/Circle.js 334 B
packages/orbit-components/lib/icons/CircleEmpty.js 397 B
packages/orbit-components/lib/icons/CircleFilled.js 432 B
packages/orbit-components/lib/icons/CircleSmall.js 343 B
packages/orbit-components/lib/icons/CircleSmallEmpty.js 369 B
packages/orbit-components/lib/icons/City.js 582 B
packages/orbit-components/lib/icons/Clock.js 464 B
packages/orbit-components/lib/icons/Close.js 446 B
packages/orbit-components/lib/icons/CloseCircle.js 487 B
packages/orbit-components/lib/icons/Cocktail.js 715 B
packages/orbit-components/lib/icons/Code.js 496 B
packages/orbit-components/lib/icons/CodeKiwi.js 430 B
packages/orbit-components/lib/icons/Coffee.js 521 B
packages/orbit-components/lib/icons/ColoredFacebook.js 626 B
packages/orbit-components/lib/icons/ColoredImessage.js 694 B
packages/orbit-components/lib/icons/ColoredMessenger.js 786 B
packages/orbit-components/lib/icons/ColoredSignal.js 1.05 kB
packages/orbit-components/lib/icons/ColoredViber.js 1.36 kB
packages/orbit-components/lib/icons/ColoredWhatsapp.js 858 B
packages/orbit-components/lib/icons/ColorPicker.js 586 B
packages/orbit-components/lib/icons/Compare.js 677 B
packages/orbit-components/lib/icons/Compass.js 479 B
packages/orbit-components/lib/icons/ContactEmail.js 864 B
packages/orbit-components/lib/icons/Copy.js 536 B
packages/orbit-components/lib/icons/CreditCard.js 497 B
packages/orbit-components/lib/icons/CustomerSupport.js 625 B
packages/orbit-components/lib/icons/Dashboard.js 702 B
packages/orbit-components/lib/icons/Deals.js 464 B
packages/orbit-components/lib/icons/DealsV2.js 633 B
packages/orbit-components/lib/icons/DeviceDesktop.js 507 B
packages/orbit-components/lib/icons/DeviceMobile.js 413 B
packages/orbit-components/lib/icons/Diamond.js 619 B
packages/orbit-components/lib/icons/DiscountLight.js 479 B
packages/orbit-components/lib/icons/Document.js 581 B
packages/orbit-components/lib/icons/Download.js 514 B
packages/orbit-components/lib/icons/Duplicate.js 668 B
packages/orbit-components/lib/icons/Edit.js 478 B
packages/orbit-components/lib/icons/EditOff.js 557 B
packages/orbit-components/lib/icons/Email.js 596 B
packages/orbit-components/lib/icons/Entertainment.js 520 B
packages/orbit-components/lib/icons/Exchange.js 1.01 kB
packages/orbit-components/lib/icons/Facebook.js 495 B
packages/orbit-components/lib/icons/FamilyAll.js 669 B
packages/orbit-components/lib/icons/FamilyHalf.js 704 B
packages/orbit-components/lib/icons/Feedback.js 475 B
packages/orbit-components/lib/icons/Filters.js 599 B
packages/orbit-components/lib/icons/Flash.js 478 B
packages/orbit-components/lib/icons/FlightDirect.js 451 B
packages/orbit-components/lib/icons/FlightMulticity.js 508 B
packages/orbit-components/lib/icons/FlightNomad.js 692 B
packages/orbit-components/lib/icons/FlightReturn.js 581 B
packages/orbit-components/lib/icons/FlightServices.js 682 B
packages/orbit-components/lib/icons/Fuel.js 659 B
packages/orbit-components/lib/icons/FullScreen.js 619 B
packages/orbit-components/lib/icons/FullScreenOff.js 661 B
packages/orbit-components/lib/icons/Gallery.js 695 B
packages/orbit-components/lib/icons/GenderMan.js 1.06 kB
packages/orbit-components/lib/icons/GenderWoman.js 1.21 kB
packages/orbit-components/lib/icons/Github.js 682 B
packages/orbit-components/lib/icons/Google.js 663 B
packages/orbit-components/lib/icons/GooglePlay.js 492 B
packages/orbit-components/lib/icons/GpsFixed.js 513 B
packages/orbit-components/lib/icons/GpsIos.js 419 B
packages/orbit-components/lib/icons/GpsNotFixed.js 491 B
packages/orbit-components/lib/icons/GpsOff.js 824 B
packages/orbit-components/lib/icons/Grid.js 570 B
packages/orbit-components/lib/icons/Guarantee.js 654 B
packages/orbit-components/lib/icons/Gym.js 544 B
packages/orbit-components/lib/icons/Heart.js 476 B
packages/orbit-components/lib/icons/HeartOutline.js 610 B
packages/orbit-components/lib/icons/History.js 522 B
packages/orbit-components/lib/icons/HospitalSignLight.js 427 B
packages/orbit-components/lib/icons/Inbox.js 415 B
packages/orbit-components/lib/icons/index.js 6.01 kB
packages/orbit-components/lib/icons/Infant.js 1.19 kB
packages/orbit-components/lib/icons/InformationCircle.js 529 B
packages/orbit-components/lib/icons/InformationCircleLight.js 474 B
packages/orbit-components/lib/icons/Instagram.js 1.02 kB
packages/orbit-components/lib/icons/Insurance.js 452 B
packages/orbit-components/lib/icons/InsuranceConfirmed.js 539 B
packages/orbit-components/lib/icons/InsuranceOff.js 507 B
packages/orbit-components/lib/icons/Invoice.js 691 B
packages/orbit-components/lib/icons/ItemCompleted.js 541 B
packages/orbit-components/lib/icons/Kiwicom.js 888 B
packages/orbit-components/lib/icons/KiwiComGuarantee.js 560 B
packages/orbit-components/lib/icons/LegalExpertsLight.js 1.11 kB
packages/orbit-components/lib/icons/Leisure.js 1.07 kB
packages/orbit-components/lib/icons/Link.js 629 B
packages/orbit-components/lib/icons/Linkedin.js 542 B
packages/orbit-components/lib/icons/List.js 381 B
packages/orbit-components/lib/icons/Location.js 419 B
packages/orbit-components/lib/icons/LocationA.js 587 B
packages/orbit-components/lib/icons/LocationAdd.js 497 B
packages/orbit-components/lib/icons/LocationB.js 608 B
packages/orbit-components/lib/icons/LocationC.js 569 B
packages/orbit-components/lib/icons/LocationD.js 542 B
packages/orbit-components/lib/icons/LocationE.js 524 B
packages/orbit-components/lib/icons/LocationF.js 560 B
packages/orbit-components/lib/icons/LocationG.js 616 B
packages/orbit-components/lib/icons/LocationH.js 502 B
packages/orbit-components/lib/icons/LocationI.js 436 B
packages/orbit-components/lib/icons/LocationJ.js 511 B
packages/orbit-components/lib/icons/Lock.js 467 B
packages/orbit-components/lib/icons/LockOpen.js 576 B
packages/orbit-components/lib/icons/Logout.js 602 B
packages/orbit-components/lib/icons/Lounge.js 597 B
packages/orbit-components/lib/icons/Map.js 637 B
packages/orbit-components/lib/icons/Markdown.js 539 B
packages/orbit-components/lib/icons/Meal.js 793 B
packages/orbit-components/lib/icons/MealLight.js 620 B
packages/orbit-components/lib/icons/MedicalInsuranceLight.js 953 B
packages/orbit-components/lib/icons/MedicalProtectionLight.js 694 B
packages/orbit-components/lib/icons/MenuCircle.js 437 B
packages/orbit-components/lib/icons/MenuHamburger.js 449 B
packages/orbit-components/lib/icons/MenuKebab.js 350 B
packages/orbit-components/lib/icons/MenuMeatballs.js 354 B
packages/orbit-components/lib/icons/Messages.js 547 B
packages/orbit-components/lib/icons/MessagesOutline.js 604 B
packages/orbit-components/lib/icons/Minus.js 334 B
packages/orbit-components/lib/icons/MinusCircle.js 371 B
packages/orbit-components/lib/icons/Money.js 593 B
packages/orbit-components/lib/icons/MoneyTransferIn.js 608 B
packages/orbit-components/lib/icons/MoneyTransferOut.js 606 B
packages/orbit-components/lib/icons/Moon.js 450 B
packages/orbit-components/lib/icons/MusicalInstruments.js 871 B
packages/orbit-components/lib/icons/NewWindow.js 559 B
packages/orbit-components/lib/icons/NoFlash.js 547 B
packages/orbit-components/lib/icons/NoGuarantee.js 650 B
packages/orbit-components/lib/icons/Nonstop.js 657 B
packages/orbit-components/lib/icons/NoRefund.js 946 B
packages/orbit-components/lib/icons/NoRescheduling.js 619 B
packages/orbit-components/lib/icons/Notification.js 462 B
packages/orbit-components/lib/icons/NotificationAdd.js 646 B
packages/orbit-components/lib/icons/NotificationOff.js 567 B
packages/orbit-components/lib/icons/NotificationOn.js 670 B
packages/orbit-components/lib/icons/NoWifiLight.js 674 B
packages/orbit-components/lib/icons/OnlineCheckin.js 523 B
packages/orbit-components/lib/icons/OnlineCheckinOff.js 582 B
packages/orbit-components/lib/icons/Outlook.js 701 B
packages/orbit-components/lib/icons/Paid.js 617 B
packages/orbit-components/lib/icons/Parking.js 440 B
packages/orbit-components/lib/icons/Partners.js 1.69 kB
packages/orbit-components/lib/icons/Passenger.js 503 B
packages/orbit-components/lib/icons/PassengerAdd.js 697 B
packages/orbit-components/lib/icons/PassengerOutline.js 725 B
packages/orbit-components/lib/icons/PassengerRemove.js 642 B
packages/orbit-components/lib/icons/Passengers.js 711 B
packages/orbit-components/lib/icons/Passport.js 855 B
packages/orbit-components/lib/icons/Pet.js 484 B
packages/orbit-components/lib/icons/Pharmacy.js 526 B
packages/orbit-components/lib/icons/Phone.js 437 B
packages/orbit-components/lib/icons/PhoneUpdatesLight.js 591 B
packages/orbit-components/lib/icons/Pin.js 499 B
packages/orbit-components/lib/icons/PinOutline.js 631 B
packages/orbit-components/lib/icons/Placeholder.js 333 B
packages/orbit-components/lib/icons/Play.js 418 B
packages/orbit-components/lib/icons/Playground.js 680 B
packages/orbit-components/lib/icons/Plus.js 430 B
packages/orbit-components/lib/icons/PlusCircle.js 467 B
packages/orbit-components/lib/icons/PlusMinus.js 384 B
packages/orbit-components/lib/icons/Pool.js 724 B
packages/orbit-components/lib/icons/PowerPlug.js 675 B
packages/orbit-components/lib/icons/PowerPlugOff.js 806 B
packages/orbit-components/lib/icons/PriceChange.js 699 B
packages/orbit-components/lib/icons/PriorityBoarding.js 600 B
packages/orbit-components/lib/icons/PriorityBoardingLight.js 511 B
packages/orbit-components/lib/icons/Profit.js 690 B
packages/orbit-components/lib/icons/PromoCode.js 512 B
packages/orbit-components/lib/icons/QrCode.js 875 B
packages/orbit-components/lib/icons/QuestionCircle.js 512 B
packages/orbit-components/lib/icons/Radar.js 554 B
packages/orbit-components/lib/icons/RadiusSearch.js 699 B
packages/orbit-components/lib/icons/RebookingLight.js 689 B
packages/orbit-components/lib/icons/RebookingNoneLight.js 760 B
packages/orbit-components/lib/icons/Refund.js 665 B
packages/orbit-components/lib/icons/RefundLight.js 567 B
packages/orbit-components/lib/icons/RefundNoneLight.js 724 B
packages/orbit-components/lib/icons/Relax.js 702 B
packages/orbit-components/lib/icons/Reload.js 578 B
packages/orbit-components/lib/icons/Remove.js 563 B
packages/orbit-components/lib/icons/Replace.js 608 B
packages/orbit-components/lib/icons/Restaurant.js 515 B
packages/orbit-components/lib/icons/RouteNoStops.js 433 B
packages/orbit-components/lib/icons/RouteOneStop.js 451 B
packages/orbit-components/lib/icons/RouteTwoStops.js 475 B
packages/orbit-components/lib/icons/Ryanair.js 1.27 kB
packages/orbit-components/lib/icons/Search.js 393 B
packages/orbit-components/lib/icons/Seat.js 606 B
packages/orbit-components/lib/icons/SeatAisle.js 646 B
packages/orbit-components/lib/icons/SeatAisleLight.js 991 B
packages/orbit-components/lib/icons/SeatDefaultLight.js 836 B
packages/orbit-components/lib/icons/SeatExtraLegroom.js 659 B
packages/orbit-components/lib/icons/SeatLight.js 691 B
packages/orbit-components/lib/icons/SeatWindow.js 696 B
packages/orbit-components/lib/icons/SeatWindowLight.js 955 B
packages/orbit-components/lib/icons/Security.js 531 B
packages/orbit-components/lib/icons/SelfTransfer.js 893 B
packages/orbit-components/lib/icons/Send.js 458 B
packages/orbit-components/lib/icons/Settings.js 652 B
packages/orbit-components/lib/icons/Share.js 514 B
packages/orbit-components/lib/icons/ShareAndroid.js 512 B
packages/orbit-components/lib/icons/ShareAndroidOutline.js 613 B
packages/orbit-components/lib/icons/ShareIos.js 566 B
packages/orbit-components/lib/icons/ShieldCheckLight.js 551 B
packages/orbit-components/lib/icons/Shopping.js 624 B
packages/orbit-components/lib/icons/ShowLess.js 487 B
packages/orbit-components/lib/icons/ShowMore.js 488 B
packages/orbit-components/lib/icons/Sightseeing.js 568 B
packages/orbit-components/lib/icons/Sign.js 569 B
packages/orbit-components/lib/icons/Smoking.js 595 B
packages/orbit-components/lib/icons/SmokingOff.js 690 B
packages/orbit-components/lib/icons/Sms.js 1 kB
packages/orbit-components/lib/icons/Sort.js 518 B
packages/orbit-components/lib/icons/Sort2.js 492 B
packages/orbit-components/lib/icons/Spa.js 960 B
packages/orbit-components/lib/icons/SportEquipment.js 825 B
packages/orbit-components/lib/icons/Sports.js 687 B
packages/orbit-components/lib/icons/Stackoverflow.js 764 B
packages/orbit-components/lib/icons/StarEmpty.js 595 B
packages/orbit-components/lib/icons/StarFull.js 493 B
packages/orbit-components/lib/icons/Subway.js 848 B
packages/orbit-components/lib/icons/Suitcase.js 532 B
packages/orbit-components/lib/icons/Sun.js 617 B
packages/orbit-components/lib/icons/Sunrise.js 556 B
packages/orbit-components/lib/icons/Taxi.js 883 B
packages/orbit-components/lib/icons/Terminal.js 854 B
packages/orbit-components/lib/icons/TermsAndConditions.js 884 B
packages/orbit-components/lib/icons/ThumbDown.js 608 B
packages/orbit-components/lib/icons/ThumbUp.js 621 B
packages/orbit-components/lib/icons/Ticket.js 525 B
packages/orbit-components/lib/icons/TicketOutline.js 739 B
packages/orbit-components/lib/icons/Tiktok.js 498 B
packages/orbit-components/lib/icons/Timelapse.js 448 B
packages/orbit-components/lib/icons/Timer.js 651 B
packages/orbit-components/lib/icons/Tips.js 701 B
packages/orbit-components/lib/icons/Toilets.js 755 B
packages/orbit-components/lib/icons/Train.js 777 B
packages/orbit-components/lib/icons/Transmission.js 482 B
packages/orbit-components/lib/icons/Trip.js 717 B
packages/orbit-components/lib/icons/TripUpdatesLight.js 567 B
packages/orbit-components/lib/icons/Uber.js 477 B
packages/orbit-components/lib/icons/Upload.js 512 B
packages/orbit-components/lib/icons/UserGroup.js 883 B
packages/orbit-components/lib/icons/UserMultipleLight.js 549 B
packages/orbit-components/lib/icons/UserSingleLight.js 438 B
packages/orbit-components/lib/icons/Visa.js 577 B
packages/orbit-components/lib/icons/Visibility.js 674 B
packages/orbit-components/lib/icons/VisibilityOff.js 846 B
packages/orbit-components/lib/icons/Walk.js 620 B
packages/orbit-components/lib/icons/Wallet.js 575 B
packages/orbit-components/lib/icons/Wheelchair.js 659 B
packages/orbit-components/lib/icons/Wifi.js 608 B
packages/orbit-components/lib/icons/WifiLight.js 476 B
packages/orbit-components/lib/icons/WifiOff.js 761 B
packages/orbit-components/lib/icons/X.js 424 B
packages/orbit-components/lib/icons/Youtube.js 465 B
packages/orbit-components/lib/Illustration/index.js 335 B
packages/orbit-components/lib/index.js 2.49 kB
packages/orbit-components/lib/Inline/consts.js 242 B
packages/orbit-components/lib/Inline/helpers.js 900 B
packages/orbit-components/lib/Inline/index.js 731 B
packages/orbit-components/lib/InputField/consts.js 383 B
packages/orbit-components/lib/InputField/index.js 2.77 kB
packages/orbit-components/lib/InputField/InputTags/index.js 671 B
packages/orbit-components/lib/InputFile/index.js 1.72 kB
packages/orbit-components/lib/InputGroup/consts.js 160 B
packages/orbit-components/lib/InputGroup/index.js 1.98 kB
packages/orbit-components/lib/InputSelect/helpers.js 400 B
packages/orbit-components/lib/InputSelect/index.js 3.56 kB
packages/orbit-components/lib/InputSelect/InputSelectOption/index.js 503 B
packages/orbit-components/lib/Itinerary/context.js 445 B
packages/orbit-components/lib/Itinerary/index.js 524 B
packages/orbit-components/lib/Itinerary/ItineraryBadgeList/index.js 561 B
packages/orbit-components/lib/Itinerary/ItineraryBadgeList/ItineraryBadgeListItem.js 594 B
packages/orbit-components/lib/Itinerary/ItinerarySegment/context.js 449 B
packages/orbit-components/lib/Itinerary/ItinerarySegment/index.js 1.01 kB
packages/orbit-components/lib/Itinerary/ItinerarySegment/ItineraryIcon.js 909 B
packages/orbit-components/lib/Itinerary/ItinerarySegment/ItinerarySegmentBanner/index.js 684 B
packages/orbit-components/lib/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.js 1.68 kB
packages/orbit-components/lib/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.js 1.21 kB
packages/orbit-components/lib/Itinerary/ItinerarySeparator/Divider.js 1.27 kB
packages/orbit-components/lib/Itinerary/ItinerarySeparator/index.js 549 B
packages/orbit-components/lib/Itinerary/ItineraryStatus/consts.js 211 B
packages/orbit-components/lib/Itinerary/ItineraryStatus/index.js 1.23 kB
packages/orbit-components/lib/Itinerary/ItineraryText/index.js 696 B
packages/orbit-components/lib/Layout/consts.js 462 B
packages/orbit-components/lib/Layout/index.js 591 B
packages/orbit-components/lib/Layout/LayoutColumn/index.js 467 B
packages/orbit-components/lib/LinkList/index.js 605 B
packages/orbit-components/lib/List/consts.js 237 B
packages/orbit-components/lib/List/index.js 658 B
packages/orbit-components/lib/List/ListItem/index.js 494 B
packages/orbit-components/lib/ListChoice/index.js 982 B
packages/orbit-components/lib/Loading/consts.js 236 B
packages/orbit-components/lib/Loading/index.js 1.29 kB
packages/orbit-components/lib/Modal/consts.js 245 B
packages/orbit-components/lib/Modal/helpers/useModalContextFunctions.js 220 B
packages/orbit-components/lib/Modal/index.js 4.32 kB
packages/orbit-components/lib/Modal/ModalCloseButton/index.js 357 B
packages/orbit-components/lib/Modal/ModalContext.js 464 B
packages/orbit-components/lib/Modal/ModalFooter/index.js 1.1 kB
packages/orbit-components/lib/Modal/ModalHeader/index.js 1.15 kB
packages/orbit-components/lib/Modal/ModalSection/index.js 834 B
packages/orbit-components/lib/NavigationBar/index.js 1.27 kB
packages/orbit-components/lib/NotificationBadge/index.js 393 B
packages/orbit-components/lib/OrbitProvider/index.js 870 B
packages/orbit-components/lib/OrbitProvider/QueryContext/index.js 306 B
packages/orbit-components/lib/OrbitProvider/QueryContext/Provider.js 317 B
packages/orbit-components/lib/OrbitProvider/RandomId/Provider.js 365 B
packages/orbit-components/lib/OrbitProvider/ThemeProvider/Provider.js 307 B
packages/orbit-components/lib/Pagination/components/ActiveButton.js 390 B
packages/orbit-components/lib/Pagination/components/CompactPages.js 518 B
packages/orbit-components/lib/Pagination/components/PageButtonLink.js 310 B
packages/orbit-components/lib/Pagination/components/Pages.js 412 B
packages/orbit-components/lib/Pagination/consts.js 190 B
packages/orbit-components/lib/Pagination/index.js 945 B
packages/orbit-components/lib/Popover/components/ContentWrapper.js 2.23 kB
packages/orbit-components/lib/Popover/consts.js 107 B
packages/orbit-components/lib/Popover/index.js 1.44 kB
packages/orbit-components/lib/Portal/index.js 467 B
packages/orbit-components/lib/primitives/BadgePrimitive/index.js 658 B
packages/orbit-components/lib/primitives/ButtonPrimitive/common/consts.js 399 B
packages/orbit-components/lib/primitives/ButtonPrimitive/common/createRel.js 262 B
packages/orbit-components/lib/primitives/ButtonPrimitive/common/getCommonProps.js 504 B
packages/orbit-components/lib/primitives/ButtonPrimitive/common/getIconContainer.js 504 B
packages/orbit-components/lib/primitives/ButtonPrimitive/common/getPadding.js 483 B
packages/orbit-components/lib/primitives/ButtonPrimitive/common/getSizeToken.js 373 B
packages/orbit-components/lib/primitives/ButtonPrimitive/index.js 2.25 kB
packages/orbit-components/lib/primitives/ButtonPrimitive/sizes.js 317 B
packages/orbit-components/lib/primitives/IllustrationPrimitive/IllustrationPrimitiveList.js 491 B
packages/orbit-components/lib/primitives/IllustrationPrimitive/index.js 970 B
packages/orbit-components/lib/primitives/MobileDialogPrimitive/components/DialogContent.js 1.12 kB
packages/orbit-components/lib/primitives/MobileDialogPrimitive/index.js 851 B
packages/orbit-components/lib/primitives/TooltipPrimitive/components/TooltipContent.js 1.72 kB
packages/orbit-components/lib/primitives/TooltipPrimitive/components/TooltipWrapper.js 502 B
packages/orbit-components/lib/primitives/TooltipPrimitive/index.js 1.11 kB
packages/orbit-components/lib/Radio/index.js 1.16 kB
packages/orbit-components/lib/Seat/components/primitives/Edge.js 378 B
packages/orbit-components/lib/Seat/components/primitives/SymbolUnavailable.js 269 B
packages/orbit-components/lib/Seat/components/primitives/Text.js 463 B
packages/orbit-components/lib/Seat/components/primitives/TransitionPathFill.js 540 B
packages/orbit-components/lib/Seat/components/primitives/TransitionPathStroke.js 521 B
packages/orbit-components/lib/Seat/components/SeatCircle.js 4.47 kB
packages/orbit-components/lib/Seat/components/SeatLegend/index.js 661 B
packages/orbit-components/lib/Seat/components/SeatNormal.js 936 B
packages/orbit-components/lib/Seat/components/SeatSmall.js 937 B
packages/orbit-components/lib/Seat/consts.js 257 B
packages/orbit-components/lib/Seat/index.js 1.01 kB
packages/orbit-components/lib/SegmentedSwitch/index.js 943 B
packages/orbit-components/lib/SegmentedSwitch/SwitchSegment/index.js 898 B
packages/orbit-components/lib/Select/index.js 2.07 kB
packages/orbit-components/lib/Separator/index.js 999 B
packages/orbit-components/lib/ServiceLogo/consts.js 809 B
packages/orbit-components/lib/ServiceLogo/index.js 647 B
packages/orbit-components/lib/Skeleton/index.js 310 B
packages/orbit-components/lib/Skeleton/presets/Button.js 364 B
packages/orbit-components/lib/Skeleton/presets/Card.js 346 B
packages/orbit-components/lib/Skeleton/presets/Image.js 366 B
packages/orbit-components/lib/Skeleton/presets/index.js 210 B
packages/orbit-components/lib/Skeleton/presets/List.js 385 B
packages/orbit-components/lib/Skeleton/presets/Text.js 377 B
packages/orbit-components/lib/Skeleton/Svg.js 1.12 kB
packages/orbit-components/lib/SkipLink/index.js 614 B
packages/orbit-components/lib/SkipNavigation/index.js 1.13 kB
packages/orbit-components/lib/Slider/components/Bar/index.js 786 B
packages/orbit-components/lib/Slider/components/Handle/index.js 1.09 kB
packages/orbit-components/lib/Slider/components/Histogram/index.js 774 B
packages/orbit-components/lib/Slider/consts.js 207 B
packages/orbit-components/lib/Slider/index.js 2.67 kB
packages/orbit-components/lib/Slider/utils/calculateCountOf.js 294 B
packages/orbit-components/lib/Slider/utils/index.js 1.38 kB
packages/orbit-components/lib/SmartPassIllustrations/illustrations/IllustrationWrapper.js 597 B
packages/orbit-components/lib/SmartPassIllustrations/illustrations/SmartPassV1.js 4.62 kB
packages/orbit-components/lib/SmartPassIllustrations/illustrations/SmartPassV2.js 4.51 kB
packages/orbit-components/lib/SmartPassIllustrations/illustrations/SmartPassV3.js 3.37 kB
packages/orbit-components/lib/SmartPassIllustrations/illustrations/SmartPassV4.js 2.64 kB
packages/orbit-components/lib/SmartPassIllustrations/illustrations/SmartPassV5.js 2.96 kB
packages/orbit-components/lib/SmartPassIllustrations/index.js 238 B
packages/orbit-components/lib/SocialButton/consts.js 330 B
packages/orbit-components/lib/SocialButton/helpers/getSocialButtonBoxShadow.js 558 B
packages/orbit-components/lib/SocialButton/helpers/getSocialButtonIcon.js 395 B
packages/orbit-components/lib/SocialButton/helpers/getSocialButtonIconForeground.js 268 B
packages/orbit-components/lib/SocialButton/helpers/getSocialButtonStyles.js 501 B
packages/orbit-components/lib/SocialButton/helpers/getSocialButtonTypeToken.js 557 B
packages/orbit-components/lib/SocialButton/index.js 717 B
packages/orbit-components/lib/Stack/index.js 1.55 kB
packages/orbit-components/lib/Stepper/index.js 742 B
packages/orbit-components/lib/Stepper/StepperStateless/index.js 1.36 kB
packages/orbit-components/lib/StopoverArrow/consts.js 186 B
packages/orbit-components/lib/StopoverArrow/index.js 1.22 kB
packages/orbit-components/lib/Switch/index.js 949 B
packages/orbit-components/lib/Table/consts.js 214 B
packages/orbit-components/lib/Table/index.js 1.3 kB
packages/orbit-components/lib/Table/TableBody/index.js 294 B
packages/orbit-components/lib/Table/TableCell/consts.js 396 B
packages/orbit-components/lib/Table/TableCell/index.js 651 B
packages/orbit-components/lib/Table/TableFooter/index.js 295 B
packages/orbit-components/lib/Table/TableHead/index.js 299 B
packages/orbit-components/lib/Table/TableRow/index.js 283 B
packages/orbit-components/lib/Tabs/components/Tab/consts.js 199 B
packages/orbit-components/lib/Tabs/components/Tab/index.js 1.1 kB
packages/orbit-components/lib/Tabs/components/TabList/index.js 835 B
packages/orbit-components/lib/Tabs/components/TabPanel/index.js 667 B
packages/orbit-components/lib/Tabs/components/TabPanels/index.js 415 B
packages/orbit-components/lib/Tabs/index.js 425 B
packages/orbit-components/lib/Tabs/TabContext.js 539 B
packages/orbit-components/lib/Tag/consts.js 217 B
packages/orbit-components/lib/Tag/index.js 1.23 kB
packages/orbit-components/lib/Text/consts.js 505 B
packages/orbit-components/lib/Text/helpers/twClasses.js 666 B
packages/orbit-components/lib/Text/index.js 677 B
packages/orbit-components/lib/Textarea/consts.js 178 B
packages/orbit-components/lib/Textarea/index.js 1.46 kB
packages/orbit-components/lib/TextLink/consts.js 319 B
packages/orbit-components/lib/TextLink/helpers/twClasses.js 679 B
packages/orbit-components/lib/TextLink/index.js 1.23 kB
packages/orbit-components/lib/Tile/components/TileContent/index.js 432 B
packages/orbit-components/lib/Tile/components/TileExpandable/index.js 870 B
packages/orbit-components/lib/Tile/components/TileHeader/index.js 1.01 kB
packages/orbit-components/lib/Tile/components/TileWrapper/index.js 700 B
packages/orbit-components/lib/Tile/index.js 725 B
packages/orbit-components/lib/TileGroup/index.js 504 B
packages/orbit-components/lib/Timeline/index.js 762 B
packages/orbit-components/lib/Timeline/TimelineContext.js 522 B
packages/orbit-components/lib/Timeline/TimelineStep/components/ProgressLine.js 722 B
packages/orbit-components/lib/Timeline/TimelineStep/components/TextWrapper.js 333 B
packages/orbit-components/lib/Timeline/TimelineStep/components/TimelineStepDesktop.js 813 B
packages/orbit-components/lib/Timeline/TimelineStep/components/TimelineStepMobile.js 621 B
packages/orbit-components/lib/Timeline/TimelineStep/components/TypeIcon.js 872 B
packages/orbit-components/lib/Timeline/TimelineStep/consts.js 171 B
packages/orbit-components/lib/Timeline/TimelineStep/index.js 688 B
packages/orbit-components/lib/Toast/consts.js 241 B
packages/orbit-components/lib/Toast/hooks/useSwipe.js 787 B
packages/orbit-components/lib/Toast/index.js 269 B
packages/orbit-components/lib/Toast/ToastMessage.js 1.25 kB
packages/orbit-components/lib/Toast/ToastRoot.js 774 B
packages/orbit-components/lib/Tooltip/consts.js 175 B
packages/orbit-components/lib/Tooltip/index.js 617 B
packages/orbit-components/lib/Truncate/index.js 422 B
packages/orbit-components/lib/utils/boundingClientRect/index.js 366 B
packages/orbit-components/lib/utils/cloneWithTooltip/index.js 206 B
packages/orbit-components/lib/utils/debounce/index.js 186 B
packages/orbit-components/lib/utils/Grid/index.js 1.51 kB
packages/orbit-components/lib/utils/handleKeyDown/index.js 210 B
packages/orbit-components/lib/utils/layout/consts.js 479 B
packages/orbit-components/lib/utils/layout/index.js 630 B
packages/orbit-components/lib/utils/mediaQuery/index.js 363 B
packages/orbit-components/lib/utils/mergeRefs/index.js 259 B
packages/orbit-components/lib/utils/randomID/index.js 194 B
packages/orbit-components/lib/utils/rtl/index.js 237 B
packages/orbit-components/lib/utils/scroll/index.js 244 B
packages/orbit-components/lib/utils/Slide/index.js 1.24 kB
packages/orbit-components/lib/utils/transition/index.js 336 B
packages/orbit-components/lib/utils/validateDecrement/index.js 221 B
packages/orbit-components/lib/utils/validateIncrement/index.js 220 B
packages/orbit-components/lib/Wizard/index.js 1.22 kB
packages/orbit-components/lib/Wizard/WizardContext.js 448 B
packages/orbit-components/lib/Wizard/WizardStep.js 1.46 kB
packages/orbit-components/lib/Wizard/WizardStepIcon.js 713 B

compressed-size-action

Copy link

cloudflare-workers-and-pages bot commented Mar 11, 2025

Deploying orbit with  Cloudflare Pages  Cloudflare Pages

Latest commit: a44bc12
Status: ✅  Deploy successful!
Preview URL: https://a057a8f9.orbit.pages.dev
Branch Preview URL: https://sarka-airport-illustration-a.orbit.pages.dev

View logs

@sarkaaa sarkaaa changed the title chore: add alt prop in AirportIllustration in SB AirportIllustration accessibility Mar 11, 2025
@sarkaaa sarkaaa force-pushed the sarka/airport-illustration-a11y branch from e48fb8e to dabe3a3 Compare March 12, 2025 08:37
Copy link
Contributor

LLM Analysis of PR Changes

Okay, I will analyze the provided Git diff and provide feedback based on the changes and common web development practices, particularly focusing on accessibility as indicated by the pull request title.

Pull Request Analysis: /pull/4664 - AirportIllustration accessibility

1. Summary of Changes:

This pull request focuses on improving the accessibility of the AirportIllustration component within the Orbit design system. Here's a breakdown of the changes:

  • AirportIllustration.stories.tsx:

    • A default alt prop value of "Airport illustration" has been added to the Storybook story for AirportIllustration. This ensures that the example illustrations in Storybook have accessible names by default.
  • IllustrationPrimitive/index.tsx:

    • Removal of spaceAfter prop and related logic: The spaceAfter prop and its associated spaceAfterClasses have been removed from the IllustrationPrimitive component. This likely indicates a move towards a different spacing approach, possibly relying on more general margin utilities or container-level spacing.
    • Simplified alt prop handling: The alt prop is now directly used as the alt attribute of the <img> tag. The previous fallback to name if alt was not a string is removed.
    • Introduction of aria-hidden attribute: An aria-hidden attribute is added to the <img> tag, conditionally set based on the presence of the alt prop. If alt is provided (truthy value), aria-hidden is set to "false"; otherwise, it's set to "true".

2. Potential Issues or Bugs:

  • aria-hidden logic might be reversed: The current logic aria-hidden={alt ? "false" : "true"} seems counterintuitive for accessibility.

    • If alt is provided, it means the image is intended to be meaningful content and should be announced to screen readers. In this case, aria-hidden should be false (or not present at all, as false is the default).
    • If alt is not provided (or is an empty string), it might indicate that the image is purely decorative and should be hidden from screen readers. In this case, aria-hidden should be "true".
    • Therefore, the logic should likely be aria-hidden={!alt ? "true" : "false"} or more simply, aria-hidden={!alt} if you want to explicitly set it to true only when alt is missing. However, consider if it's better to simply omit aria-hidden when alt is present and only add aria-hidden="true" when you explicitly want to hide it for decorative images (though in this component context, illustrations are likely not purely decorative and should have alt text). It's crucial to clarify the intended behavior and correct the aria-hidden logic accordingly.
  • Removal of spaceAfter prop: While the comment suggests removing spaceAfter in a future major version, removing it now might be a breaking change if other components or parts of the codebase still rely on this prop for spacing. It's important to verify:

    • Is spaceAfter deprecated and no longer used elsewhere?
    • Is there a migration plan or alternative spacing mechanism in place to replace spaceAfter?
    • Removing props without a clear replacement strategy can lead to regressions in layout and spacing across the Orbit library.
  • Mandatory alt prop: The changes implicitly make providing an alt prop more important because of the aria-hidden logic and the removal of the fallback to name. While generally good for accessibility to encourage alt text, it's not explicitly enforced as a required prop in the code (based on this diff alone). Consider if the alt prop should be made explicitly required or if there should be clearer documentation/warnings if it's omitted.

3. Suggestions for Improvements:

  • Correct aria-hidden logic: Reverse the aria-hidden condition to aria-hidden={!alt ? "true" : undefined} (or simply aria-hidden={!alt} if you want to explicitly set it to true). Even better, reconsider if aria-hidden is necessary at all in this component. If AirportIllustration is always meant to be meaningful content, then alt should be mandatory, and aria-hidden should likely be removed entirely or only used in specific decorative use cases (which might not be the primary purpose of this component).

  • alt prop requirement and guidance:

    • Consider making the alt prop explicitly required in the IllustrationPrimitive component's type definition. This would enforce accessibility best practices at the type level.
    • Add a clear comment or prop description explaining the importance of the alt prop for accessibility and when it should be used.
    • If there are cases where AirportIllustration can be genuinely decorative, document how to handle those cases (e.g., using an empty alt="" or aria-hidden="true" if appropriate, but prefer meaningful alt text).
  • spaceAfter prop removal justification:

    • Provide more context in the pull request description about why spaceAfter is being removed.
    • Link to any related deprecation issues or discussions.
    • Explain the intended replacement strategy for spacing after illustrations.
    • If spaceAfter is being replaced by standard margin utilities, ensure that the documentation and examples are updated to reflect this new approach.
  • Storybook improvements:

    • While setting a default alt in the story is good, consider creating Storybook stories that demonstrate different alt text scenarios:
      • Good, descriptive alt text.
      • Potentially examples of when an empty alt="" might be used (if applicable and properly justified in documentation).
      • Stories that visually test how the illustration looks with different spacing approaches now that spaceAfter is removed.

4. Security Concerns:

There are no immediate security concerns evident in this diff. Image components themselves are generally not direct security risks unless they are loading images from untrusted user-provided URLs (which doesn't seem to be the case here, as illustrations are loaded from within the Orbit library's assets).

5. Code Quality Observations:

  • Code Clarity: The code changes are relatively clear and focused on accessibility. Removing unused code (like spaceAfterClasses usage) improves code cleanliness.
  • Consistency:
    • The change to directly use the alt prop simplifies the component's logic.
    • The consistency of spacing approach needs to be verified across the Orbit library after removing spaceAfter. Ensure other components are using a consistent and well-documented spacing strategy.
    • The use of aria-hidden needs to be consistent with accessibility best practices and the overall accessibility strategy of Orbit.

Overall Feedback:

This pull request shows a positive effort to improve the accessibility of the AirportIllustration component, which is commendable. However, the aria-hidden logic needs to be reviewed and corrected. The removal of the spaceAfter prop requires more context and justification to ensure it's a safe and well-planned change. Making the alt prop more prominent (potentially required) and providing clear guidance on its usage would further enhance the accessibility and usability of the AirportIllustration component.

Before merging, I recommend:

  1. Correcting the aria-hidden logic.
  2. Providing justification and context for the removal of spaceAfter.
  3. Considering making the alt prop required and improving its documentation.
  4. Adding Storybook examples that showcase good alt text practices.

By addressing these points, this pull request can significantly improve the accessibility and maintainability of the AirportIllustration component within the Orbit design system.

@sarkaaa sarkaaa force-pushed the sarka/airport-illustration-a11y branch from dabe3a3 to 8a06552 Compare March 12, 2025 09:12
Copy link
Contributor

LLM Analysis of PR Changes

Okay, I've analyzed the provided diff. Here's a breakdown of the changes, potential issues, suggestions, and code quality observations.

Pull Request Analysis - /pull/4664 - AirportIllustration accessibility

1. Summary of Changes:

This pull request primarily focuses on improving the accessibility of the AirportIllustration component and refactoring the IllustrationPrimitive component it utilizes.

  • Accessibility Enhancement for AirportIllustration: A default alt prop value of "Airport illustration" is added to the AirportIllustration component's Storybook definition. This ensures that the illustration has a descriptive alt attribute by default in Storybook examples, improving accessibility for screen reader users.
  • IllustrationPrimitive Refactoring:
    • The spaceAfter prop and related spaceAfterClasses are removed from IllustrationPrimitive.
    • The alt prop in IllustrationPrimitive now defaults to an empty string "".
    • The logic for setting the alt attribute in IllustrationPrimitive is simplified to directly use the alt prop.
  • Icon Snapshot Updates: Visual regression test snapshots for the Icon component are updated. This is likely a side effect of underlying changes in dependencies or rendering logic, and may or may not be directly related to the accessibility changes.
  • Icon Removal: The user-multiple-light.svg icon file is deleted.

2. Potential Issues or Bugs:

  • Removal of spaceAfter:
    • Potential Breaking Change: The removal of the spaceAfter prop from IllustrationPrimitive is a potentially breaking change. If any components or consumers were relying on this prop to control spacing below illustrations, they will need to be updated. It's important to understand if this is a deliberate deprecation and if there's a migration strategy.
    • Impact on Layout: Removing spaceAfter might affect the layout of components using IllustrationPrimitive. It's crucial to verify that the layout remains consistent and visually appealing after this change.
  • Default alt="" in IllustrationPrimitive:
    • Accessibility Implication: Setting the default alt to an empty string "" in IllustrationPrimitive might not always be the correct approach. While it's appropriate for purely decorative illustrations, if an illustration conveys meaning or is important for understanding content, it should have a meaningful alt text. By defaulting to "", there's a risk that developers might forget to provide a proper alt when needed, hurting accessibility.
    • Context is Key: The alt text should be context-dependent. A generic default might not be suitable for all use cases of IllustrationPrimitive.
  • Icon Removal (user-multiple-light.svg):
    • Unintended Consequences: Deleting user-multiple-light.svg could break functionality if this icon is still being used elsewhere in the codebase. It's essential to confirm that this icon is indeed unused before removal.
  • Icon Snapshot Changes:
    • Unintentional Visual Regression: The updated icon snapshots raise a flag. While they might be legitimate updates due to underlying changes, it's crucial to ensure they don't represent unintentional visual regressions in the Icon component. The PR author needs to verify these changes.

3. Suggestions for Improvements:

  • spaceAfter Removal Clarification:
    • Deprecation Strategy: If spaceAfter is being deprecated, clearly document this in the component's documentation and provide guidance on alternative methods for achieving spacing (e.g., using margin props, layout components, or CSS classes).
    • Migration Guide: Consider providing a migration guide for users upgrading to this version, especially if spaceAfter was a commonly used prop.
  • alt Prop Handling in IllustrationPrimitive:
    • Reconsider Default alt: Instead of defaulting to "", consider:
      • No Default (undefined): Make alt a required prop or explicitly set no default. This would force developers to consciously think about the alt text.
      • Conditional Default based on name: If a generic default is desired, perhaps use the name prop as a fallback alt if alt is not explicitly provided, but warn against this approach in documentation and encourage meaningful alt texts.
    • Documentation Emphasis: Clearly document the importance of the alt prop in IllustrationPrimitive and provide guidance on writing effective alt text for different types of illustrations (decorative vs. informative).
  • Icon Removal Confirmation:
    • Usage Check: Before removing user-multiple-light.svg, thoroughly check the codebase to ensure it's not being used by any components or stories. A simple search within the project should suffice.
    • PR Description: Add a comment to the PR description explaining why user-multiple-light.svg is being removed.
  • Icon Snapshot Verification:
    • Author Verification: The PR author should carefully review the updated icon snapshots to confirm that they are intentional and do not introduce any visual regressions. If unsure, they should investigate the cause of the changes.

4. Security Concerns:

There are no apparent security concerns in this specific diff. The changes are focused on accessibility and component refactoring, which generally do not introduce security vulnerabilities.

5. Code Quality Observations:

  • Positive Changes:
    • Accessibility Focus: Explicitly adding alt to Storybook examples is a positive step towards improving component accessibility.
    • Code Simplification: Simplifying the alt attribute logic in IllustrationPrimitive makes the code cleaner and easier to understand.
    • Removal of Dead Code: Removing spaceAfterClasses and related logic if spaceAfter is indeed deprecated is a good practice for code maintainability.
  • Areas for Improvement (as mentioned in suggestions):
    • Clarity on spaceAfter removal: The rationale and migration path for removing spaceAfter needs to be clearer.
    • alt prop default: The default alt="" in IllustrationPrimitive might be too simplistic and could hinder accessibility if not used carefully.

Overall Feedback:

This pull request is a step in the right direction by addressing accessibility concerns for the AirportIllustration component and cleaning up the IllustrationPrimitive. However, the removal of spaceAfter and the default alt="" in IllustrationPrimitive need careful consideration and clear communication to consumers of the Orbit component library. The icon removal and snapshot updates should also be verified to prevent unintended consequences.

Specific Feedback Points for the PR Author:

  1. spaceAfter Removal:
    • Could you elaborate on the reason for removing the spaceAfter prop from IllustrationPrimitive? Is it being deprecated?
    • If deprecated, what is the recommended approach for managing spacing after illustrations going forward? Should users use margin props directly, or are there other Orbit utilities for spacing?
    • Is there a migration guide or documentation update planned to accompany this change, especially if spaceAfter was commonly used?
  2. Default alt="" in IllustrationPrimitive:
    • Are you concerned that defaulting to alt="" might lead to accessibility issues if developers forget to provide meaningful alt text when the illustration is not purely decorative?
    • Would you consider making alt a required prop in IllustrationPrimitive or using a more context-aware default, or at least strongly emphasize the importance of providing appropriate alt text in the component's documentation?
  3. user-multiple-light.svg Removal:
    • Can you confirm that user-multiple-light.svg is no longer used anywhere in the codebase before removing it?
    • Could you add a brief comment in the PR description explaining why this icon is being removed?
  4. Icon Snapshot Updates:
    • Please verify that the updated icon snapshots are intentional and do not represent any visual regressions in the Icon component.

By addressing these points, the pull request can be further improved to ensure both accessibility and maintainability of the Orbit component library.

@sarkaaa sarkaaa force-pushed the sarka/airport-illustration-a11y branch 5 times, most recently from 066e372 to 8ca35e1 Compare March 12, 2025 10:33
@sarkaaa sarkaaa force-pushed the sarka/airport-illustration-a11y branch from 8ca35e1 to faa7f90 Compare March 12, 2025 10:47
@kiwicom kiwicom deleted a comment from github-actions bot Mar 12, 2025
@kiwicom kiwicom deleted a comment from github-actions bot Mar 12, 2025
@kiwicom kiwicom deleted a comment from github-actions bot Mar 12, 2025
@kiwicom kiwicom deleted a comment from github-actions bot Mar 12, 2025
@kiwicom kiwicom deleted a comment from github-actions bot Mar 12, 2025
Copy link
Contributor

LLM Analysis of PR Changes

Pull Request Analysis - AirportIllustration accessibility

Pull Request: /pull/4664
Title: AirportIllustration accessibility

1. Summary of Changes

This pull request focuses on improving the accessibility of the AirportIllustration component by introducing the alt prop. Here's a breakdown of the changes:

  • AirportIllustration.stories.tsx:
    • Added a default alt prop with the value "Airport illustration" to the storybook example.
  • README.md:
    • Updated the documentation for the alt prop to clarify its purpose and default behavior.
    • Changed the default alt description from "By default, the name of illustration is used." to "By default, an empty string is used."
  • __tests__/index.test.tsx:
    • Introduced a constant alt with a descriptive text "Fast Track at Bergamo Airport".
    • Updated the test to assert that the alt attribute of the <img> element matches the newly introduced alt constant instead of the name prop.
  • index.tsx:
    • Modified the AirportIllustration component to explicitly pass the alt prop down to the IllustrationPrimitive component.
    • Set the default value of the alt prop in AirportIllustration to an empty string ("").

In essence, the PR introduces an explicit alt prop to the AirportIllustration component, allowing users to provide accessible alternative text for the illustrations. It also changes the default behavior for the alt attribute from using the illustration name to using an empty string if no alt prop is provided.

2. Potential Issues or Bugs

  • Inconsistency in Default alt Value:

    • The documentation in README.md states that the default alt is an empty string.
    • However, the Storybook example in AirportIllustration.stories.tsx sets a default alt value of "Airport illustration". This creates inconsistency and might confuse users. The Storybook example might be unintentionally setting a default alt when the intention of the component is to have no default unless explicitly provided by the user or defaulted to an empty string in code.
  • Change in Default Behavior and Potential Regression:

    • Previously, the documentation mentioned that the default alt attribute would be set to the name of the illustration. This PR changes the default to an empty string.
    • This change in default behavior could be a potential accessibility regression. If the intention was to provide some default alt text and the name was considered a reasonable fallback, switching to an empty string means that by default, the illustrations will now be announced as images with no alternative text by screen readers. This might be less accessible than before if the name was indeed descriptive in many cases.
    • If the name prop values are generally descriptive (like "BGYFastTrack" implying "Fast Track at Bergamo Airport"), then using the name as a fallback alt might have been a reasonable approach for basic accessibility out-of-the-box. Moving to an empty string requires users to always explicitly provide an alt prop for accessibility, which might be overlooked.

3. Suggestions for Improvements

  • Resolve the Inconsistency in Default alt Value:

    • Recommendation: Remove the default alt: "Airport illustration" from the Storybook example in AirportIllustration.stories.tsx. This will align the Storybook example with the documented default behavior of an empty string and showcase the component's behavior when no alt prop is provided. Storybook examples are best when they are explicit about what they are demonstrating, and implicitly setting a default alt can be misleading about the component's actual defaults.
  • Reconsider the Default alt Behavior:

    • Option 1: Revert to using name as a fallback alt (or a derived descriptive text from name). If the name prop values are consistently descriptive, consider reverting to using the name (or a more user-friendly version derived from the name) as the default alt value when the alt prop is not explicitly provided. This would provide a better out-of-the-box accessibility experience. For example, if name="BGYFastTrack", the default alt could be "Bergamo Airport Fast Track".
    • Option 2: Keep the empty string default but strongly emphasize the importance of the alt prop in the documentation and Storybook. If keeping the default as an empty string is preferred (perhaps for more control or to enforce explicit alt props), then:
      • Update the documentation in README.md to strongly emphasize the importance of providing a meaningful alt prop for accessibility. Explain why it's important and provide guidance on writing good alternative text.
      • Add a Storybook example that specifically demonstrates the importance of the alt prop for accessibility. Show a case with and without a proper alt and explain the difference in screen reader experience.
      • Consider adding a warning or hint in the component's code (perhaps as a comment or a prop-type description) reminding developers to provide an alt prop for accessibility.
  • Improve Documentation of alt Prop:

    • In the README.md, enhance the description of the alt prop to provide more context and best practices for writing good alternative text. For example, mention that the alt text should be concise, describe the purpose and context of the illustration, and be meaningful to users who cannot see the image.
  • Test for Missing alt Attribute:

    • Consider adding a test case in __tests__/index.test.tsx to specifically check the behavior when the alt prop is not provided. This test could assert that in this case, the alt attribute is either an empty string (as currently intended) or the fallback value you decide upon (e.g., derived from name). This will ensure that the default behavior is explicitly tested and doesn't unintentionally change in the future.

4. Security Concerns

There are no apparent security concerns in this pull request. The changes are focused on accessibility and do not introduce any new functionalities that could potentially create security vulnerabilities.

5. Code Quality Observations

  • Code is Clean and Consistent: The code changes are well-structured, concise, and consistent with the existing codebase.
  • Good Use of PropTypes (Implicit): Although not explicitly shown in the diff, Orbit components generally use TypeScript types, which ensures good type safety and helps prevent prop-related errors.
  • Tests are Updated: The tests are updated to reflect the new functionality and ensure that the alt prop is working as expected.

Overall:

This pull request is a positive step towards improving the accessibility of the AirportIllustration component. The introduction of the alt prop is essential for making the component usable by people who rely on screen readers. However, there are a few points to address, primarily regarding the consistency and best practice of the default alt behavior. By resolving the inconsistency in the Storybook example and carefully considering the default alt behavior (and potentially enhancing the documentation), this PR can be further improved to provide a truly accessible component. The most important point is to ensure that the chosen default behavior and documentation result in the best possible accessibility outcome for users of the Orbit library.

@sarkaaa sarkaaa force-pushed the sarka/airport-illustration-a11y branch from faa7f90 to a44bc12 Compare March 12, 2025 14:36
Copy link
Contributor

LLM Analysis of PR Changes

Pull Request Feedback: AirportIllustration Accessibility

Here's an analysis of the provided Git diff for pull request /pull/4664, focusing on accessibility improvements for the AirportIllustration component.

1. Summary of Changes

This pull request primarily focuses on improving the accessibility of the AirportIllustration component by introducing and properly handling the alt attribute for the underlying image element.

Here's a breakdown of the changes in each file:

  • AirportIllustration.stories.tsx:

    • A default alt prop value of "Airport illustration" is added to the Storybook story's defaultArgs.
  • README.md:

    • The documentation for the alt prop is updated.
      • The default value is changed from implicitly being the name of the illustration to an explicit empty string ("").
      • The description is adjusted to reflect this new default behavior and clarify that it's now the user's responsibility to provide a meaningful alt text for accessibility.
  • __tests__/index.test.tsx:

    • A constant alt is defined with a descriptive text "Fast Track at Bergamo Airport".
    • The test case is updated to:
      • Pass the alt prop with the newly defined constant value to the AirportIllustration component.
      • Assert that the alt attribute of the rendered img element matches the provided alt prop value, instead of the name prop.
  • index.tsx:

    • The AirportIllustration component is modified to accept an alt prop with a default value of "".
    • This alt prop is then passed down to the IllustrationPrimitive component, which is presumably responsible for rendering the actual img element.

In essence, the PR ensures that the AirportIllustration component has a configurable alt attribute, defaults to an empty string for accessibility best practices (when no explicit alt is provided), and encourages users to provide meaningful alternative text.

2. Potential Issues or Bugs

  • Storybook Default alt Value: While the component default and documentation now correctly indicate an empty string as the default alt, the Storybook story still defaults to "Airport illustration". This is inconsistent and might be misleading for developers using the Storybook as a reference. It would be better if the Storybook either:

    • Also used an empty string as the default alt in the story, showcasing the need for users to provide it.
    • Removed the default alt from the Storybook args altogether, forcing users to explicitly set it in the Storybook examples and highlighting its importance.
  • Generic Default alt in Storybook: If a default alt is kept in Storybook, "Airport illustration" is very generic. It doesn't provide context and isn't very helpful. If a default is desired for Storybook, perhaps a more descriptive placeholder like "Description of the airport illustration" could be used to further encourage users to replace it with meaningful text. However, as mentioned above, removing the default might be the best approach.

  • Implicit Assumption about IllustrationPrimitive: The changes assume that IllustrationPrimitive correctly handles and renders the alt prop on the underlying img element. While likely, it's good to double-check the IllustrationPrimitive component's implementation to confirm this behavior and that it's correctly passing props down to the final <img> tag.

3. Suggestions for Improvements

  • Consistent Default alt in Storybook: Align the Storybook default alt value with the component's default and documentation (empty string) or remove it from Storybook defaults to emphasize the need for users to provide it.

  • Clarify alt Prop Usage in README: Expand the README documentation for the alt prop to provide more guidance on when and how to use it effectively for accessibility. Consider adding:

    • Examples of good alt text for different AirportIllustration use cases.
    • A brief explanation of why an empty alt is the default and when it's appropriate (e.g., if the illustration is purely decorative and its meaning is conveyed through surrounding text).
    • A link to accessibility resources for writing good alt text (e.g., WCAG guidelines).
  • Consider aria-label or aria-labelledby (Potentially Out of Scope): Depending on the context and complexity of the AirportIllustration, consider whether aria-label or aria-labelledby might be more appropriate in certain scenarios instead of or in addition to alt. This might be relevant if the illustration is part of a larger interactive element or if the desired alternative text is more complex than what fits well in an alt attribute. However, for simple illustrations, alt is usually sufficient and preferred. This suggestion might be beyond the scope of this specific PR but worth considering for the component's future development.

  • Test for Empty alt Default: Add a test case to specifically verify that when no alt prop is provided to AirportIllustration, the rendered img element has an empty alt attribute (alt=""). This would provide explicit test coverage for the default behavior.

4. Security Concerns

There are no apparent security concerns in this pull request. Accessibility improvements generally do not introduce security vulnerabilities.

5. Code Quality Observations

  • Focused and Relevant Changes: The changes are well-focused on the stated goal of improving accessibility.
  • Clean and Understandable Code: The code modifications are minimal, clean, and easy to understand.
  • Good Use of Defaults: Setting a sensible default of "" for the alt prop is a good practice for accessibility and encourages users to be mindful of providing alternative text.
  • Test Coverage: The tests are updated to cover the new alt prop functionality, which is important.
  • Documentation Update: The documentation is updated to reflect the changes, which is crucial for maintaining a usable component library.

Overall:

This is a well-executed pull request that effectively improves the accessibility of the AirportIllustration component. The changes are sensible, address a real accessibility need, and are implemented with good code quality. Addressing the minor suggestions, particularly regarding Storybook consistency and README clarification, would further enhance the quality of this contribution.

@sarkaaa sarkaaa merged commit 156abc2 into master Mar 12, 2025
16 checks passed
@sarkaaa sarkaaa deleted the sarka/airport-illustration-a11y branch March 12, 2025 14:49
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.

2 participants