diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 38b019c0e..26c7fbdd6 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1518,20 +1518,24 @@ ion-item.item-input.item-multiple-inputs { } // Focus highlight for accessibility. -ion-item.item-input.ion-focused:not(:focus), -.ion-focused, -ion-item.ion-activatable.ion-focused:not(:focus), +.ion-focused:not(.item-multiple-inputs):not(:focus), ion-input.has-focus, -.ion-focused ion-toggle:focus-within, -.ion-focused ion-select:focus-within, -.ion-focused ion-checkbox:focus-within, -.ion-focused ion-radio:focus-within, ion-card:focus { @include core-focus(); } +.ion-focused.item-multiple-inputs, +.ion-focused.ion-activatable { + ion-toggle:focus-within, + ion-select:focus-within, + ion-checkbox:focus-within, + ion-radio:focus-within { + @include core-focus(); + } +} // Treat cases where there's a focusable element inside an item, like a button. -ion-item.ion-focused:not(:focus), +ion-item.item-input:not(.item-multiple-inputs):not(:focus), +ion-item.item-has-focus:not(.item-multiple-inputs):not(:focus), ion-item.item-input ion-input.has-focus { position: relative; &::after { @@ -1588,6 +1592,10 @@ textarea, button, select, input, a, .clickable { } } +.ion-focused:not(.item-multiple-inputs):not(:focus) .clickable:focus { + box-shadow: none; +} + ion-loading:focus-visible, ion-alert:focus-visible, ion-popover:focus-visible,