fix: make keymap SVG keys findable with VoiceOver

package.json

@@ -4,7 +4,7 @@
   "author": "Ultimate Gadget Laboratories",
   "main": "electron/dist/electron-main.js",
   "version": "10.1.0",
-  "firmwareVersion": "17.2.0",
+  "firmwareVersion": "18.0.1",
   "deviceProtocolVersion": "4.19.0",
   "userConfigVersion": "15.0.0",
   "hardwareConfigVersion": "1.0.0",

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html

@@ -1,5 +1,7 @@
 <svg-keyboard [ngClass]="aLayerCssClasses"
               id="svg-keyboard-a"
+              [attr.aria-hidden]="visibleLayerName === LayerNames.A ? null : true"
+              [attr.inert]="visibleLayerName === LayerNames.A ? null : ''"
               [attr.isKeyboardVisible]="visibleLayerName === LayerNames.A"
               [attr.layerId]="aLayer.id"
               [backlightingMode]="backlightingMode"
@@ -24,6 +26,8 @@
 
 <svg-keyboard *ngIf="bLayer"
               id="svg-keyboard-b"
+              [attr.aria-hidden]="visibleLayerName === LayerNames.B ? null : true"
+              [attr.inert]="visibleLayerName === LayerNames.B ? null : ''"
               [attr.isKeyboardVisible]="visibleLayerName === LayerNames.B"
               [attr.layerId]="bLayer.id"
               [backlightingMode]="backlightingMode"

packages/uhk-web/src/app/components/popover/popover.component.html

@@ -139,7 +139,7 @@
                     (click)="toggleNote(noteTooltipRef)">
                 <fa-icon [icon]="faNoteSticky" aria-hidden="true"></fa-icon>
             </button>
-            <button class="btn btn-sm btn-default me-2" type="button" (click)="onCancelClick()"> Cancel</button>
+            <button class="btn btn-sm btn-default me-2" type="button" (click)="onCancelClick()">Cancel</button>
             <button class="btn btn-sm btn-primary" [class.disabled]="!keyActionValid" type="button"
                     (click)="onRemapKey()"> Remap key
             </button>

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html

@@ -14,6 +14,7 @@
            [capturingEnabled]="capturingEnabled"
            [attr.transform]="module.attributes.transform"
            [keyActions]="getKeyActions(module.id)"
+           [moduleId]="module.id"
            [moduleNavCircle]="module.moduleNavCircle"
            [moduleNavPath]="module.moduleNavPath"
            [selectedKey]="selectedKey"

packages/uhk-web/src/app/components/svg/keys/svg-icon-text-key/svg-icon-text-key.component.html

@@ -3,6 +3,7 @@
         [attr.height]="useHeight"
         [attr.x]="useX"
         [attr.y]="useY"
+         aria-hidden="true"
          stroke-width="0"
 >
 </svg:use>

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html

@@ -1,3 +1,4 @@
+<svg:title>{{ accessibleLabel }}</svg:title>
 <svg:rect #svgRec
           *ngIf="svgKey.type === 'rec'"
           class="svg-rec"
@@ -39,6 +40,9 @@
 </svg:g>
 
 <svg:g [attr.transform]="calcTransform()">
+<svg:text class="svg-keyboard-key__accessible-name"
+          [attr.x]="(svgKey?.width || 0) / 2"
+          [attr.y]="(svgKey?.height || 0) / 2">{{ accessibleLabel }}</svg:text>
 <svg:path *ngIf="hasNote && svgKey.width"
           class="note-marker"
           [attr.d]="noteMarkerPath"

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss

@@ -13,3 +13,11 @@
     fill: var(--color-keyboard-key-note-marker);
     pointer-events: none;
 }
+
+.svg-keyboard-key__accessible-name {
+    fill: currentcolor;
+    font-size: 1px;
+    opacity: 0.01;
+    pointer-events: none;
+    stroke: none;
+}

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -38,7 +38,8 @@ import {
     PlayMacroAction,
     SwitchKeymapAction,
     SwitchLayerAction,
-    SwitchLayerMode
+    SwitchLayerMode,
+    UserConfiguration,
 } from 'uhk-common';
 
 import { CaptureService } from '../../../../services/capture.service';
@@ -53,8 +54,10 @@ import { KeyModifierModel } from '../../../../models/key-modifier-model';
 import { LastEditedKey } from '../../../../models/last-edited-key';
 import { StartKeypressCapturingAction, StopKeypressCapturingAction } from '../../../../store/actions/app';
 import { KeyActionDragAndDropService } from '../../../../services/key-action-drag-and-drop.service';
+import { buildKeyAccessibleLabel } from '../../../../util/build-key-accessible-label';
 import { getColorsOf } from '../../../../util/get-colors-of';
 import { defaultUhkThemeColors } from '../../../../util/default-uhk-theme-colors';
+import { getDefaultQwertyKeyLabel } from '../../../../util/get-default-key-label';
 import { keyboardGreyRgbColor } from '../../../../util/rgb-color-contants';
 import { SvgKeyboardKey } from './svg-keyboard-key.model';
 
@@ -108,9 +111,12 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy {
     @Input() isActive = false;
     @Input() hostConnections: HostConnection[] = [];
     @Input() keyAction: KeyAction;
+    @Input() keyId = 0;
     @Input() svgKey: SvgKeyboardKey;
     @Input() capturingEnabled: boolean;
+    @Input() defaultUserConfiguration = new UserConfiguration();
     @Input() macroMap = new Map<number, Macro>();
+    @Input() moduleId = 0;
     @Input() lastEdited: boolean;
     @Input() lastEditedKey: LastEditedKey;
 
@@ -364,7 +370,11 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        if (changes['keyAction']) {
+        if (changes['keyAction']
+            || changes['defaultUserConfiguration']
+            || changes['keyId']
+            || changes['macroMap']
+            || changes['moduleId']) {
             this.setLabels();
         }
 
@@ -472,9 +482,9 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy {
         this.labelType = LabelTypes.OneLineText;
         this.labelSource = undefined;
         this.secondaryText = undefined;
-        this.accessibleLabel = 'Unassigned key';
 
         if (!this.keyAction) {
+            this.updateAccessibleLabel();
             return;
         }
 
@@ -630,7 +640,7 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy {
             this.labelSource = undefined;
         }
 
-        this.accessibleLabel = this.buildAccessibleLabel();
+        this.updateAccessibleLabel();
     }
 
     private blinkSvgRec(): void {
@@ -685,59 +695,20 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy {
         }
     }
 
-    private buildAccessibleLabel(): string {
-        if (!this.keyAction) {
-            return 'Unassigned key';
-        }
-
-        if (this.keyAction instanceof KeystrokeAction) {
-            const parts: string[] = [];
-
-            if (this.keyAction.hasActiveModifier()) {
-                parts.push(this.keyAction.getModifierList().join(' + '));
-            }
-
-            if (this.keyAction.hasScancode()) {
-                parts.push(this.mapper.scanCodeToText(this.keyAction.scancode, this.keyAction.type).join(' '));
-            }
-
-            if (parts.length === 0) {
-                parts.push('Keystroke');
-            }
-
-            if (this.keyAction.hasSecondaryRoleAction()) {
-                parts.push(`secondary role ${this.mapper.getSecondaryRoleText(this.keyAction.secondaryRoleAction)}`);
-            }
-
-            return parts.join(', ');
-        }
-
-        if (this.keyAction instanceof SwitchLayerAction) {
-            const layerName = this.layerOptionMap.get(this.keyAction.layer)?.name || 'unknown';
-            return `Switch to ${layerName} layer`;
-        }
-
-        if (this.keyAction instanceof SwitchKeymapAction) {
-            return `Switch to keymap ${this.keyAction.keymapAbbreviation}`;
-        }
-
-        if (this.keyAction instanceof PlayMacroAction) {
-            const macroName = this.macroMap.get(this.keyAction.macroId)?.name;
-            return macroName ? `Play macro ${macroName}` : 'Play macro';
-        }
-
-        if (this.keyAction instanceof MouseAction) {
-            return 'Mouse action';
-        }
-
-        if (this.keyAction instanceof ConnectionsAction) {
-            return 'Host connection action';
-        }
-
-        if (this.keyAction instanceof OtherAction) {
-            return 'Other action';
-        }
+    private updateAccessibleLabel(): void {
+        const physicalKeyLabel = getDefaultQwertyKeyLabel({
+            defaultUserConfiguration: this.defaultUserConfiguration,
+            keyId: this.keyId,
+            mapper: this.mapper,
+            moduleId: this.moduleId,
+        });
 
-        return 'Assigned key action';
+        this.accessibleLabel = buildKeyAccessibleLabel({
+            keyAction: this.keyAction,
+            layerOptionMap: this.layerOptionMap,
+            macroMap: this.macroMap,
+            mapper: this.mapper,
+            physicalKeyLabel,
+        });
     }
 }

packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html

@@ -41,20 +41,20 @@
     [attr.y]="modifierContainer.y" preserveAspectRatio="none">
     <svg viewBox="0 0 100 100" [attr.width]="shift.width" [attr.height]="shift.height" [attr.x]="shift.x" [attr.y]="shift.y"
         preserveAspectRatio="none" [class.disabled]="shift.disabled">
-        <svg:use [attr.xlink:href]="modifierIconNames.shift" stroke="none"/>
+        <svg:use [attr.xlink:href]="modifierIconNames.shift" aria-hidden="true" stroke="none"/>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="control.width" [attr.height]="control.height" [attr.x]="control.x" [attr.y]="control.y"
         preserveAspectRatio="none" [class.disabled]="control.disabled">
         <svg:text text-anchor="middle" alignment-baseline="middle" x="50" y="55" stroke="none">C</svg:text>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="option.width" [attr.height]="option.height" [attr.x]="option.x" [attr.y]="option.y"
         preserveAspectRatio="none" [class.disabled]="option.disabled">
-        <svg:use *ngIf="modifierIconNames.option" [attr.xlink:href]="modifierIconNames.option" stroke="none"/>
+        <svg:use *ngIf="modifierIconNames.option" [attr.xlink:href]="modifierIconNames.option" aria-hidden="true" stroke="none"/>
         <svg:text *ngIf="!modifierIconNames.option" text-anchor="middle" alignment-baseline="middle" x="50" y="55" stroke="none">A</svg:text>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="command.width" [attr.height]="command.height" [attr.x]="command.x" [attr.y]="command.y"
         preserveAspectRatio="none" [class.disabled]="command.disabled">
-        <svg:use *ngIf="modifierIconNames.command" [attr.xlink:href]="modifierIconNames.command" stroke="none"/>
+        <svg:use *ngIf="modifierIconNames.command" [attr.xlink:href]="modifierIconNames.command" aria-hidden="true" stroke="none"/>
         <svg:text *ngIf="!modifierIconNames.command" text-anchor="middle" alignment-baseline="middle" x="50" y="55" stroke="none">S</svg:text>
     </svg>
 </svg>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html

@@ -1,4 +1,4 @@
-<svg:use [attr.xlink:href]="icon" width="20" height="20" x="10" y="25">
+<svg:use [attr.xlink:href]="icon" width="20" height="20" x="10" y="25" aria-hidden="true">
 </svg:use>
 <svg:text
     [attr.x]="60"

packages/uhk-web/src/app/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html

@@ -1,4 +1,4 @@
-<svg:use [attr.xlink:href]="mouseIcon" width="20" height="20" x="8" y="25"></svg:use>
+<svg:use [attr.xlink:href]="mouseIcon" width="20" height="20" x="8" y="25" aria-hidden="true"></svg:use>
 <svg:text
     [attr.x]="60"
     [attr.y]="0"
@@ -7,4 +7,4 @@
     stroke="none">
         <tspan dy="45"> Move </tspan>
 </svg:text>
-<svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>
+<svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55" aria-hidden="true"></svg:use>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html

@@ -1,4 +1,4 @@
-<svg:use [attr.xlink:href]="mouseIcon" width="20" height="20" x="8" y="25"></svg:use>
+<svg:use [attr.xlink:href]="mouseIcon" width="20" height="20" x="8" y="25" aria-hidden="true"></svg:use>
 <svg:text
     [attr.x]="60"
     [attr.y]="0"
@@ -7,4 +7,4 @@
     stroke="none">
         <tspan dy="45"> Scroll </tspan>
 </svg:text>
-<svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>
+<svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55" aria-hidden="true"></svg:use>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html

@@ -1,4 +1,4 @@
-<svg:use [attr.xlink:href]="icon" width="20" height="20" x="4" y="25">
+<svg:use [attr.xlink:href]="icon" width="20" height="20" x="4" y="25" aria-hidden="true">
 </svg:use>
 <svg:text
     [attr.x]="60"

packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.html

@@ -3,6 +3,7 @@
          [attr.height]="svgHeight"
          [attr.x]="svgX"
          [attr.y]="svgHeight"
+         aria-hidden="true"
          stroke="none">
 </svg:use>
 <svg:g svg-secondary-role

packages/uhk-web/src/app/components/svg/keys/svg-switch-keymap-key/svg-switch-keymap-key.component.html

@@ -3,6 +3,7 @@
         [attr.height]="useHeight"
         [attr.x]="useX"
         [attr.y]="useY"
+         aria-hidden="true"
          stroke="none">
 </svg:use>
 <svg:text

packages/uhk-web/src/app/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.html

@@ -12,6 +12,7 @@
         [attr.height]="useHeight"
         [attr.x]="useX"
         [attr.y]="useY"
+         aria-hidden="true"
          stroke-width="0"
 >
 </svg:use>

packages/uhk-web/src/app/components/svg/module/svg-module.component.html

@@ -26,11 +26,14 @@
             [id]="key.id"
             [svgKey]="key"
             [backlightingMode]="backlightingMode"
+            [defaultUserConfiguration]="defaultUserConfiguration"
             [isActive]="selected && i === selectedKey.keyId"
             [keyAction]="keyActions && keyActions[i]"
+            [keyId]="i"
             [capturingEnabled]="capturingEnabled"
             [hostConnections]="hostConnections"
             [macroMap]="macroMap"
+            [moduleId]="moduleId"
             [lastEdited]="lastEdited"
             [lastEditedKey]="lastEditedKey"
             (keyClick)="onKeyClick(i, $event)"