Skip to content

Comments

fix(UX-1563): High Contrast Issue#424

Closed
aygurs wants to merge 2 commits intomainfrom
UX-1563
Closed

fix(UX-1563): High Contrast Issue#424
aygurs wants to merge 2 commits intomainfrom
UX-1563

Conversation

@aygurs
Copy link
Contributor

@aygurs aygurs commented Feb 2, 2026

Fixes the high contrast issue of borders not going sharp in high contrast mode for BUTTON ONLY.
This is not a global fix and ideally should be changed to a fix which targets all components.

The Issue

In the components, borderType overrides any border styles it may get from the parent.
This is why behaviour works properly when borderType isnt set (as it defaults to parent styling), but does not work when borderType is set manually by the user.

How can we override borderType globally without either:

  • Removing borderType from components, which isn't a good idea - takes away user customisation
  • Adding component level logic to handle high contrast scenarios (like in this PR) - but isnt a global solution and has repetitive code

Maybe a helper function to call on each component? Saves repetitive code but still requires component level adjustment...

@aygurs aygurs self-assigned this Feb 2, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Feb 2, 2026

PR Checks complete

  • ✅ - Linting / Formatting
  • ✅ - Static analysis passed
  • ✅ - All tests passed
  • ✅ - Branch is not behind
  • 📈 - Code coverage: 50.92%
    See details
    File Name%Passing?
    packages/zeta_flutter/lib/src/components/accordion/accordion.dart82.2%
    packages/zeta_flutter/lib/src/components/accordion/accordion_item.dart6.5%⛔️
    packages/zeta_flutter/lib/src/components/accordion/accordion_item_ui.dart88%
    packages/zeta_flutter/lib/src/components/avatar_rail/avatar_rail.dart53.7%⛔️
    packages/zeta_flutter/lib/src/components/avatars/avatar.dart93.1%
    packages/zeta_flutter/lib/src/components/badges/indicator.dart97%
    packages/zeta_flutter/lib/src/components/badges/label.dart100%
    packages/zeta_flutter/lib/src/components/badges/priority_pill.dart96.8%
    packages/zeta_flutter/lib/src/components/badges/status_label.dart100%
    packages/zeta_flutter/lib/src/components/badges/tag.dart95.7%
    packages/zeta_flutter/lib/src/components/bottom sheets/bottom_sheet.dart0%⛔️
    packages/zeta_flutter/lib/src/components/bottom sheets/menu_items.dart0%⛔️
    packages/zeta_flutter/lib/src/components/breadcrumb/breadcrumb.dart86.3%
    packages/zeta_flutter/lib/src/components/button_group/button_group.dart0%⛔️
    packages/zeta_flutter/lib/src/components/buttons/button.dart94.5%
    packages/zeta_flutter/lib/src/components/buttons/button_style.dart97%
    packages/zeta_flutter/lib/src/components/buttons/icon_button.dart66%⛔️
    packages/zeta_flutter/lib/src/components/buttons/input_icon_button.dart72.7%⛔️
    packages/zeta_flutter/lib/src/components/buttons/tile_button.dart69%⛔️
    packages/zeta_flutter/lib/src/components/card/card_container.dart87.7%
    packages/zeta_flutter/lib/src/components/chat_item/chat_item.dart98.2%
    packages/zeta_flutter/lib/src/components/chat_item/contact_item.dart0%⛔️
    packages/zeta_flutter/lib/src/components/checkbox/checkbox.dart99%
    packages/zeta_flutter/lib/src/components/chips/assist_chip.dart0%⛔️
    packages/zeta_flutter/lib/src/components/chips/chip.dart81.7%
    packages/zeta_flutter/lib/src/components/chips/filter_chip.dart0%⛔️
    packages/zeta_flutter/lib/src/components/chips/input_chip.dart0%⛔️
    packages/zeta_flutter/lib/src/components/chips/status_chip.dart90.9%
    packages/zeta_flutter/lib/src/components/comms_button/comms_button.dart82%
    packages/zeta_flutter/lib/src/components/date_input/date_input.dart0%⛔️
    packages/zeta_flutter/lib/src/components/dial_pad/dial_pad.dart100%
    packages/zeta_flutter/lib/src/components/dialog/dialog.dart0%⛔️
    packages/zeta_flutter/lib/src/components/dropdown/dropdown.dart35.8%⛔️
    packages/zeta_flutter/lib/src/components/empty_state/empty_state.dart100%
    packages/zeta_flutter/lib/src/components/fabs/fab.dart100%
    packages/zeta_flutter/lib/src/components/filter_selection/filter_selection.dart0%⛔️
    packages/zeta_flutter/lib/src/components/global_header/global_header.dart85.1%
    packages/zeta_flutter/lib/src/components/global_header/header_tab_item.dart0%⛔️
    packages/zeta_flutter/lib/src/components/icon/icon.dart100%
    packages/zeta_flutter/lib/src/components/in_page_banner/in_page_banner.dart98.6%
    packages/zeta_flutter/lib/src/components/list_item/dropdown_list_item.dart0%⛔️
    packages/zeta_flutter/lib/src/components/list_item/list_item.dart0%⛔️
    packages/zeta_flutter/lib/src/components/list_item/list_scope.dart0%⛔️
    packages/zeta_flutter/lib/src/components/list_item/notification_list_item.dart0%⛔️
    packages/zeta_flutter/lib/src/components/navigation bar/navigation_bar.dart92.7%
    packages/zeta_flutter/lib/src/components/navigation_rail/navigation_rail.dart0%⛔️
    packages/zeta_flutter/lib/src/components/pagination/pagination.dart0.6%⛔️
    packages/zeta_flutter/lib/src/components/password/password_input.dart100%
    packages/zeta_flutter/lib/src/components/phone_input/phone_input.dart0%⛔️
    packages/zeta_flutter/lib/src/components/progress/progress.dart0%⛔️
    packages/zeta_flutter/lib/src/components/progress/progress_bar.dart0%⛔️
    packages/zeta_flutter/lib/src/components/progress/progress_circle.dart0%⛔️
    packages/zeta_flutter/lib/src/components/radio/radio.dart0%⛔️
    packages/zeta_flutter/lib/src/components/range_selector/range_selector.dart84.5%
    packages/zeta_flutter/lib/src/components/screen_header_bar/screen_header_bar.dart0%⛔️
    packages/zeta_flutter/lib/src/components/search_bar/search_bar.dart96.1%
    packages/zeta_flutter/lib/src/components/segmented_control/segmented_control.dart0%⛔️
    packages/zeta_flutter/lib/src/components/select_input/select_input.dart0%⛔️
    packages/zeta_flutter/lib/src/components/slider/slider.dart52.4%⛔️
    packages/zeta_flutter/lib/src/components/snack_bar/snack_bar.dart0%⛔️
    packages/zeta_flutter/lib/src/components/stepper/stepper.dart94.6%
    packages/zeta_flutter/lib/src/components/stepper_input/stepper_input.dart71.9%⛔️
    packages/zeta_flutter/lib/src/components/switch/material_switch.dart0%⛔️
    packages/zeta_flutter/lib/src/components/switch/zeta_switch.dart0%⛔️
    packages/zeta_flutter/lib/src/components/system_banner/system_banner.dart85.4%
    packages/zeta_flutter/lib/src/components/tabs/tab.dart0%⛔️
    packages/zeta_flutter/lib/src/components/tabs/tab_bar.dart0%⛔️
    packages/zeta_flutter/lib/src/components/text_input/hint_text.dart75.9%⛔️
    packages/zeta_flutter/lib/src/components/text_input/input_label.dart0%⛔️
    packages/zeta_flutter/lib/src/components/text_input/internal_text_input.dart73.2%⛔️
    packages/zeta_flutter/lib/src/components/text_input/text_input.dart0%⛔️
    packages/zeta_flutter/lib/src/components/time_input/time_input.dart0%⛔️
    packages/zeta_flutter/lib/src/components/tooltip/tooltip.dart97.7%
    packages/zeta_flutter/lib/src/components/top_app_bar/extended_top_app_bar.dart93.9%
    packages/zeta_flutter/lib/src/components/top_app_bar/search_top_app_bar.dart86.6%
    packages/zeta_flutter/lib/src/components/top_app_bar/top_app_bar.dart98.1%
    packages/zeta_flutter/lib/src/components/voice_memo/state/playback_state.dart0%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/state/recording_state.dart0%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/state/wav_amplitude_decoder.dart0%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/state/wav_header.dart0%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/ui/audio_visualizer.dart0%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/ui/play_button.dart0%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/ui/recording_control.dart2.8%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/ui/voice_memo.dart0%⛔️
    packages/zeta_flutter/lib/src/components/voice_memo/ui/waveform.dart0%⛔️
    packages/zeta_flutter/lib/src/interfaces/audio_decoder.dart0%⛔️
    packages/zeta_flutter/lib/src/interfaces/countries.dart10%⛔️
    packages/zeta_flutter/lib/src/interfaces/form_field.dart81.4%
    packages/zeta_flutter/lib/src/interfaces/phone_number.dart0%⛔️
    packages/zeta_flutter/lib/src/utils/enums.dart100%
    packages/zeta_flutter/lib/src/utils/widget.dart100%
    packages/zeta_flutter_theme/lib/src/breakpoints.dart81.8%
    packages/zeta_flutter_theme/lib/src/color_extensions.dart86.1%
    packages/zeta_flutter_theme/lib/src/color_swatch.dart58.5%⛔️
    packages/zeta_flutter_theme/lib/src/contrast.dart50%⛔️
    packages/zeta_flutter_theme/lib/src/custom_theme.dart55.6%⛔️
    packages/zeta_flutter_theme/lib/src/generated/tokens/primitives.g.dart64.5%⛔️
    packages/zeta_flutter_theme/lib/src/generated/tokens/semantics.g.dart90.5%
    packages/zeta_flutter_theme/lib/src/rounded.dart75%⛔️
    packages/zeta_flutter_theme/lib/src/theme_service.dart17.9%⛔️
    packages/zeta_flutter_theme/lib/src/tokens.dart100%
    packages/zeta_flutter_theme/lib/src/typography.dart81.9%
    packages/zeta_flutter_theme/lib/src/zeta.dart98%
    packages/zeta_flutter_theme/lib/src/zeta_provider.dart93%
    packages/zeta_flutter_theme/lib/src/zeta_theme_override.dart68.4%⛔️
    packages/zeta_flutter_utils/lib/src/debounce.dart100%
    packages/zeta_flutter_utils/lib/src/extensions.dart79.1%⛔️
    packages/zeta_flutter_utils/lib/src/nothing.dart50%⛔️
    packages/zeta_flutter_utils/lib/src/platform/platform_is.dart0%⛔️
    packages/zeta_flutter_utils/lib/src/platform/universal_platform_vm.dart7.1%⛔️
    packages/zeta_icons/lib/src/illustrations.dart0%⛔️

Created with Flutter code quality action

@github-actions
Copy link
Contributor

github-actions bot commented Feb 2, 2026

Visit the preview URL for this PR (updated for commit a9471d9):

https://zeta-flutter-main--pr-424-ux-1563-k1vfuk8e.web.app

(expires Mon, 09 Feb 2026 14:51:30 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 5ca681de0a0ad9185b252304c113355d5ee04ca6

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses a high contrast accessibility issue by forcing sharp borders on ZetaButton components when AAA contrast mode is enabled. The implementation adds logic to override the borderType parameter to ZetaWidgetBorder.sharp when the contrast level is set to AAA, improving visual clarity for users who require high contrast.

Changes:

  • Added logic in ZetaButton.build() to check the contrast level from the Zeta context
  • Introduced contrastBorderType variable that enforces sharp borders in AAA contrast mode
  • The fix applies only to the ZetaButton component, not to other button types or components

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +197 to +199
final contrastBorderType = zeta.contrast == ZetaContrast.aaa
? ZetaWidgetBorder.sharp
: borderType ?? (context.rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp);
Copy link

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This AAA contrast mode functionality lacks test coverage. The existing accessibility tests in button_test.dart iterate through contrast modes (aa and aaa) but don't specifically verify that sharp borders are enforced in AAA mode. Consider adding a test that verifies the border behavior in AAA contrast mode, especially when borderType is explicitly set to a different value.

Copilot uses AI. Check for mistakes.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fair - will be done if solution is kept

@aygurs aygurs closed this Feb 3, 2026
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.

1 participant