fix(parental-lock): focus, tokens and phone width for lock UI (#1761)

libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.html

@@ -48,6 +48,9 @@
                 type="button"
                 mat-icon-button
                 class="search-inline__clear"
+                [attr.aria-label]="
+                    'EMBEDDED_MPV.PLAYER.CLEAR_SEARCH' | translate
+                "
                 (click)="clearSearch()"
             >
                 <mat-icon>close</mat-icon>

libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss

@@ -3,7 +3,6 @@
     gap: 10px;
     flex-direction: column;
     overflow: hidden !important;
-    min-width: 480px;
     max-width: 600px;
     max-height: 85vh !important;
 }
@@ -159,7 +158,7 @@
     min-width: 28px;
     padding: 0;
     line-height: 28px;
-    color: var(--mat-sys-on-surface-variant);
+    color: var(--app-eyebrow-color);
     flex-shrink: 0;
 
     mat-icon {
@@ -168,7 +167,10 @@
         height: 18px;
     }
 
+    // Locked reads as state, not only as a different glyph: accent colour
+    // plus the selection tint behind it.
     &--locked {
-        color: var(--mat-sys-primary);
+        color: var(--app-selection-color);
+        background: var(--app-selection-surface);
     }
 }

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss

@@ -337,20 +337,26 @@
     width: 100%;
     margin-top: 4px;
     padding: 8px 12px;
-    border: 1px dashed var(--mat-sys-outline-variant);
+    border: 1px dashed var(--app-separator);
     border-radius: 10px;
     background: transparent;
-    color: var(--mat-sys-on-surface-variant);
+    color: var(--app-body-color);
     font: inherit;
     font-size: 0.8125rem;
     text-align: left;
     cursor: pointer;
 
-    &:hover,
+    // Hover tints like the rail's other rows. Keyboard focus keeps the rail
+    // background so the ring holds >= 3:1 against what surrounds it.
+    &:hover:not(:focus-visible) {
+        background: var(--app-selection-surface);
+        color: var(--app-heading-color);
+    }
+
     &:focus-visible {
-        background: var(--mat-sys-surface-container);
-        color: var(--mat-sys-on-surface);
-        outline: none;
+        color: var(--app-heading-color);
+        outline: 2px solid var(--app-selection-color);
+        outline-offset: -2px;
     }
 
     mat-icon {

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.spec.ts

@@ -538,6 +538,7 @@ describe('GroupsViewComponent', () => {
                     ]),
                 }),
                 maxHeight: '90vh',
+                maxWidth: 'calc(100vw - 32px)',
                 width: '500px',
             })
         );

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.ts

@@ -579,6 +579,7 @@ export class GroupsViewComponent {
                 ...(lockedGroupTitles ? { lockedGroupTitles } : {}),
             },
             width: '500px',
+            maxWidth: 'calc(100vw - 32px)',
             maxHeight: '90vh',
         });
 

libs/ui/components/src/lib/parental-lock-pin-dialog/parental-lock-pin-dialog.component.scss

@@ -1,3 +1,13 @@
+// The theme declares no Material system colours, so the error colour is a
+// local token with a value per theme (>= 6:1 on the dialog surface in both).
+:host {
+    --pin-dialog-error-color: #b3261e;
+}
+
+:host-context(.dark-theme) {
+    --pin-dialog-error-color: #ffb4ab;
+}
+
 .pin-dialog__title {
     display: flex;
     align-items: center;
@@ -12,7 +22,7 @@
 
 .pin-dialog__description {
     margin: 0;
-    color: var(--mat-sys-on-surface-variant);
+    color: var(--app-body-color);
     font-size: 0.875rem;
 }
 
@@ -31,14 +41,14 @@
 
 .pin-dialog__error {
     margin: 0;
-    color: var(--mat-sys-error);
+    color: var(--pin-dialog-error-color);
     font-size: 0.8125rem;
 }
 
 .pin-dialog__note {
     margin: 0;
     font-size: 0.75rem;
-    color: var(--mat-sys-on-surface-variant);
+    color: var(--app-body-color);
 }
 
 @keyframes pin-dialog-shake {