Adds new focus-visible markings.

Uppdaterad 2025-04-15

Termin Daniel

Release notes

Updates focus-visible indicators for ALL components.
Adds a focusVisibleStyles mixin that can be used when an override is needed. See example below.
Adds a focusVisibleReset mixin that can be used to reset the styles set by focusVisibleStyles.
Elements and/or components that resides within a container with overflow: hidden should use the focusVisibleStyles mixin with the inset parameter set to true.
Deprecation Warning!
- getFocusOutline deprecated: Use theme.mixins.focusVisibleStyles instead. This function will be removed in a future version.
- getFocusBoxShadow deprecated: Use theme.mixins.focusVisibleStyles instead. This function will be removed in a future version.

/**
 * Mixin function for focus-visible styles.
 *
 * @param inset               Boolean. Set this to true when the element is inside a container with `overflow: hidden`
 *                            to make sure that the focus outline is sufficiently visible.
 * @param isForTextFieldLike  Boolean. Set this to true if the element is a text field or similar (like TextFieldButton for example).
 * */

...theme.mixins.focusVisibleStyles()

/**
 * Mixin to reset the styles set by focusVisibleStyles. Usable for example when you want an element to have
 * focus styles, but not the focused element itself. This is not a function, it just returns a CSSProperties object.
 * */

...theme.mixins.focusResetStyles

Ärende

S3CM-1955

Ändrade komponenter

Dependency bumpar

assets/assets
hooks/use-detect-enlarged-font
hooks/use-on-click-outside
props/design-tokens-types
props/journey-card-types
props/journey-summary-types
props/link-props
props/navigation-button-props
props/navigation-props
props/transport-details-types
styles/colors
styles/design-tokens
styles/fonts
styles/styles
translations/date-picker-translation
translations/departure-card-translation
translations/journey-summary-translation
translations/transport-details-translation
translations/travel-time-translation
ui/accordion-details
ui/action-buttons
ui/alert
ui/app-bar
ui/app-bar-base
ui/avatar
ui/avatar-group
ui/badge
ui/bottom-bar-container
ui/bottom-navigation
ui/bottom-sheet
ui/bottom-sheet-swipeable
ui/campaign-card
ui/card-action-area
ui/card-actions
ui/card-content
ui/card-header
ui/card-media
ui/card-secondary-text
ui/choose-multiride-card-skeleton
ui/collapse
ui/config-provider
ui/container
ui/date-calendar
ui/date-field
ui/date-picker
ui/date-picker-week
ui/departure-card-skeleton
ui/dialog
ui/divider
ui/empty-state
ui/form-group
ui/form-helper-text
ui/grid
ui/icon
ui/icon-button-card
ui/icons
ui/journey-card
ui/journey-summary
ui/linear-progress
ui/link
ui/list-image
ui/list-item
ui/list-item-button
ui/list-item-icon
ui/list-item-journey-summary
ui/list-item-secondary-action
ui/list-item-text
ui/list-subheader
ui/localization-provider
ui/logo
ui/menu
ui/menu-item-icon
ui/meter
ui/mini-button
ui/navigation-bar
ui/navigation-button
ui/navigation-rail
ui/page-transition
ui/paper
ui/payment-method
ui/pickers-day
ui/popper
ui/price-object
ui/product-card
ui/route-description
ui/route-description-item
ui/route-transition
ui/sheet
ui/side-sheet
ui/snackbar
ui/spacing
ui/stack
ui/station-picker
ui/status-circle
ui/status-text
ui/stepper
ui/svg-icon
ui/swipable-tab-panels
ui/switch-list-item
ui/system-message
ui/tab-panel
ui/tabs
ui/text-list
ui/text-list-item
ui/theme-provider
ui/title
ui/tooltip
ui/trains
ui/transport-details
ui/transport-image
ui/transport-summary
ui/travel-time
ui/traveller-field
ui/virtualized-list
utils/card-limited-click-area
utils/card-meta-text
utils/date-time-format-util
utils/duration-utils
utils/input-card-content
utils/live-announcer-util
utils/localization-util
utils/mock-link
utils/navigation-utils
utils/price-card-content
utils/screen-reader-utils
utils/soft-hyphen-utils
utils/translations-util