mirror of
https://github.com/octoleo/syncthing.git
synced 2024-12-23 03:18:59 +00:00
gui: Improve accessibility (fixes #3297)
skip-check: authors GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3463
This commit is contained in:
parent
297240facf
commit
a8cd9d0154
@ -32,7 +32,7 @@
|
||||
|
||||
<nav class="navbar navbar-top navbar-default" role="navigation">
|
||||
<div class="container">
|
||||
<span class="navbar-brand">
|
||||
<span class="navbar-brand" aria-hidden="true">
|
||||
<img class="logo hidden-xs" src="assets/img/logo-horizontal.svg" height="32" width="117"/>
|
||||
<img class="logo hidden visible-xs" src="assets/img/favicon-default.png" height="32"/>
|
||||
</span>
|
||||
@ -58,7 +58,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown action-menu">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="fa fa-cog"></span>
|
||||
<span class="hidden-xs" translate>Actions</span>
|
||||
<span class="caret"></span>
|
||||
@ -66,17 +66,17 @@
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span> <span translate>Settings</span></a></li>
|
||||
<li><a href="" data-toggle="modal" data-target="#idqr" ng-click="currentDevice=thisDevice()"><span class="fa fa-fw fa-qrcode"></span> <span translate>Show ID</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="divider" aria-hidden="true"></li>
|
||||
<li><a href="" ng-click="shutdown()"><span class="fa fa-fw fa-power-off"></span> <span translate>Shutdown</span></a></li>
|
||||
<li><a href="" ng-click="restart()"><span class="fa fa-fw fa-refresh"></span> <span translate>Restart</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="divider" aria-hidden="true"></li>
|
||||
<li class="visible-xs">
|
||||
<a href="https://docs.syncthing.net/intro/gui.html" target="_blank">
|
||||
<span class="fa fa-fw fa-book"></span> <span translate>Help</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="" data-toggle="modal" data-target="#about"><span class="fa fa-fw fa-heart-o"></span> <span translate>About</span></a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="divider" aria-hidden="true"></li>
|
||||
<li><a href="" ng-click="advanced()"><span class="fa fa-fw fa-cogs"></span> <span translate>Advanced</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -254,11 +254,11 @@
|
||||
|
||||
<!-- Folder list (top left) -->
|
||||
|
||||
<div class="col-md-6">
|
||||
<h3 translate>Folders</h3>
|
||||
<div class="col-md-6" aria-labelledby="folder_list" role="region" >
|
||||
<h3 id="folder_list" translate>Folders</h3>
|
||||
<div class="panel-group" id="folders">
|
||||
<div class="panel panel-default" ng-repeat="folder in folderList()">
|
||||
<button class="btn panel-heading" data-toggle="collapse" data-parent="#folders" data-target="#folder-{{$index}}">
|
||||
<button class="btn panel-heading" data-toggle="collapse" data-parent="#folders" data-target="#folder-{{$index}}" aria-expanded="false">
|
||||
<div class="panel-progress" ng-show="folderStatus(folder) == 'syncing'" ng-attr-style="width: {{syncPercentage(folder.id)}}%"></div>
|
||||
<div class="panel-progress" ng-show="folderStatus(folder) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div>
|
||||
<h4 class="panel-title">
|
||||
@ -437,10 +437,10 @@
|
||||
|
||||
<!-- This device -->
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6" aria-label="{{'Devices' | translate}}" role="region">
|
||||
<h3 translate>This Device</h3>
|
||||
<div class="panel panel-default" ng-repeat="deviceCfg in [thisDevice()]">
|
||||
<button class="btn panel-heading" data-toggle="collapse" data-target="#device-this">
|
||||
<button class="btn panel-heading" data-toggle="collapse" data-target="#device-this" aria-expanded="true">
|
||||
<h4 class="panel-title">
|
||||
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
|
||||
<div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
|
||||
@ -516,7 +516,7 @@
|
||||
<h3 translate>Remote Devices</h3>
|
||||
<div class="panel-group" id="devices">
|
||||
<div class="panel panel-default" ng-repeat="deviceCfg in otherDevices()">
|
||||
<button class="btn panel-heading" data-toggle="collapse" data-parent="#devices" data-target="#device-{{$index}}">
|
||||
<button class="btn panel-heading" data-toggle="collapse" data-parent="#devices" data-target="#device-{{$index}}" aria-expanded="false">
|
||||
<div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | number:0}}%"></div>
|
||||
<h4 class="panel-title">
|
||||
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
|
||||
|
@ -4,7 +4,7 @@ angular.module('syncthing.core')
|
||||
return {
|
||||
restrict: 'EA',
|
||||
template:
|
||||
'<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="fa fa-globe"></span><span class="hidden-xs"> {{localesNames[currentLocale] || "English"}}</span> <span class="caret"></span></a>'+
|
||||
'<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="fa fa-globe"></span><span class="hidden-xs"> {{localesNames[currentLocale] || "English"}}</span> <span class="caret"></span></a>'+
|
||||
'<ul ng-if="visible" class="dropdown-menu">'+
|
||||
'<li ng-repeat="(i,name) in localesNames" ng-class="{active: i==currentLocale}">'+
|
||||
'<a href="#" data-ng-click="changeLanguage(i)">{{name}}</a>'+
|
||||
|
@ -9,8 +9,8 @@
|
||||
<div class="panel-group" id="advancedAccordion" role="tablist" aria-multiselectable="true">
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="guiHeading" data-toggle="collapse" data-parent="#advancedAccordion" href="#guiConfig" aria-expanded="true" aria-controls="guiConfig" style="cursor: pointer">
|
||||
<h4 class="panel-title" translate>GUI</h4>
|
||||
<div class="panel-heading" role="tab" id="guiHeading" data-toggle="collapse" data-parent="#advancedAccordion" href="#guiConfig" aria-expanded="true" aria-controls="guiConfig" style="cursor: pointer;">
|
||||
<h4 class="panel-title" translate tabindex="0">GUI</h4>
|
||||
</div>
|
||||
<div id="guiConfig" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="guiHeading">
|
||||
<div class="panel-body">
|
||||
@ -27,8 +27,8 @@
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="optionsHeading" data-toggle="collapse" data-parent="#advancedAccordion" href="#optionsConfig" aria-expanded="true" aria-controls="optionsConfig" style="cursor: pointer">
|
||||
<h4 class="panel-title" translate>Options</h4>
|
||||
<div class="panel-heading" role="tab" id="optionsHeading" data-toggle="collapse" data-parent="#advancedAccordion" href="#optionsConfig" aria-expanded="false" aria-controls="optionsConfig" style="cursor: pointer;">
|
||||
<h4 class="panel-title" tabindex="0" translate>Options</h4>
|
||||
</div>
|
||||
<div id="optionsConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="optionsHeading">
|
||||
<div class="panel-body">
|
||||
@ -45,11 +45,11 @@
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" ng-repeat="folder in advancedConfig.folders">
|
||||
<div class="panel-heading" role="tab" id="folder{{$index}}Heading" data-toggle="collapse" data-parent="#advancedAccordion" href="#folder{{$index}}Config" aria-expanded="true" aria-controls="folder{{$index}}Config" style="cursor: pointer">
|
||||
<h4 ng-if="folder.label.length == 0" class="panel-title">
|
||||
<div class="panel-heading" role="tab" id="folder{{$index}}Heading" data-toggle="collapse" data-parent="#advancedAccordion" href="#folder{{$index}}Config" aria-expanded="false" aria-controls="folder{{$index}}Config" style="cursor: pointer;">
|
||||
<h4 ng-if="folder.label.length == 0" class="panel-title" tabindex="0">
|
||||
<span translate>Folder</span> "{{folder.id}}"
|
||||
</h4>
|
||||
<h4 ng-if="folder.label.length != 0" class="panel-title">
|
||||
<h4 ng-if="folder.label.length != 0" class="panel-title" tabindex="0">
|
||||
<span translate>Folder</span> "{{folder.label}}" ({{folder.id}})
|
||||
</h4>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user