@tiba-spark/client-shared-lib 26.3.0-628 → 26.3.0-628.a11y.13

package/src/libraries/theme/mat-components/_mat-select.scss

@@ -172,6 +172,13 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.tb-h-30 {
     &:focus,
     &.mat-mdc-option-active {
       --mat-option-selected-state-layer-color: #{variables.$hover-background};
+      // The grey tint alone is too faint to show the focused option.
+      box-shadow: inset 2px 0 0 variables.$focus-ring-color;
+    }
+
+    &:focus,
+    &.mat-mdc-option-active {
+      box-shadow: variables.$option-focus-shadow;
     }
 
     &.mdc-list-item--selected {
@@ -182,6 +189,21 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.tb-h-30 {
       }
     }
 
+    // Single choice: light tint plus a blue bar (variables.single-choice-selected).
+    &.mdc-list-item--selected:not(.mat-mdc-option-multiple) {
+      --mat-option-selected-state-layer-color: #{variables.$active-background};
+      box-shadow: variables.$option-selected-shadow;
+
+      .mdc-list-item__primary-text {
+        --mat-option-selected-state-label-text-color: #{variables.$text-color};
+      }
+
+      &:focus,
+      &.mat-mdc-option-active {
+        box-shadow: variables.$option-selected-focus-shadow;
+      }
+    }
+
     &.list-option-item {
       .mdc-list-item__primary-text {
         --mat-option-selected-state-label-text-color: #{variables.$form-field-placeholder};
@@ -218,7 +240,7 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.tb-h-30 {
   }
 
   &.tb-disable-selected-bg {
-    mat-option.mat-mdc-option.mdc-list-item--selected {
+    mat-option.mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple) {
       --mat-option-selected-state-layer-color: #{variables.$white-color};
 
       &:hover {
@@ -230,9 +252,19 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.tb-h-30 {
 
 mat-form-field.mat-mdc-form-field.tb-mat-select.search-parker-type,
 mat-form-field.mat-mdc-form-field.tb-mat-select.select-input-search-pair {
+  // The box is 1px wider so its right border overlaps the paired input's left border; raised when hovered or focused.
+  position: relative;
+
+  &:hover,
+  &:focus-within {
+    z-index: 1;
+  }
+
   .mat-mdc-text-field-wrapper {
     border-radius: 0;
     padding: 0;
+    // Lets the 1px overlap show; the wrapper clips by default.
+    overflow: visible;
 
     .mat-mdc-form-field-infix {
       width: 100%;
@@ -241,14 +273,8 @@ mat-form-field.mat-mdc-form-field.tb-mat-select.select-input-search-pair {
     .mat-mdc-form-field-flex {
       height: 30px;
       border-radius: 4px 0 0 4px;
-
-      &:not(:hover):not(:focus-within) {
-        border-right: 0;
-
-        mat-select.mat-mdc-select .mat-mdc-select-trigger {
-          padding-right: 11px;
-        }
-      }
+      flex-shrink: 0;
+      width: calc(100% + 1px);
 
       &:focus-within {
         border-color: variables.$input-border-on-focus;

package/src/libraries/theme/mat-components/_mat-selection-list.scss

@@ -17,10 +17,8 @@
 
 mat-selection-list.mat-mdc-selection-list.special-days-list {
   padding: 0;
-  outline: none;
 
   .mat-mdc-list-option {
-    outline: none;
     font-size: 13px;
     height: 40px;
 
@@ -77,7 +75,8 @@ mat-selection-list.mat-mdc-selection-list[aria-multiselectable="false"] {
     background: variables.$hover-background;
   }
   
+  // Single choice: a strong fill, so the selection is not shown by a light tint alone (WCAG 1.4.1).
   .mat-mdc-list-option[aria-selected="true"] {
-    background: variables.$active-background;
+    @include variables.single-choice-selected;
   }
 }

package/src/libraries/theme/mat-components/_mat-slide-toggle.scss

@@ -60,5 +60,5 @@ mat-slide-toggle.mat-mdc-slide-toggle {
   --mdc-switch-unselected-hover-handle-color: #{variables.$white-color};
   --mdc-switch-unselected-pressed-handle-color: #{variables.$white-color};
   --mdc-switch-unselected-focus-handle-color: #{variables.$white-color};
-  --mdc-switch-unselected-track-color: #{variables.$hover-background};
+  --mdc-switch-unselected-track-color: #{variables.$form-field-border};
 }

package/src/libraries/theme/mat-components/_mat-step.scss

@@ -80,7 +80,8 @@ mat-horizontal-stepper.mat-stepper-horizontal {
       overflow: inherit;
       max-width: 200px;
 
-      &[aria-selected="true"] {
+      &[aria-selected="true"],
+      &[aria-current="step"] {
         .mat-step-icon {
           background-color: variables.$primary-color;
           box-shadow: 0 0 0 2px variables.$white-color, 0 0 0 3px variables.$primary-color;
@@ -117,6 +118,24 @@ mat-horizontal-stepper.mat-stepper-horizontal {
         width: min-content;
         min-width: 100px;
         min-height: 30px;
+
+        // Three or more 100px labels overflow a phone-width dialog; let them share the row.
+        @media only screen and (max-width: variables.$reflow-max-width) {
+          width: auto;
+          min-width: 0;
+        }
+
+        // Phone width: the labels run into each other; the dialog title already names the current
+        // step, so they are hidden from sight and stay the step names for screen readers.
+        @media only screen and (max-width: 640px) {
+          position: absolute;
+          width: 1px;
+          min-height: 0;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
       }
     }
 
@@ -138,6 +157,11 @@ mat-horizontal-stepper.mat-stepper-horizontal {
       display: flex;
       flex-direction: column;
       flex: 1;
+      // Material's container clips; a step taller than a short (zoomed) dialog scrolls instead of being cut off.
+      // The scroll box clips too, so it keeps the ring room on its left edge.
+      overflow-y: auto;
+      padding-left: 5px;
+      margin-left: -5px;
 
       &:not(.mat-horizontal-stepper-content-inactive) {
         height: 100%;
@@ -178,7 +202,8 @@ tb-tab-icon {
       background-color: initial;
     }
 
-    &[aria-selected=true] {
+    &[aria-selected=true],
+    &[aria-current=step] {
       background-color: variables.$menu-selected-color;
     }
 
@@ -236,3 +261,17 @@ tb-tab-icon {
 .mat-horizontal-content-container {
   padding: unset;
 }
+
+// These boxes clip; padding offset by a negative margin leaves room for the focus ring of a radio or checkbox
+// at the step's left (and top) edge without moving anything. Never on the right or bottom: there the box
+// would stick out of a scrolling parent and add a scrollbar.
+.mat-stepper-horizontal,
+.mat-horizontal-stepper-wrapper {
+  padding-left: 5px;
+  margin-left: -5px;
+}
+
+.mat-horizontal-content-container.mat-horizontal-content-container {
+  padding: 5px 0 0 5px;
+  margin: -5px 0 0 -5px;
+}

package/src/libraries/theme/theme.scss

@@ -11,6 +11,125 @@ body {
   --mat-sidenav-content-text-color: #{ variables.$text-color};
 }
 
+// Text fields show focus with their own border.
+:focus-visible:not(input, textarea) {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: 2px;
+}
+
+// The side menu and tab strip clip outside the element, so draw the ring inside.
+.mat-drawer :focus-visible,
+.mdc-tab:focus-visible {
+  outline-offset: -1px;
+}
+
+// Dropdowns look like text fields on focus: a 1px blue line over their own border.
+.tb-dropdown-menu-trigger:focus-visible {
+  outline-width: 1px;
+  outline-offset: -1px;
+}
+
+// The select's field border already turns blue on focus.
+.mat-mdc-select:focus-visible {
+  outline: none;
+}
+
+// Dialog X and minimize: rounded like their hover background, so the focus ring is rounded too.
+.modal-close-icon,
+.modal-minimize-icon {
+  border-radius: 4px;
+}
+
+// Round ring on icon buttons inside a field (search clear X), inset: the field clips anything outside it.
+.mat-mdc-form-field-icon-suffix [role='button']:focus-visible,
+.mat-mdc-form-field-icon-suffix .mat-mdc-icon-button:focus-visible {
+  border-radius: 50%;
+  margin: auto 0;
+  outline-offset: -2px;
+}
+
+// Focused icon buttons get the 1px ring only, not Material's gray focus fill.
+.mat-mdc-icon-button.cdk-keyboard-focused,
+.mat-mdc-icon-button.cdk-program-focused {
+  .mat-mdc-button-persistent-ripple::before {
+    opacity: 0;
+  }
+}
+
+// Radios and checkboxes hide their native input; ring the visible circle or box, not the input.
+.mdc-radio__native-control:focus-visible,
+.mdc-checkbox__native-control:focus-visible {
+  outline: none;
+}
+
+.mdc-radio__native-control:focus-visible ~ .mdc-radio__background,
+.mdc-checkbox__native-control:focus-visible ~ .mdc-checkbox__background {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: 2px;
+}
+
+.mdc-radio__native-control:focus-visible ~ .mdc-radio__background {
+  border-radius: 50%;
+  // Hugs the radio's own circle: a wider gap read as a second circle around a selected radio.
+  outline-offset: 1px;
+}
+
+// The ring is drawn by ::after below.
+.mdc-switch:focus-visible {
+  outline: none;
+}
+
+// The 20px knob overhangs the 15px track; ring it with an even gap around both.
+.mdc-switch:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: -6px -3px;
+  border: 1px solid variables.$focus-ring-color;
+  border-radius: 14px;
+  pointer-events: none;
+}
+
+.mat-drawer .mdc-switch:focus-visible::after {
+  border-color: variables.$focus-ring-color-on-dark;
+}
+
+// Adjacent tabs (all z-index 1) and joined fields paint over the ring; lift the focused one.
+.mdc-tab:focus-visible,
+.mat-mdc-form-field:has(:focus-visible) {
+  z-index: 2;
+}
+
+.mat-drawer :focus-visible {
+  outline-color: variables.$focus-ring-color-on-dark;
+}
+
+// Material sets outline: none on expansion headers; the panel clips, so the ring goes inside.
+.mat-expansion-panel .mat-expansion-panel-header:focus-visible {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: -1px;
+}
+
+// Same for list items (Material sets outline: 0); dropdown options show a bar instead.
+.mat-mdc-list-item.mdc-list-item:focus-visible:not(.list-option-item) {
+  outline: 1px solid variables.$focus-ring-color;
+  outline-offset: -1px;
+}
+
+// Side menu: the row's own children paint over an outline on hover, so draw the ring as an overlay.
+.mat-drawer .mat-expansion-panel .mat-expansion-panel-header:focus-visible,
+.mat-drawer .mat-mdc-list-item.mdc-list-item:focus-visible:not(.list-option-item) {
+  outline: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    border: 1px solid variables.$focus-ring-color-on-dark;
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
 /* Override all Material Typography */
 * {
   letter-spacing: 0 !important;