tiCrypt for Everyone

Images have text alternatives; decorative images, such as avatars next to the user's name and settings illustrations, have empty alt text. Icon-only buttons and links have accessible names: a shared directive uses the tooltip text as the name when a control has no name of its own, and other icon buttons have an explicit label. Icons are hidden from assistive technology, true/false table cells are read as Yes or No, and embedded frames have titles. The charts panel, whose canvases have no text alternative, is not shown to users.

<button mat-icon-button tc-overlay-close aria-label="Close overlay (Esc)">
  <mat-icon svgIcon="close"></mat-icon>
</button>

<img class="logo" [src]="logoURL" alt="tiCrypt Login Logo" />

 * MatTooltip only describes its host (aria-describedby), and mat-icon is
 * aria-hidden, so an icon-only button whose purpose is only shown in its
 * tooltip has no accessible name. This directive runs next to every
 * matTooltip and, when the host is a button or link with no name of its own
 * (aria-label, aria-labelledby, title or text), uses the tooltip message as
 * its aria-label and keeps it in sync with the message.
 *
 * MatTooltip skips the aria-describedby when it matches the aria-label, so
 * screen readers do not read the text twice.
 */
@Directive({
  selector: "[matTooltip]",
})

Form fields use Angular Material form fields whose labels are programmatically associated with the input, and custom form controls take their names from the field label. Radio groups and checkbox lists have programmatic labels, label ids are unique, and repeated elements use per-item ids. Detail panels expose key/value lines as tables with row headers; panel, card, form section and wizard step titles are headings; and each main section has a level-one heading. Headings used only to style values, cells and control labels are presentational.

<mat-form-field>
  <mat-label>Name</mat-label>
  <input matInput type="text" formControlName="name" />

<table tc-table class="matrix bordered tc-bg-contrast">
  <thead>
    <tr>
      <th tc-col="name 1fr">Name</th>
      <th tc-col="desc 2fr">Description</th>
      <th tc-col="value 1fr">Value</th>
    </tr>
  </thead>

/** Numbered step of a flat stepper ("1 Image", "2 Hardware"). */
@Directive({
  selector: "div.tc-flat-step-header",
  host: { role: "heading", "aria-level": "3" },
  standalone: false,
})

The DOM order of the main layout matches the visual order: the labelled main navigation comes before the main content, and lists, toolbars and forms are laid out in source order. CSS ordering is used in a few places, such as when a user moves the taskbar to the right or bottom, or to place a chart beside its legend; these changes do not alter meaning. Dialogs and menus are rendered in an Angular CDK overlay container, and focus moves into dialogs when they open.

<nav class="taskbar" aria-label="Main navigation">

Instructions identify controls and items by their visible labels, such as New VM, Table or List, the user menu, the Terminal hub list and the folder tree; location words are given only as extra help, and no instruction uses an icon in place of a word. Escrow key parts the user holds are marked with a check mark as well as color, and the instruction names the check mark. Error and warning messages are given in text.

} @else {
  <h4 class="row tc-error">
  <mat-icon class="tc-16px tc-error margin-right-half" svgIcon="alert-circle-outline"></mat-icon>
  Hardware profile missing or inaccessible
  </h4>

@if (nameFC.invalid) {
  <mat-error> {{ nameFC.errorMessage }} </mat-error>
}

Click New VM above to get started.

tiCrypt does not restrict display orientation. The viewport meta tag and web app manifest do not lock orientation, and no style or script locks the screen orientation, so content is displayed in portrait or landscape as the browser or device presents it.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Fields that collect the user's own information declare their purpose with HTML autocomplete tokens (username, given-name, family-name, email and organization-title) on the registration and escrow registration pages, and on the Edit information form when users edit their own details. When an administrator edits another user, autofill is turned off. Email fields use type="email". Password, passphrase and key-file fields intentionally carry no autofill token.

<mat-form-field>
  <mat-label>First Name*</mat-label>
  <input
    matInput
    type="text"
    formControlName="firstName"
    autocomplete="given-name"
  />

Color is not the only visual means of conveying information. Selected rows and tiles, current navigation and list items, and keyboard cursors show a bar, frame or outline in addition to any color change, in all four themes. VM state is written as text in detail headers and lists and shown with a distinct shape for each state. User account states use distinct icons with text, links within text are underlined, and form errors appear as text.

export const STATE_TO_ICON: { readonly [State in UserState]: ColoredIcon } = [
  new ColoredIcon("check-circle", "var(--green)"), // Active
  new ColoredIcon("close-circle", "var(--error)"), // Inactive

<div class="listitem-title-chip active" [class.owner]="vmConf?.owners.length === 1">
  <mat-icon class="tc-16px" svgIcon="crown"></mat-icon>

  <span>
    {{ vmConf?.owners.length > 1 ? "Co-owner" : "Owner" }}
  </span>

@if (!isUnknown()) {
  @if (stateClass() === "error") {
    <!-- An exclamation mark, not only the color, sets an error apart from running -->
    <mat-icon
      class="tc-16px dot-icon tc-error"
      svgIcon="alert-circle"
      [matTooltip]="computeTooltip()"
    />
  } @else {
    <div
      class="dot"
      [class]="stateClass()"
      [matTooltip]="computeTooltip()"
    ></div>
  }

host: { role: "img", "[attr.aria-label]": "stateLabel()" },

// bar on the leading edge, so selection is not shown by the tint's color alone (WCAG 1.4.1)
& > :first-child {
  box-shadow: inset 4px 0 0 var(--action-primary);
}

tiCrypt does not play notification sounds, alert tones or background audio. Audio is heard only when a user opens an audio or video file in the file preview. Audio files use the browser's native player and do not start automatically. Video files start playing when opened, and the player provides pause, mute and a volume slider that work independently of the system volume. tiCrypt Connect adds no audio playback of its own.

setVolume(): void {
  this.player.volume = this.volume / 100;
  this.computeVolumeIcon();
}

<audio controls controlsList="nodownload" [src]="url"></audio>

tiCrypt has four color themes: Classic, Dark, Cool Gray and High Contrast. Each theme defines its colors as CSS custom properties, with separate colors for text and for filled backgrounds under white text. From front-end 2.17.15, every measured text color meets 4.5:1 in all four themes, including the hover states of colored text, and an automated test checks the theme colors on every change.

// text colors are light enough for 4.5:1 on the backgrounds and hovers below (WCAG AA);
// the -fill colors are dark enough for white text on top of them
--action-primary: #{$blue-100};
--action-primary-fill: #{$blue-800};

--accent: #{$indigo-500};
--accent-yellow: #{$yellow-600};

--error: #{$red-200};
--error-fill: #{$red-800};
--warn: #{$orange-300};
--warn-fill: #{$deeporange-900};
--ok: #{$green-200};
--ok-fill: #{$green-800};

// text colors are dark enough for 4.5:1 on the backgrounds and their own hovers below (WCAG AA);
// the -fill colors are dark enough for white text on top of them
--action-primary: #{$blue-900};
--action-primary-fill: #{$blue-700};

--error: #{$red-900};
--error-fill: #{$red-700};
--warn: #{$deeporange-900};
--warn-fill: #{$deeporange-900};
--ok: #{$green-900};
--ok-fill: #{$green-800};

.mdc-button--raised.tc-primary {
  background: var(--action-primary-fill) !important;

  &:hover {
    background: var(--contrast) !important;
  }
}

test(`${theme}: text colors have 4.5:1 on the backgrounds and their hovers`, () => {
  for (const [fg, hovers] of Object.entries(TEXT)) {
    for (const bg of backgrounds) {
      for (const hover of [undefined, ...hovers]) {
        const value = worst(vars, fg, bg, hover);
        assert.ok(value >= 4.5, `--${fg} on --${bg}${hover ? ` + --${hover}` : ""} is ${value.toFixed(2)}:1`);
      }
    }
  }
});

Text can be enlarged to 200% with the browser's zoom, which tiCrypt does not block: the viewport does not restrict scaling, and font sizes are mostly set in rem units. Ctrl/Cmd+Plus, Ctrl/Cmd+Minus and Ctrl/Cmd+mouse wheel apply tiCrypt's own zoom, which enlarges the root font size.

Interface text is rendered as HTML text, not as images of text. The sign-in logo is an image with alt text and is a logotype, which is exempt. System Settings shows small illustrations, some of them screenshots, beside each setting's name and description, which are provided as text.

Font sizes and spacing are set mostly in rem units, and the interface does not fix letter or word spacing, so users can increase line height, paragraph spacing, letter spacing and word spacing through browser settings or user style sheets.

Tooltips are Angular Material tooltips, which close with Escape, stay open while the pointer moves onto them, and remain until hover or focus moves away. Menus, select lists and autocomplete panels are Angular Material or CDK overlays that close with Escape, as does tiCrypt's context menu. The video player controls appear when the mouse moves over the player and stay visible while the pointer rests on them or one of them has keyboard focus.

overlayRef.keydownEvents().subscribe((ev) => {
  if (ev.keyCode === ESCAPE && !hasModifierKey(ev)) {
    menuRef.dispose();
    this.currentMenu = undefined;
    if (origin) {
      (origin.nativeElement.offsetParent as HTMLElement).focus();
    }
  }

// keyboard focus on a control keeps the controls up; a mouse click does not (no :focus-visible)
&.hover .actions-container,
& .actions-container:has(:focus-visible) {
  opacity: 1 !important;
}

All functionality is operable from the keyboard. Sortable table headers are focusable, sort with Enter or Space and expose aria-sort. Lists, tiles, table rows, settings, cards and menu triggers are focusable and activated with Enter or Space, and folder trees use the arrow keys. Vault items can be moved or copied through a folder-picker dialog, custom fields reordered with Move up and Move down buttons, and table auto-refresh turned on with a toggle button. Video seeking uses skip buttons and keyboard shortcuts.

<table
  id="vault-table"
  tc-table
  [class.compact]="compactTable"
  [sortBy]="sortBy"
  (sortByChange)="sortBy = $event; sortRows()"
  tabindex="0"

this.keydownListner = (event) => {
    if (event.key === " ") {
        event.preventDefault();
        if (this.viewing?.[this.rowIndex]) {
            this.rightClick(
                this.viewing[this.rowIndex],
                new MouseEvent('click', {}),
                this.tableRows.toArray()[this.rowIndex]);

@HostListener("keydown", ["$event"])
onKeydown(ev: KeyboardEvent): void {
  // Only when the host itself has focus, so Enter on a button or field inside it,
  // or on a nested detail link, keeps doing what it does
  if (!this.needsKeyboard || ev.key !== "Enter" || ev.target !== this.host) {
    return;
  }

  // The key is used up here; the click below follows the propagateClick rule
  ev.preventDefault();
  ev.stopPropagation();

  // Run every click handler on the host, as a mouse click would
  this.host.click();

@HostListener("keydown", ["$event"])
onKeydown(event: KeyboardEvent): void {
  if (
    event.target === this.elem &&
    (event.key === "Enter" || event.key === " ") &&
    this.keyboardSortable
  ) {
    event.preventDefault();
    event.stopPropagation();
    this.table.columnClicked(this.column);

Dialogs keep focus inside while open, return focus to the triggering element when closed, and most close with Escape; dialogs that do not close with Escape provide their own buttons. Overlay panels close with Escape. In the VM terminal, Tab, Shift+Tab and Escape go to the remote shell, and Ctrl+Shift+F moves focus to the next control without sending input to the shell; a hint under each terminal, the Terminal keybindings menu and the Terminal hub help describe it.

config.disableClose = disableCancel;
config.hasBackdrop = true;
config.restoreFocus = true;
config.role = "dialog";

this.keydownSub = this.overlayRef
  .keydownEvents()
  .subscribe((ev) => {
    if (ev.key === "Escape") {
      this.close();
    }
  });

this.term.attachCustomKeyEventHandler((ev) => {
  const key = ev.key.toLowerCase();
  if (
    key === "f" &&
    ev.ctrlKey &&
    ev.shiftKey &&
    !ev.altKey &&
    !ev.metaKey
  ) {
    ev.preventDefault();
    ev.stopPropagation();
    if (ev.type === "keydown") {
      this.leaveTerminal();

Keyboard shortcuts are listed in a help dialog opened with ?, and they do not run while focus is in a text field, select element or editable area. Single-character shortcuts, such as T for tasks, ? for the shortcut list, N for a new item and Space in the video player, can be turned off with the "Single-key keyboard shortcuts" switch in User settings, saved for each user. When it is off, only shortcuts that use Ctrl, Alt or Command work.

this.hotkeys
  .addShortcut({ keys: "e", description: "Open CSV Menu" })
  .subscribe((e) => {
    if (!this.hasFocusWithin()) {
      return;
    }
    this.csvTrigger?.open();
  }),

addShortcut(options: Hotkey): Observable<KeyboardEvent> {
  if (!isSingleKeyShortcut(options.keys)) {
    return super.addShortcut(options);
  }

  // Keep the key's normal action (e.g. Space pressing a button) while the shortcut is off
  const preventDefault = options.preventDefault ?? true;
  return super.addShortcut({ ...options, preventDefault: false }).pipe(
    filter(() => this.singleKeyShortcuts),
    tap((e) => {
      if (preventDefault) e?.preventDefault();

The tiCrypt web application and tiCrypt Connect contain no carousels, scrolling text or auto-advancing content. Animations run once and last one second or less, such as a brief highlight when a task finishes. Progress spinners appear only while an operation is running. Live status such as VM state, task progress and storage usage updates automatically because it reflects current system state. Automatic table refresh is off until the user turns it on and can be turned off the same way.

.task-item.task-success {
  animation: task-flash-ok 1s ease-out 0s;
}

.task-item.task-failure {
  animation: task-flash-error 1s ease-out 0s;
}

refreshContinously(): void {
  if (this.refreshCancel) {
    this.cancelAutoRefresh();
  } else {
    this.refreshCancel = window.setInterval(() => {
      this.refresh(false);
    }, 3_000);
  }

The application contains no flashing content. Animations are single, short transitions; for example, a task row fades to a highlight color and back once over one second when it completes or fails. Loading indicators use Angular Material progress spinners and bars. Video files that users open in the built-in player are user content.

@keyframes task-flash-ok {
  0% {
    background: transparent;
  }

  50% {
    background: var(--hover-extra-ok);
  }

A "Skip to main content" link is the first focusable element on every signed-in page, in the browser and in tiCrypt Connect. It is hidden until it receives keyboard focus and then appears at the top of the window; activating it moves focus to the page content, which is a main landmark. In the browser, the section links are in a navigation landmark labelled "Main navigation".

<nav class="taskbar" aria-label="Main navigation">

<a class="skip-link" href="#main-content" (click)="$event.preventDefault(); mainContent.focus()">Skip to main content</a>

<main id="main-content" tabindex="-1" #mainContent>
  <router-outlet></router-outlet>
</main>

The browser tab title names the current page, followed by the deployment name set by the institution, for example "Vault - tiCrypt", "Virtual Machines - tiCrypt", "Management - tiCrypt" and "Log in - tiCrypt". The title changes whenever the user moves to another section. When there are unread notifications, their count comes first, for example "(3) Vault - tiCrypt".

{
    path: "vault",
    title: "Vault",
    component: VaultView,
},
{
    path: "management",
    title: "Management",
    component: ManagementWrapper,
    canActivate: [RouteGuard],
},

private render(): void {
  document.title =
    (this.unread > 0 ? `(${this.unread}) ` : "") +
    (this.section ? `${this.section} - ` : "") +
    this.settings.appName;
}

Dialogs and full-page panels, including the unlock and MFA panels, move focus to their first control when opened, keep Tab inside while open, and return focus to the control that opened them when closed or minimized. The actions menu takes focus when opened from the keyboard and supports the arrow keys. All content of the terms-of-use, CUI and last sign-in dialogs is in the Tab order, and no control uses a positive tabindex. Elsewhere, focus follows the on-screen order.

config.hasBackdrop = true;
config.restoreFocus = true;
config.role = "dialog";

private trapFocus(
  overlayRef: cdk.OverlayRef,
  focusedOutside: (element: HTMLElement) => void,
): FocusTrap {
  const pane = overlayRef.overlayElement;
  const focusTrap = this.focusTrapFactory.create(pane);
  afterNextRender(
    () => {
      const closed = !pane.isConnected;
      if (closed || pane.contains(document.activeElement)) return;

      const outside = focusedElement();
      if (outside) focusedOutside(outside);
      if (!focusTrap.focusInitialElement()) {
        pane.tabIndex = -1;
        pane.focus();
      }

Text links and menu items describe their destination or action, for example "Create new user account" and context-menu items named after the action. Each main navigation link (Vault, Virtual Machines, Management), in the browser and in the tiCrypt Connect title bar, is named after its label, also when only its icon is shown. One file-preview message uses the link text "link", explained by its surrounding sentence.

<button class="context-menu-item" (click)="actionClicked(action)">
  <mat-icon
    [class]="'tc-18px ' + action.color"
    [svgIcon]="action.icon"
  ></mat-icon>

  {{ action.name }}
</button>

  role="tab"
  aria-label="Vault"
  matTooltip="Vault"
  [matTooltipPosition]="vertical ? 'right' : 'below'"
>
  <mat-icon svgIcon="safe-square-outline"></mat-icon>

  <span>Vault</span>
</a>

The three main sections (Vault, Virtual Machines, Management) are linked from a persistent navigation bar on every screen, and Alt+Left and Alt+Right cycle between them. Within a section, sub-views are reached from its side panel or menu, and lists have a search filter to locate their items.

this.hotkeys
  .addShortcut({
    keys: "alt.left",
    description: "Change Navigation Left",
  })
  .subscribe((e) => this.changeNavigation(e, navRoutes)),

Most dialogs have a descriptive title marked up as an h2 heading, and panels use h2 to h4 headings that name their content. Form fields have visible labels (Angular Material labels on almost all form fields). In grid tables, column headers expose sort direction with aria-sort; in simpler tables, sort direction is shown by an arrow only. Some toolbar search fields are identified by placeholder text only.

<h2 class="tc-modal-header" mat-dialog-title>{{ input.title }}</h2>

<mat-form-field>
  <mat-label>First Name*</mat-label>
  <input
    matInput
    type="text"
    formControlName="firstName"
  />

Every focusable control shows a 2px solid outline, offset 2px, when it receives keyboard focus. The outline uses the theme's action color, which has at least 3:1 contrast against the page backgrounds in all four themes; on blue toolbars it uses the toolbar's text color. Form fields mark focus with their highlighted border, and video player controls stay visible while one of them has keyboard focus.

&:focus:not([disabled]) {
  outline: 1px solid var(--primary);
}

:focus-visible:not([tabindex="-1"], [class^="ag-"], [class*=" ag-"], .mat-mdc-form-field-infix *) {
  outline: 2px solid var(--action-primary) !important;
  outline-offset: 2px !important;
}

No function requires multipoint or path-based gestures. Files and directories can be uploaded with the Upload button menu as well as by drag-and-drop. The video timeline can be set with a single click or the arrow keys as well as by dragging. Other drag interactions, such as resizing panels and reordering custom fields, depend only on start and end points.

<button mat-menu-item class="context-menu-item" (tc-import-file)="vaultExplorer?.upload($event)">
    <mat-icon svgIcon="file-multiple"></mat-icon>
    Files
</button>
<button mat-menu-item class="context-menu-item" (tc-import-directory)="vaultExplorer?.upload($event)">
    <mat-icon svgIcon="folder"></mat-icon>
    Directories

this.hotKeys
  .addShortcut({
    keys: "left",
    description: "Seek left 3s",
  })
  .subscribe(() => {
    this.skip(-3);
  }),

Controls act on the click event, which completes when the pointer is released, and dragging the video timeline sets the position on release. The long-press action of a table's Refresh button (turn automatic refresh on or off) runs when the button is released after being held, and moving the pointer off the button before releasing cancels it.

timelineUp(event: MouseEvent) {
  if (this.time !== this.player.currentTime) {
    this.player.currentTime = this.time;
  }
  this.dragging = false;
}

this.sub = mouseDown$
  .pipe(
    switchMap(() => {
      const pressedAt = Date.now();
      return mouseUp$.pipe(
        take(1),
        takeUntil(mouseLeave$),
        filter(() => Date.now() - pressedAt >= this.duration),
      );
    }),
  )
  .subscribe(() => this.longPress.emit());

Controls with visible text use that text as their accessible name, and where an aria-label is added it contains the visible text or tooltip, for example the Select all button, the main navigation links and the drive selector's "Clear selected drive" button. An automated test checks every template for an aria-label that does not contain its element's tooltip text.

  (click)="toggleSelectAll()"
  [attr.aria-label]="state ? deselectText : selectText"
  [class.compact]="compact"
>
  <mat-icon [svgIcon]="selIndicatorIcon"></mat-icon>

  @if (!compact) {
    <span>{{ state ? deselectText : selectText }}</span>

The root html element sets lang="en" on the application page and on the inbox and multi-factor authentication pages. All interface text is written in English; the product has no translation layer.

<!doctype html>
<html lang="en">

Receiving focus does not navigate, submit a form or open a dialog. Focus handlers only update the visual focus state or move focus inside the same widget, for example from the file list to its current row. Sidebar and navigation items act only when the user activates them by click or keyboard.

this.focusListner = (ev: Event) => {
    this.focusService.push(table);
    this.focused.add(this.viewing[this.rowIndex]?.entryName);
};

if (event.key === "Enter") {
    event.preventDefault();
    this.doubleClick(this.viewing[this.rowIndex]);
    return;

Changing a field value does not navigate, submit a form or open a dialog. Filter, sort and view selectors update the current list in place, and forms submit only from an explicit button or the Enter key.

<mat-select
  class="filter-select margin-right-half"
  [(value)]="filterType"
  (selectionChange)="updateQuery()"
>

<form
  id="group-rename-form"
  class="tc-modal-body"
  mat-dialog-content
  [formGroup]="form"
  (ngSubmit)="renameGroup()"
>

The main navigation (Vault, Virtual Machines, Management) is rendered once by the main page layout, so it appears in the same place and order in every section; links the user has no permission for are omitted. Users can move the navigation bar to the top, left, right or bottom of the window in theme settings, and the chosen position applies to all sections.

<a
  class="nav-link"
  routerLink="/vault"
  routerLinkActive
  #vault="routerLinkActive"

export type ToolbarPosition = "top" | "left" | "right" | "bottom";

Actions are defined with a shared model that pairs each action with an icon and a name, and are rendered by the same toolbar, context menu and confirmation components in every section. Deletion generally uses the delete icon with the label "Delete", and permanent deletion uses the delete-forever icon. Wording varies in a few places, for example "Delete" in the Vault trash and "Permanently delete" in the VM file explorer.

export interface ActionSpec {
  icon: string; // Icon to display in compact view. This is a material icon name.
  name: string; // Name of the action, displayed in compact view

When a form field fails validation, a text message below the field states the problem, for example "You must enter a name", "Must be between 1 and 1440 minutes" or "Must be after today". The message is announced through a polite live region and linked to the input with aria-describedby, and Angular Material sets aria-invalid on the input. This includes the custom field editor's choice input. Error text is not hidden by compact field styling.

@if (nameFC.invalid) {
  <mat-error> {{ nameFC.errorMessage }} </mat-error>
}

if (strVal.length > maxLength) {
  const msg = `May not exceed ${maxLength} characters`;
  this.errorMessage = msg;
  return ngFormsError(msg);

<mat-form-field>
  <mat-label>Name</mat-label>
  <input matInput type="text" formControlName="name" />
  @if (nameFC.invalid) {
    <mat-error> {{ nameFC.errorMessage }} </mat-error>
  }

Form fields have visible labels, and format rules and limits appear as hint text below the field. Required fields are marked with an asterisk and expose their required state to assistive technology, including custom size, duration, time, list and item selector inputs, whose inputs are tied to the field label. Search boxes, toolbar filters and view-mode drop-downs have accessible names, and placeholders are not used as the only label. Registration and VM setup show numbered steps.

<mat-form-field>
  <mat-label>Email Address</mat-label>
  <input
    matInput
    type="email"
    formControlName="email"
    [required]="true"
  />

<div class="tc-flat-step-header">
  <span class="number"> 3 </span>

  Home drive
</div>

override hasValidator(validator: NgFormsValidator): boolean {
  return (
    isRequiredValidator(validator, this.overrideRequired ?? this.required) ||
    super.hasValidator(validator)
  );
}

Validation messages state what is expected: required fields, maximum length ("May not exceed N characters") and format rules such as "Must be a valid IPv4 address". Weak passwords show a suggestion from the zxcvbn strength checker, and mismatched passwords show "Passwords do not match". Storage and transfer limits state the allowed or available size. Key-file errors at sign-in say what is wrong with the file; failed password attempts show a generic message for security reasons.

export const MAC_ADDRESS_PATTERN: PatternRule = {
  regex: /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
  desc: "Must be of the form XX:XX:XX:XX:XX:XX where X's are HEX digits",
};

return score < minStrength
  ? feedback?.suggestions?.[0] || "Not strong enough"

this.error =  `Available space is ${formatBytes(available)} bytes but you need ${formatBytes(this.totalSize)} bytes`;

Destructive actions open a confirmation dialog that names the action and the number of affected items, with Cancel focused first; some require typing a confirmation phrase. This includes deleting teams, projects, certifications or VM configurations from an onboard template and removing everyone else's access to a drive. Files deleted in the Vault go to trash and can be restored before permanent deletion.

this.modals.confirmFirst({
    title: `Delete ${entries.length} item(s) permanently from trash`,
    body: "The selected items will be permanently deleted.",
    notice: DELETE_CONSEQUENCES,
    acceptLabel: "Delete items",
    destructive: true

<button mat-button modal-cancel cdkFocusInitial>Cancel</button>

private confirmDeleteFromTemplate(
  count: number,
  singular: string,
  plural: string,
): Promise<void> {
  const quantity = count === 1 ? `1 ${singular}` : `${count} ${plural}`;
  return this.modals.confirmFirst({
    title: `Delete ${quantity} from the onboard template?`,
    body: `The selected ${count === 1 ? singular : plural} will be removed from the onboard template. Users who were already onboarded are not affected.`,
    destructive: true,
    acceptLabel: `Delete ${quantity}`,
  });
}

Per the WCAG 2.1 errata and WCAG 2.2, this criterion is always satisfied for content using HTML. The interface is built from Angular templates, and Angular's compiler rejects mismatched tags at build time. Issues that affect assistive technology, such as repeated IDs or controls nested inside other controls, are reported under 1.3.1 and 4.1.2.

Standard Angular Material and CDK components expose name, role and state. Folder trees use tree and treeitem roles with level, expanded and selected states; file tables are grids and file tiles are listboxes, both reporting selection; accordion headers report whether they are expanded; navigation items mark the current view; and toggles report their pressed state. No control is nested inside another button or menu item, and icon-only buttons, radio buttons and frames have accessible names.

<mat-checkbox
  class="permission-checkbox"
  [checked]="perm[4]"
  [disabled]="!havePermission(perm)"
  (change)="toggle(cat, perm)"
>
  {{ perm[2] }}
</mat-checkbox>

<div
  class="tc-ft-row s36 layout-row border-radius"
  role="treeitem"
  [attr.aria-level]="level + 1"
  [attr.aria-expanded]="node.noExpand ? null : node.isOpen"
  [attr.aria-selected]="isDeepestVisibleAncestor(node)"

Success and error notifications are Angular Material snack bars, announced through a polite live region, and recent messages can be reviewed in Message History. Sign-in and unlock failure messages appear in a status region that is always present, inline notices are polite status regions, and the task tray announces when a background task starts, finishes, fails, is canceled or can be undone. Form field errors are in Angular Material's polite live region.

const snackBarRef = this.snackBar.open(message, optAction?.name, {
  panelClass: "tc-snack-bar-" + theme,
  duration,
});

<div class="tc-flat-step" aria-live="polite" id="homeDrive" [class.disabled]="!brickFC?.getValue()">

<!-- Stays in the DOM so screen readers announce the sign-in error -->
<div role="status" [class.fake-password]="!!passwordFC.loginError">
  @if (passwordFC.loginError) {
    <span>{{ passwordFC.loginError }}</span>
  }
</div>

// Polite live region, so screen readers announce notices that appear or change
host: { role: "status" },