Merge pull request #1711 from sharelatex/pr-fix-tc-toggle-ie

Fix review panel toggles in IE11.

GitOrigin-RevId: f8c0c8191a8299da87c6308749bace0d7bf8bca8

services/web/app/views/project/editor/review-panel.pug

@@ -69,9 +69,10 @@
 					tooltip-popup-delay="1000"
 				) !{translate("tc_everyone")}
 				review-panel-toggle(
+					description="Track changes for everyone"
 					ng-model="reviewPanel.trackChangesOnForEveryone"
 					on-toggle="toggleTrackChangesForEveryone(isOn);"
-					disabled="!project.features.trackChanges || !permissions.write"
+					is-disabled="!project.features.trackChanges || !permissions.write"
 				)
 			li.rp-tc-state-item(
 				ng-repeat="member in reviewPanel.formattedProjectMembers"
@@ -85,9 +86,10 @@
 					tooltip-popup-delay="1000"
 				) {{ member.name }}
 				review-panel-toggle(
+					description="Track changes for {{ member.name }}"
 					ng-model="reviewPanel.trackChangesState[member.id].value"
 					on-toggle="toggleTrackChangesForUser(isOn, member.id);"
-					disabled="reviewPanel.trackChangesOnForEveryone || !project.features.trackChanges || !permissions.write"
+					is-disabled="reviewPanel.trackChangesOnForEveryone || !project.features.trackChanges || !permissions.write"
 				)
 
 			li.rp-tc-state-separator
@@ -100,9 +102,10 @@
 					tooltip-popup-delay="1000"
 				) !{translate("tc_guests")}
 				review-panel-toggle(
+					description="Track changes for guests"
 					ng-model="reviewPanel.trackChangesOnForGuests"
 					on-toggle="toggleTrackChangesForGuests(isOn);"
-					disabled="reviewPanel.trackChangesOnForEveryone || !project.features.trackChanges || !permissions.write || !reviewPanel.trackChangesForGuestsAvailable"
+					is-disabled="reviewPanel.trackChangesOnForEveryone || !project.features.trackChanges || !permissions.write || !reviewPanel.trackChangesForGuestsAvailable"
 				)
 
 	.rp-entry-list(

services/web/public/src/ide/review-panel/directives/reviewPanelToggle.js

@@ -18,8 +18,9 @@ define(['base'], App =>
       onToggle: '&',
       ngModel: '=',
       valWhenUndefined: '=?',
-      disabled: '=?',
-      onDisabledClick: '&?'
+      isDisabled: '=?',
+      onDisabledClick: '&?',
+      description: '@'
     },
     link(scope) {
       if (scope.disabled == null) {
@@ -41,9 +42,10 @@ define(['base'], App =>
     },
 
     template: `\
-<div class="rp-toggle" ng-click="handleClick();">
-		<input id="rp-toggle-{{$id}}" ng-disabled="disabled" type="checkbox" class="rp-toggle-hidden-input" ng-model="localModel" ng-change="onChange()" />
-		<label for="rp-toggle-{{$id}}" class="rp-toggle-btn"></label>
-	</div>\
+<fieldset class="rp-toggle" ng-click="handleClick();">
+  <legend class="sr-only">{{description}}</legend>
+  <input id="rp-toggle-{{$id}}" ng-disabled="isDisabled" type="checkbox" class="rp-toggle-hidden-input" ng-model="localModel" ng-change="onChange()" />
+  <label for="rp-toggle-{{$id}}" class="rp-toggle-btn"></label>
+</fieldset>\
 `
   })))