diff --git a/src/material/button-toggle/button-toggle.scss b/src/material/button-toggle/button-toggle.scss index 9245d028ca53..12abd6880ae8 100644 --- a/src/material/button-toggle/button-toggle.scss +++ b/src/material/button-toggle/button-toggle.scss @@ -25,7 +25,6 @@ $fallbacks: m3-button-toggle.get-tokens(); display: inline-flex; flex-direction: row; white-space: nowrap; - overflow: hidden; -webkit-tap-highlight-color: transparent; border-radius: token-utils.slot(button-toggle-legacy-shape, $fallbacks); @@ -82,6 +81,11 @@ $fallbacks: m3-button-toggle.get-tokens(); token-utils.slot(button-toggle-legacy-selected-state-text-color, $fallbacks)}; &.cdk-keyboard-focused .mat-button-toggle-focus-overlay { + outline-width: 3px; + outline-style: solid; + outline-color: var(--sys-secondary); + outline-offset: 3px; + z-index: 2; opacity: token-utils.slot(button-toggle-legacy-focus-state-layer-opacity, $fallbacks); } @@ -356,26 +360,35 @@ $fallbacks: m3-button-toggle.get-tokens(); --mat-focus-indicator-border-radius: #{token-utils.slot(button-toggle-shape, $fallbacks)}; } -.mat-button-toggle-group-appearance-standard:not(.mat-button-toggle-vertical) .mat-button-toggle { - &:last-of-type .mat-button-toggle-button::before { - border-top-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); - border-bottom-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); +.mat-button-toggle-group:not(.mat-button-toggle-vertical) .mat-button-toggle { + &:last-of-type { + .mat-button-toggle-button::before, .mat-button-toggle-ripple { + border-top-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); + border-bottom-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); + } } - &:first-of-type .mat-button-toggle-button::before { - border-top-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); - border-bottom-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); + &:first-of-type { + .mat-button-toggle-button::before, .mat-button-toggle-ripple { + border-top-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); + border-bottom-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); + } } } -.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle { - &:last-of-type .mat-button-toggle-button::before { - border-bottom-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); - border-bottom-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); +.mat-button-toggle-group.mat-button-toggle-vertical .mat-button-toggle { + &:last-of-type { + .mat-button-toggle-button::before, .mat-button-toggle-ripple { + border-bottom-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); + border-bottom-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); + } } - &:first-of-type .mat-button-toggle-button::before { - border-top-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); - border-top-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); + &:first-of-type { + .mat-button-toggle-button::before, .mat-button-toggle-ripple { + border-top-right-radius: token-utils.slot(button-toggle-shape, $fallbacks); + border-top-left-radius: token-utils.slot(button-toggle-shape, $fallbacks); + } } } + diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts index 0b1da176f916..31fe9fc43e49 100644 --- a/src/material/button-toggle/button-toggle.ts +++ b/src/material/button-toggle/button-toggle.ts @@ -341,10 +341,12 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After }); let nextButton: MatButtonToggle | null = null; + let shouldSelect = false; switch (event.keyCode) { case SPACE: case ENTER: nextButton = this._buttonToggles.get(index) || null; + shouldSelect = true; break; case UP_ARROW: nextButton = this._getNextButton(index, -1); @@ -364,7 +366,9 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After if (nextButton) { event.preventDefault(); - nextButton._onButtonClick(); + if (shouldSelect) { + nextButton._onButtonClick(); + } nextButton.focus(); } }