octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-12-23 11:28:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

gui: Improve accessibility (fixes #3297)

Browse Source 
skip-check: authors

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3463
This commit is contained in:
derekriemer 2016-07-31 22:59:44 +00:00 committed by Audrius Butkevicius
parent 297240facf
commit a8cd9d0154
3 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
gui/default/index.html
View File

@ -32,7 +32,7 @@
<nav class="navbar navbar-top navbar-default" role="navigation"> <nav class="navbar navbar-top navbar-default" role="navigation">
<div class="container"> <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-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"/> <img class="logo hidden visible-xs" src="assets/img/favicon-default.png" height="32"/>
</span> </span>
@ -58,7 +58,7 @@
</a> </a>
</li> </li>
<li class="dropdown action-menu"> <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="fa fa-cog"></span>
<span class="hidden-xs" translate>Actions</span> <span class="hidden-xs" translate>Actions</span>
<span class="caret"></span> <span class="caret"></span>
@ -66,17 +66,17 @@
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li> <li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<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>&nbsp;<span translate>Show ID</span></a></li> <li><a href="" data-toggle="modal" data-target="#idqr" ng-click="currentDevice=thisDevice()"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<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>&nbsp;<span translate>Shutdown</span></a></li> <li><a href="" ng-click="shutdown()"><span class="fa fa-fw fa-power-off"></span>&nbsp;<span translate>Shutdown</span></a></li>
<li><a href="" ng-click="restart()"><span class="fa fa-fw fa-refresh"></span>&nbsp;<span translate>Restart</span></a></li> <li><a href="" ng-click="restart()"><span class="fa fa-fw fa-refresh"></span>&nbsp;<span translate>Restart</span></a></li>
<li class="divider"></li> <li class="divider" aria-hidden="true"></li>
<li class="visible-xs"> <li class="visible-xs">
<a href="https://docs.syncthing.net/intro/gui.html" target="_blank"> <a href="https://docs.syncthing.net/intro/gui.html" target="_blank">
<span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span> <span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span>
</a> </a>
</li> </li>
<li><a href="" data-toggle="modal" data-target="#about"><span class="fa fa-fw fa-heart-o"></span>&nbsp;<span translate>About</span></a></li> <li><a href="" data-toggle="modal" data-target="#about"><span class="fa fa-fw fa-heart-o"></span>&nbsp;<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>&nbsp;<span translate>Advanced</span></a></li> <li><a href="" ng-click="advanced()"><span class="fa fa-fw fa-cogs"></span>&nbsp;<span translate>Advanced</span></a></li>
</ul> </ul>
</li> </li>
@ -254,11 +254,11 @@
<!-- Folder list (top left) --> <!-- Folder list (top left) -->
<div class="col-md-6"> <div class="col-md-6" aria-labelledby="folder_list" role="region" >
<h3 translate>Folders</h3> <h3 id="folder_list" translate>Folders</h3>
<div class="panel-group" id="folders"> <div class="panel-group" id="folders">
<div class="panel panel-default" ng-repeat="folder in folderList()"> <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) == '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> <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"> <h4 class="panel-title">
@ -437,10 +437,10 @@
<!-- This device --> <!-- This device -->
<div class="col-md-6"> <div class="col-md-6" aria-label="{{'Devices' | translate}}" role="region">
<h3 translate>This Device</h3> <h3 translate>This Device</h3>
<div class="panel panel-default" ng-repeat="deviceCfg in [thisDevice()]"> <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"> <h4 class="panel-title">
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon> <identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
<div class="panel-title-text">{{deviceName(deviceCfg)}}</div> <div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
@ -516,7 +516,7 @@
<h3 translate>Remote Devices</h3> <h3 translate>Remote Devices</h3>
<div class="panel-group" id="devices"> <div class="panel-group" id="devices">
<div class="panel panel-default" ng-repeat="deviceCfg in otherDevices()"> <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> <div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | number:0}}%"></div>
<h4 class="panel-title"> <h4 class="panel-title">
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon> <identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>

2
gui/default/syncthing/core/languageSelectDirective.js
View File

@ -4,7 +4,7 @@ angular.module('syncthing.core')
return { return {
restrict: 'EA', restrict: 'EA',
template: 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">&nbsp;{{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">&nbsp;{{localesNames[currentLocale] || "English"}}</span> <span class="caret"></span></a>'+
'<ul ng-if="visible" class="dropdown-menu">'+ '<ul ng-if="visible" class="dropdown-menu">'+
'<li ng-repeat="(i,name) in localesNames" ng-class="{active: i==currentLocale}">'+ '<li ng-repeat="(i,name) in localesNames" ng-class="{active: i==currentLocale}">'+
'<a href="#" data-ng-click="changeLanguage(i)">{{name}}</a>'+ '<a href="#" data-ng-click="changeLanguage(i)">{{name}}</a>'+

14
gui/default/syncthing/settings/advancedSettingsModalView.html
View File

@ -9,8 +9,8 @@
<div class="panel-group" id="advancedAccordion" role="tablist" aria-multiselectable="true"> <div class="panel-group" id="advancedAccordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default"> <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"> <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> <h4 class="panel-title" translate tabindex="0">GUI</h4>
</div> </div>
<div id="guiConfig" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="guiHeading"> <div id="guiConfig" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="guiHeading">
<div class="panel-body"> <div class="panel-body">
@ -27,8 +27,8 @@
</div> </div>
<div class="panel panel-default"> <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"> <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" translate>Options</h4> <h4 class="panel-title" tabindex="0" translate>Options</h4>
</div> </div>
<div id="optionsConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="optionsHeading"> <div id="optionsConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="optionsHeading">
<div class="panel-body"> <div class="panel-body">
@ -45,11 +45,11 @@
</div> </div>
<div class="panel panel-default" ng-repeat="folder in advancedConfig.folders"> <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"> <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"> <h4 ng-if="folder.label.length == 0" class="panel-title" tabindex="0">
<span translate>Folder</span> "{{folder.id}}" <span translate>Folder</span> "{{folder.id}}"
</h4> </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}}) <span translate>Folder</span> "{{folder.label}}" ({{folder.id}})
</h4> </h4>
</div> </div>