119602: Improve notification hiding toggle useability

Author: AAwouters

src/app/accessibility/accessibility-settings.service.ts

@@ -42,7 +42,7 @@ export type AccessibilitySettings = Partial<FullAccessibilitySettings>;
  * The accessibility settings object format used by the accessibility-settings component form.
  */
 export interface AccessibilitySettingsFormValues {
-  disableNotificationTimeOut: boolean,
+  notificationTimeOutEnabled: boolean,
   notificationTimeOut: string,
   liveRegionTimeOut: string,
 }
@@ -250,8 +250,8 @@ export class AccessibilitySettingsService {
    */
   convertFormValuesToStoredValues(settings: AccessibilitySettingsFormValues): FullAccessibilitySettings {
     return {
-      notificationTimeOut: settings.disableNotificationTimeOut ? '0'
-        : secondsToMilliseconds(settings.notificationTimeOut),
+      notificationTimeOut: settings.notificationTimeOutEnabled ?
+        secondsToMilliseconds(settings.notificationTimeOut) : '0',
       liveRegionTimeOut: secondsToMilliseconds(settings.liveRegionTimeOut),
     };
   }
@@ -261,7 +261,7 @@ export class AccessibilitySettingsService {
    */
   convertStoredValuesToFormValues(settings: AccessibilitySettings): AccessibilitySettingsFormValues {
     return {
-      disableNotificationTimeOut: parseFloat(settings.notificationTimeOut) === 0,
+      notificationTimeOutEnabled: parseFloat(settings.notificationTimeOut) !== 0,
       notificationTimeOut: millisecondsToSeconds(settings.notificationTimeOut),
       liveRegionTimeOut: millisecondsToSeconds(settings.liveRegionTimeOut),
     };

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -9,7 +9,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
 
       <div class="col-sm-5">
         <ui-switch [id]="'disableNotificationTimeOutInput'"
-                   [(ngModel)]="formValues.disableNotificationTimeOut"
+                   [(ngModel)]="formValues.notificationTimeOutEnabled"
                    [ngModelOptions]="{ standalone: true }"
         ></ui-switch>
       </div>
@@ -31,7 +31,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
       <div class="col-sm-4">
         <input [type]="'number'" [id]="'notificationTimeOutInput'" class="form-control"
                [placeholder]="getPlaceholder('notificationTimeOut')"
-               [readOnly]="formValues.disableNotificationTimeOut"
+               [readOnly]="!formValues.notificationTimeOutEnabled"
                [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
                [attr.aria-describedby]="'notificationTimeOutHint'">
       </div>

src/assets/i18n/en.json5

@@ -1844,7 +1844,7 @@
 
   "info.accessibility-settings.breadcrumbs": "Accessibility settings",
 
-  "info.accessibility-settings.disableNotificationTimeOut.label": "Disable automatic notification hiding",
+  "info.accessibility-settings.disableNotificationTimeOut.label": "Hide notifications automatically",
 
   "info.accessibility-settings.disableNotificationTimeOut.hint": "When this toggle is activated, notifications will remain until manually closed.",