Skip to content

Improve keyboard accessibility for remapping controls #3022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mondalaci wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Improve keyboard accessibility for remapping controls #3022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f52091f
fix: improve keyboard access for click-only controls
mondalaci Jul 28, 2026
3dc6101
fix: add keyboard activation to SVG key remapping
mondalaci Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions packages/uhk-web/src/app/components/editable-text/editable-text.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<div class="text-center">
<span *ngIf="showPlaceholder"
class="placeholder">
<span (click)="editText()">{{ placeholder }}</span>
</span>
<button *ngIf="showPlaceholder"
type="button"
class="btn btn-link p-0 text-center placeholder editable-text__trigger"
(click)="editText()">{{ placeholder }}</button>

<span *ngIf="showText"
class="editable">
<span (click)="editText()"
>
<button *ngIf="showText"
type="button"
class="btn btn-link p-0 text-center editable editable-text__trigger"
(click)="editText()">
<ng-container *ngFor="let line of displayLines">{{line}}<br></ng-container>
</span>
</span>
</button>
</div>

<div *ngIf="editing">
Expand Down
12 changes: 9 additions & 3 deletions packages/uhk-web/src/app/components/editable-text/editable-text.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
:host {
margin-top: 0.5em;

span.placeholder {
.placeholder {
color: gray;
display: inline-block;

Expand All @@ -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%;
Expand Down
33 changes: 20 additions & 13 deletions packages/uhk-web/src/app/components/macro/header/macro-header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,26 @@
maxParentWidthPercent="0.8"
[selectAfterInit]="isNew"
(ngModelChange)="editMacroName($event)"></auto-grow-input>
<fa-icon [icon]="faTrash"
class="macro__remove float-end"
ngbTooltip="Delete macro"
tooltipClass="tooltip-nowrap"
placement="bottom-right"
(click)="removeMacro()"></fa-icon>
<fa-icon [icon]="faCopy"
class="macro__duplicate float-end"
[class.disabled]="maxMacroCountReached"
[ngbTooltip]="maxMacroCountReached ? maxAllowedMacrosTooltip : 'Duplicate macro'"
tooltipClass="tooltip-nowrap"
placement="bottom-right"
(click)="duplicateMacro()"></fa-icon>
<button type="button"
class="macro__remove float-end btn btn-link p-0"
aria-label="Delete macro"
ngbTooltip="Delete macro"
tooltipClass="tooltip-nowrap"
placement="bottom-right"
(click)="removeMacro()">
<fa-icon [icon]="faTrash"></fa-icon>
</button>
<button type="button"
class="macro__duplicate float-end btn btn-link p-0"
[class.disabled]="maxMacroCountReached"
[disabled]="maxMacroCountReached"
aria-label="Duplicate macro"
[ngbTooltip]="maxMacroCountReached ? maxAllowedMacrosTooltip : 'Duplicate macro'"
tooltipClass="tooltip-nowrap"
placement="bottom-right"
(click)="duplicateMacro()">
<fa-icon [icon]="faCopy"></fa-icon>
</button>
</uhk-header>
<div *ngIf="assignments.length" class="mt-3 mb-2">
<span class="me-1">Used on:</span>
Expand Down
6 changes: 6 additions & 0 deletions packages/uhk-web/src/app/components/macro/header/macro-header.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
font-size: 0.75em;
top: 7px;
position: relative;
color: inherit;
text-decoration: none;
border: 0;

&:hover {
cursor: pointer;
Expand All @@ -15,6 +18,9 @@
top: 7px;
margin-right: 15px;
position: relative;
color: inherit;
text-decoration: none;
border: 0;

&:hover:not(.disabled) {
cursor: pointer;
Expand Down
49 changes: 42 additions & 7 deletions packages/uhk-web/src/app/components/macro/item/macro-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,33 @@
<i *ngIf="movable"
class="uhk-icon uhk-icon-vertical-grip-icon action--movable"
aria-hidden="true"></i>
<div class="action--item--wrap" [class.pointer]="editable" (click)="editAction()">
<button type="button"
class="action--item--wrap"
[class.pointer]="editable"
[disabled]="!editable"
aria-label="Edit macro action"
(click)="editAction()">
<icon [name]="iconName" class="align-items-top"></icon>
<div class="action--title">
{{ title }}
<svg-sprite-image *ngIf="titleIcon" [icon]="titleIcon"></svg-sprite-image>
</div>
<icon *ngIf="editable && macroAction && !editing" name="pencil" class="align-items-top"></icon>
</div>
<icon *ngIf="editable" name="copy" (click)="duplicateAction()" class="align-items-top"></icon>
<icon *ngIf="deletable" name="trash" (click)="deleteAction()" class="align-items-top"></icon>
</button>
<button *ngIf="editable"
type="button"
class="action--item--icon-button"
aria-label="Duplicate macro action"
(click)="duplicateAction()">
<icon name="copy" class="align-items-top"></icon>
</button>
<button *ngIf="deletable"
type="button"
class="action--item--icon-button"
aria-label="Delete macro action"
(click)="deleteAction()">
<icon name="trash" class="align-items-top"></icon>
</button>
</ng-container>

<div *ngIf="isCommand && !editing" class="macro-command-item">
Expand All @@ -25,9 +42,27 @@

<span class="pe-1 me-auto">Command:</span>

<icon *ngIf="editable" name="pencil" (click)="editAction()"></icon>
<icon *ngIf="editable" name="copy" (click)="duplicateAction()"></icon>
<icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
<button *ngIf="editable"
type="button"
class="action--item--icon-button"
aria-label="Edit macro action"
(click)="editAction()">
<icon name="pencil"></icon>
</button>
<button *ngIf="editable"
type="button"
class="action--item--icon-button"
aria-label="Duplicate macro action"
(click)="duplicateAction()">
<icon name="copy"></icon>
</button>
<button *ngIf="deletable"
type="button"
class="action--item--icon-button"
aria-label="Delete macro action"
(click)="deleteAction()">
<icon name="trash"></icon>
</button>
</div>
<div class="macro-command-editor-container">
<macro-command-editor [ngModel]="macroAction.command"
Expand Down
32 changes: 32 additions & 0 deletions packages/uhk-web/src/app/components/macro/item/macro-item.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,47 @@
}

&--wrap {
display: flex;
flex: 1;
justify-content: space-between;
padding-top: 0.25rem;
width: 100%;
border: 0;
outline: 0;
box-shadow: none;
appearance: none;
background: transparent;
color: inherit;
text-align: left;

&.pointer {
&:hover {
cursor: pointer;
color: var(--color-icon-hover);
}
}

&:focus-visible {
outline: 2px solid var(--color-icon-hover);
outline-offset: 2px;
}
}

&--icon-button {
border: 0;
outline: 0;
box-shadow: none;
appearance: none;
background: transparent;
color: inherit;
padding: 0;
flex: 0 0 auto;
align-items: flex-start;

&:focus-visible {
outline: 2px solid var(--color-icon-hover);
outline-offset: 2px;
}
}

.macro-command-item {
Expand Down
17 changes: 11 additions & 6 deletions packages/uhk-web/src/app/components/popover/popover.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,23 @@
>
<div class="arrowCustom"></div>
<div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu">
<ul class="nav nav-tabs popover-menu" role="tablist">
<li *ngFor="let tab of tabHeaders; trackBy:trackTabHeader"
class="nav-item"
[class.active]="activeTab === tab.tabName"
[class.disabled]="tab.disabled"
(click)="selectTab(tab)">
<a class="nav-link menu-tabs--item"
[class.disabled]="tab.disabled">
<button class="nav-link menu-tabs--item"
type="button"
role="tab"
[class.active]="activeTab === tab.tabName"
[class.disabled]="tab.disabled">
[class.disabled]="tab.disabled"
[attr.aria-selected]="activeTab === tab.tabName"
[attr.tabindex]="activeTab === tab.tabName ? 0 : -1"
[disabled]="tab.disabled"
(click)="selectTab(tab)">
<fa-icon [icon]="tab.icon"></fa-icon>
<span>{{ tab.text }}</span>
</a>
</button>
</li>
</ul>
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/uhk-web/src/app/components/popover/popover.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
position: relative;
z-index: 2;

a.active {
.menu-tabs--item.active {
border-bottom: 1px solid var(--color-popover-bg-light);
}
}
Expand All @@ -99,6 +99,7 @@
.menu-tabs--item {
display: flex;
align-items: center;
width: 100%;

fa-icon {
margin-right: 0.25em;
Expand Down
28 changes: 16 additions & 12 deletions packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,16 @@
</td>
<td class="col-controls">
<button class="btn btn-link" type="button" (click)="navigateToMacro.emit()"
aria-label="Jump to selected macro"
ngbTooltip="Jump to macro">
<fa-icon [icon]="faUpRightFromSquare"
aria-hidden="true"></fa-icon>
</button>
<button class="btn btn-default" [class.active]="showMacroArguments" (click)="toggleMacroArguments()" [ngbTooltip]="showMacroArgumentsTooltip" type="button" [attr.aria-pressed]="showMacroArguments">
<button class="btn btn-default" [class.active]="showMacroArguments" (click)="toggleMacroArguments()" [ngbTooltip]="showMacroArgumentsTooltip" type="button" [attr.aria-pressed]="showMacroArguments" aria-label="Toggle macro arguments">
<fa-icon [icon]="faBracketsWithDots"
aria-hidden="true" />
</button>
<button class="btn btn-default" (click)="assignNewMacro.emit()" ngbTooltip="Create new macro for this key" type="button">
<button class="btn btn-default" (click)="assignNewMacro.emit()" ngbTooltip="Create new macro for this key" type="button" aria-label="Create new macro for this key">
<fa-icon [icon]="faPlus"
aria-hidden="true"></fa-icon>
</button>
Expand All @@ -53,16 +54,19 @@
<input type="text" class="form-control" [ngModel]="macroArgument.value" (ngModelChange)="onMacroArgumentChange($event, i)">
</td>
<td class="col-controls arguments">
<fa-icon [icon]="faCircleMinus"
aria-hidden="true"
role="button"
(click)="removeMacroArgument(i)"
/>
<fa-icon *ngIf="last" [icon]="faCirclePlus"
aria-hidden="true"
role="button"
(click)="addNewMacroArgument()"
/>
<button type="button"
class="btn btn-link p-0"
aria-label="Remove macro argument"
(click)="removeMacroArgument(i)">
<fa-icon [icon]="faCircleMinus" aria-hidden="true" />
</button>
<button *ngIf="last"
type="button"
class="btn btn-link p-0"
aria-label="Add macro argument"
(click)="addNewMacroArgument()">
<fa-icon [icon]="faCirclePlus" aria-hidden="true" />
</button>
</td>
</tr>
</tbody>
Expand Down
Loading