From f52091fe630eadbcc95f3f775c39509b79469612 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A1szl=C3=B3=20Monda?= Date: Tue, 28 Jul 2026 09:44:03 +0200 Subject: [PATCH 1/2] fix: improve keyboard access for click-only controls Replace faux buttons in the Agent UI with real buttons so keyboard and screen reader users can activate tabs, expanders, and icon actions without relying on mouse-only interactions. Co-authored-by: Cursor --- .../editable-text.component.html | 19 +++-- .../editable-text.component.scss | 12 ++- .../macro/header/macro-header.component.html | 33 +++++--- .../macro/header/macro-header.component.scss | 6 ++ .../macro/item/macro-item.component.html | 49 ++++++++++-- .../macro/item/macro-item.component.scss | 32 ++++++++ .../components/popover/popover.component.html | 17 ++-- .../components/popover/popover.component.scss | 3 +- .../tab/macro/macro-tab.component.html | 28 ++++--- .../side-menu/side-menu.component.html | 79 +++++++++++++------ .../side-menu/side-menu.component.scss | 23 +++++- .../user-configuration-history.component.html | 40 +++++----- 12 files changed, 242 insertions(+), 99 deletions(-) diff --git a/packages/uhk-web/src/app/components/editable-text/editable-text.component.html b/packages/uhk-web/src/app/components/editable-text/editable-text.component.html index bed3710a25f..aaddb688bdf 100644 --- a/packages/uhk-web/src/app/components/editable-text/editable-text.component.html +++ b/packages/uhk-web/src/app/components/editable-text/editable-text.component.html @@ -1,16 +1,15 @@
- - {{ placeholder }} - + - - +
diff --git a/packages/uhk-web/src/app/components/editable-text/editable-text.component.scss b/packages/uhk-web/src/app/components/editable-text/editable-text.component.scss index 348cea73754..48eeb8a9840 100644 --- a/packages/uhk-web/src/app/components/editable-text/editable-text.component.scss +++ b/packages/uhk-web/src/app/components/editable-text/editable-text.component.scss @@ -1,7 +1,7 @@ :host { margin-top: 0.5em; - span.placeholder { + .placeholder { color: gray; display: inline-block; @@ -10,11 +10,17 @@ } } - span.editable, - span.placeholder { + .editable, + .placeholder { cursor: pointer; } + .editable-text__trigger { + color: inherit; + text-decoration: none; + white-space: normal; + } + textarea.text-editor { display: block; width: 100%; diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.html b/packages/uhk-web/src/app/components/macro/header/macro-header.component.html index 34de6eba06a..80d4c61fc39 100644 --- a/packages/uhk-web/src/app/components/macro/header/macro-header.component.html +++ b/packages/uhk-web/src/app/components/macro/header/macro-header.component.html @@ -4,19 +4,26 @@ maxParentWidthPercent="0.8" [selectAfterInit]="isNew" (ngModelChange)="editMacroName($event)"> - - + +
Used on: diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss b/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss index 469b7e2e536..0fbd50748e4 100644 --- a/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss +++ b/packages/uhk-web/src/app/components/macro/header/macro-header.component.scss @@ -3,6 +3,9 @@ font-size: 0.75em; top: 7px; position: relative; + color: inherit; + text-decoration: none; + border: 0; &:hover { cursor: pointer; @@ -15,6 +18,9 @@ top: 7px; margin-right: 15px; position: relative; + color: inherit; + text-decoration: none; + border: 0; &:hover:not(.disabled) { cursor: pointer; diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.html b/packages/uhk-web/src/app/components/macro/item/macro-item.component.html index 27896356aaa..bbb863e7b59 100644 --- a/packages/uhk-web/src/app/components/macro/item/macro-item.component.html +++ b/packages/uhk-web/src/app/components/macro/item/macro-item.component.html @@ -3,16 +3,33 @@ -
+
- - + + +
@@ -25,9 +42,27 @@ Command: - - - + + +
-
diff --git a/packages/uhk-web/src/app/components/popover/popover.component.scss b/packages/uhk-web/src/app/components/popover/popover.component.scss index 620da293643..94ceacd8141 100644 --- a/packages/uhk-web/src/app/components/popover/popover.component.scss +++ b/packages/uhk-web/src/app/components/popover/popover.component.scss @@ -90,7 +90,7 @@ position: relative; z-index: 2; - a.active { + .menu-tabs--item.active { border-bottom: 1px solid var(--color-popover-bg-light); } } @@ -99,6 +99,7 @@ .menu-tabs--item { display: flex; align-items: center; + width: 100%; fa-icon { margin-right: 0.25em; diff --git a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html index 312f44af1e6..4ce749550b1 100644 --- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html +++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html @@ -31,15 +31,16 @@ - - @@ -53,16 +54,19 @@ -
-
    +
    • Device - +
      -
        +
        • @@ -142,11 +152,16 @@
          Modules - +
          -
        • -
          - {{ node.label }}… +
          -           @@ -45,12 +45,13 @@

          {{ fileInfo.timestamp }} - - {{ fileInfo.displayText }} - + @@ -69,12 +70,13 @@

          {{ fileInfo.timestamp }} - - {{ fileInfo.displayText }} - + From 3dc610198311faca216ae75637abd6734510e567 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A1szl=C3=B3=20Monda?= Date: Tue, 28 Jul 2026 09:57:22 +0200 Subject: [PATCH 2/2] fix: add keyboard activation to SVG key remapping Make SVG keyboard keys focusable and activatable from the keyboard, preserve screen reader labels, and avoid restoring mouse-triggered focus so the remap popover stays accessible without adding distracting pointer-only focus rings. Co-authored-by: Cursor --- .../svg-keyboard-key.component.scss | 6 + .../svg-keyboard-key.component.ts | 119 +++++++++++++++++- .../svg/module/svg-module.component.html | 1 - .../svg/wrap/svg-keyboard-wrap.component.ts | 11 ++ .../uhk-web/src/app/models/svg-key-events.ts | 1 + 5 files changed, 134 insertions(+), 4 deletions(-) diff --git a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss b/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss index c8d6865f425..d8b7c4e6948 100644 --- a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss +++ b/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss @@ -2,3 +2,9 @@ cursor: pointer; outline: none; } + +:host(:focus), +:host(:focus-visible) { + outline: none; + box-shadow: none; +} diff --git a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts b/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts index 11f8984724b..0b661bb77e4 100644 --- a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts +++ b/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts @@ -125,6 +125,7 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { recordAnimation: string; recording: boolean; labelType: LabelTypes; + accessibleLabel = 'Unassigned key'; // eslint-disable-next-line @typescript-eslint/no-explicit-any labelSource: any; @@ -140,6 +141,7 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { private layerOptionMap = initLayerOptions(); private isMouseMoveDispatched = false; private isMouseHover = false; + private isFocused = false; constructor( private sanitizer: DomSanitizer, @@ -170,6 +172,17 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { return this.fillColor; } + @HostBinding('attr.role') + readonly role = 'button'; + + @HostBinding('attr.tabindex') + readonly tabIndex = 0; + + @HostBinding('attr.aria-label') + get ariaLabel(): string { + return this.accessibleLabel; + } + @HostBinding('attr.fill') get fill(): SafeStyle { return this.fillColor; @@ -182,7 +195,7 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { @HostBinding('attr.stroke-width') get strokeWidth(): SafeStyle { - return this.isActive ? '3' : '1'; + return this.isActive || this.isFocused ? '3' : '1'; } @HostBinding('style') @@ -199,20 +212,51 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { @HostListener('click', ['$event']) onClick(e: MouseEvent) { + this.activateKey(e.shiftKey, e.altKey, false); + } + + @HostListener('keydown', ['$event']) + onHostKeyDown(e: KeyboardEvent) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + e.stopPropagation(); + this.activateKey(e.shiftKey, e.altKey, true); + } + } + + @HostListener('focus') + onFocus() { + this.isFocused = true; + this.setColors(); + } + + @HostListener('blur') + onBlur() { + this.isFocused = false; + this.setColors(); + } + + private activateKey(shiftPressed: boolean, altPressed: boolean, keyboardTriggered: boolean) { this.reset(); this.keyClick.emit({ keyTarget: this.element.nativeElement, - shiftPressed: e.shiftKey, - altPressed: e.altKey + keyboardTriggered, + shiftPressed, + altPressed }); this.pressedShiftLocation = -1; this.pressedAltLocation = -1; + + if (!keyboardTriggered) { + setTimeout(() => this.element.nativeElement.blur()); + } } @HostListener('mousedown', ['$event']) onMouseDown(e: MouseEvent) { if ((e.which === 0 || e.button === 0)) { + e.preventDefault(); this.mouseMoveService.leftButtonDown(); this.dragAndDropService.leftButtonDown({ keyId: this.svgKey.id, @@ -410,6 +454,7 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { this.labelType = LabelTypes.OneLineText; this.labelSource = undefined; this.secondaryText = undefined; + this.accessibleLabel = 'Unassigned key'; if (!this.keyAction) { return; @@ -566,6 +611,8 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { } else { this.labelSource = undefined; } + + this.accessibleLabel = this.buildAccessibleLabel(); } private blinkSvgRec(): void { @@ -600,13 +647,79 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy { : themeColors.selectedKeyColor2; } else if (this.isMouseHover && !this.mouseMoveService.isColoring) { this.fillColor = colors.hoverColorAsHex; + if (this.isFocused) { + this.strokeColor = themeColors.selectedKeyColor; + } + } else if (this.isFocused) { + this.strokeColor = themeColors.selectedKeyColor; } } else { if (this.isActive) { this.fillColor = 'var(--color-keyboard-key-active)'; } else if (this.isMouseHover) { this.fillColor = 'var(--color-keyboard-key-hover)'; + if (this.isFocused) { + this.strokeColor = themeColors.selectedKeyColor; + } + } else if (this.isFocused) { + this.strokeColor = themeColors.selectedKeyColor; + } + } + } + + 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'; + } + + return 'Assigned key action'; } } diff --git a/packages/uhk-web/src/app/components/svg/module/svg-module.component.html b/packages/uhk-web/src/app/components/svg/module/svg-module.component.html index ae7834fd7bd..e4458480139 100644 --- a/packages/uhk-web/src/app/components/svg/module/svg-module.component.html +++ b/packages/uhk-web/src/app/components/svg/module/svg-module.component.html @@ -27,7 +27,6 @@ [svgKey]="key" [backlightingMode]="backlightingMode" [isActive]="selected && i === selectedKey.keyId" - tabindex="-1" [keyAction]="keyActions && keyActions[i]" [capturingEnabled]="capturingEnabled" [hostConnections]="hostConnections" diff --git a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts index 92f37e4122f..d02f7b258c4 100644 --- a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts +++ b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts @@ -152,6 +152,7 @@ export class SvgKeyboardWrapComponent implements AfterViewInit, OnInit, OnChange private wrapHost: HTMLElement; private keyElement: HTMLElement; + private restoreFocusAfterPopoverClose = false; private animationSubscription = new Subscription(); private openPopoverSubscription = new Subscription(); @@ -241,6 +242,8 @@ export class SvgKeyboardWrapComponent implements AfterViewInit, OnInit, OnChange } onKeyClick(event: SvgKeyboardKeyClickEvent): void { + this.restoreFocusAfterPopoverClose = !!event.keyboardTriggered; + if (this.isBacklightingColoring) { this.store.dispatch(new SetKeyColorAction({ keymap: this.keymap, @@ -372,9 +375,17 @@ export class SvgKeyboardWrapComponent implements AfterViewInit, OnInit, OnChange } hidePopover(): void { + const keyElementToRefocus = this.animationState === 'opened' && this.restoreFocusAfterPopoverClose + ? this.keyElement + : undefined; this.animationState = 'closed'; this.selectedKey = undefined; this.popoverInitKeyAction = null; + this.restoreFocusAfterPopoverClose = false; + + if (keyElementToRefocus) { + setTimeout(() => keyElementToRefocus.focus()); + } } onDescriptionChanged(description: string): void { diff --git a/packages/uhk-web/src/app/models/svg-key-events.ts b/packages/uhk-web/src/app/models/svg-key-events.ts index 9005b327cb5..46d838140c5 100644 --- a/packages/uhk-web/src/app/models/svg-key-events.ts +++ b/packages/uhk-web/src/app/models/svg-key-events.ts @@ -4,6 +4,7 @@ import { KeyModifierModel } from './key-modifier-model'; export interface SvgKeyClickEvent { keyTarget: HTMLElement; + keyboardTriggered?: boolean; shiftPressed?: boolean; altPressed?: boolean; }