felixfoertsch/syncthing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

fix(gui): add accessible labels to buttons in Edit Device modal (fixes #10873) (#10874)

Browse Source 
fix(gui): add accessible labels to buttons in Edit Device modal (fixes
#10873)

Currently, the buttons show text on mouse hover or keyboard focus, but
they are inaccessible to screen readers due to a lack of any readable
labels.

However, there is not enough space to add full-length textual labels
that would be visible to everyone. Therefore, add only aria labels for
screen readers, while keyboard and mouse users can still learn their
function via the tooltips.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
This commit is contained in:
Tomasz Wilczyński
2026-09-12 11:10:39 +02:00
committed by GitHub
parent 466857ae7a
commit ece726ce7e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/default/syncthing/device/editDeviceModalView.html
+4 -4
View File
@@ -14,16 +14,16 @@
<input ng-if="editingDeviceNew()" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required="" valid-deviceid list="discovery-list" aria-required="true" />
<div ng-if="!editingDeviceNew()" class="well well-sm form-control text-monospace select-on-click" style="height: auto;">{{currentDevice.deviceID}}</div>
<div id="shareDeviceIdButtons" class="input-group-btn">
<button data-container="body" type="button" class="btn btn-default" ng-click="copyToClipboard($event, currentDevice.deviceID)" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Copy' | translate }}">
<button data-container="body" type="button" class="btn btn-default" ng-click="copyToClipboard($event, currentDevice.deviceID)" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Copy' | translate }}" aria-label="{{ 'Copy' | translate }}">
<span class="fa fa-lg fa-clone"></span>
</button>
<button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('email')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by Email' | translate }}">
<button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('email')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by Email' | translate }}" aria-label="{{ 'Share by Email' | translate }}">
<span class="fa fa-lg fa-envelope-o"></span>
</button>
<button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('sms')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by SMS' | translate }}">
<button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('sms')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by SMS' | translate }}" aria-label="{{ 'Share by SMS' | translate }}">
<span class="fa fa-lg fa-comments-o"></span>
</button>
<button data-container="body" type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Show QR' | translate }}">
<button data-container="body" type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Show QR' | translate }}" aria-label="{{ 'Show QR' | translate }}">
<span class="fa fa-lg fa-qrcode"></span>
</button>
</div>