gui: Improve accessibility (fixes #3297)

skip-check: authors

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3463

gui/default/index.html

@@ -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>&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 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="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">
               <a href="https://docs.syncthing.net/intro/gui.html" target="_blank">
                 <span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</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>
           </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>

gui/default/syncthing/core/languageSelectDirective.js

@@ -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">&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">'+
                         '<li ng-repeat="(i,name) in localesNames" ng-class="{active: i==currentLocale}">'+
                             '<a href="#" data-ng-click="changeLanguage(i)">{{name}}</a>'+

gui/default/syncthing/settings/advancedSettingsModalView.html

@@ -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>