[OOBE][CHOOBE] Accessibility of CHOOBE and Touchpad Screen

align the accessibility of chromeVox with the greenline of the choobe and touchpad screen. Bug: b:282893836 Change-Id: I3d806bb47f1a1056ae9fbe015523ca1823595ab3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4584110 Commit-Queue: Brahim Chikhaoui <bchikhaoui@google.com> Reviewed-by: Osama Fathy <osamafathy@google.com> Cr-Commit-Position: refs/heads/main@{#1153133}
chromium · Jun 5, 2023 · a1aa001 · a1aa001
1 parent ac5cfef
commit a1aa001
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/chrome/browser/resources/chromeos/login/components/oobe_screens_list.html b/chrome/browser/resources/chromeos/login/components/oobe_screens_list.html
@@ -126,17 +126,25 @@
         visited$="[[isScreenVisited(screen.selected , screen.is_completed)]]"
         disabled="[[isScreenDisabled(screen.is_revisitable , screen.is_completed)]]"
         class="screen-item"
+        role="checkbox"
+        aria-checked="[[screen.selected]]"
+        aria-label$="[[getAriaLabelToggleButtons_(locale,
+                  screen.title ,
+                  screen.subtitle ,
+                  screen.is_synced ,
+                  screen.is_completed,
+                  screen.screenID)]]"
         on-click="onClick_">
       <div class="flex horizontal layout">
         <div class="icon">
           <iron-icon class="screen-icon" icon="[[screen.icon]]"></iron-icon>
         </div>
-        <div class="text-container">
+        <div class="text-container" aria-hidden="true">
           <div class="screen-title"> [[i18nDynamic(locale, screen.title)]]</div>
           <div class="screen-subtitle">[[getSubtitle_(locale, screen.subtitle,
                                               screen.screenID )]]</div>
         </div>
-        <div class="info-icon">
+        <div class="info-icon" aria-hidden="true">
           <iron-icon hidden="[[isSyncedIconHidden(screen.is_synced ,
                                             screen.is_completed ,
                                             screen.selected)]]"

diff --git a/chrome/browser/resources/chromeos/login/components/oobe_screens_list.js b/chrome/browser/resources/chromeos/login/components/oobe_screens_list.js
@@ -132,6 +132,28 @@ export class OobeScreensList extends OobeScreensListBase {
   getScreenID(screen_id) {
     return 'cr-button-' + screen_id;
   }
+
+  getAriaLabelToggleButtons_(
+      locale, screen_title, screen_subtitle, screen_is_synced,
+      screen_is_completed, screen_id) {
+    var ariaLabel = this.i18nDynamic(locale, screen_title);
+    if (screen_subtitle) {
+      if (screen_id === 'display-size') {
+        ariaLabel = ariaLabel + '.' + screen_subtitle;
+      } else {
+        ariaLabel = ariaLabel + '.' + this.i18nDynamic(locale, screen_subtitle);
+      }
+    }
+    if (screen_is_completed) {
+      ariaLabel =
+          ariaLabel + '.' + this.i18nDynamic(locale, 'choobeVisitedTile');
+    }
+    if (!screen_is_completed && screen_is_synced) {
+      ariaLabel =
+          ariaLabel + '.' + this.i18nDynamic(locale, 'choobeSyncedTile');
+    }
+    return ariaLabel;
+  }
 }
 
 customElements.define(OobeScreensList.is, OobeScreensList);
diff --git a/chrome/browser/resources/chromeos/login/screens/common/touchpad_scroll.html b/chrome/browser/resources/chromeos/login/screens/common/touchpad_scroll.html
@@ -36,7 +36,7 @@
   color: var(--cros-text-color-primary);
 }
 
-.illustration-jelly{
+.illustration-jelly {
   width: 100%;
   height: auto;
   position: absolute;
@@ -59,7 +59,7 @@ <h1 slot="title" id="touchpad-scroll-title">
     [[i18nDynamic(locale, 'TouchpadScrollScreenDescription')]]
   </div>
   <div slot="content" class="layout vertical center-justified">
-    <div id="scrollArea">
+    <div id="scrollArea" aria-hidden="true">
       <div id="areaText">
         [[i18nDynamic(locale, 'TouchpadScrollAreaDescription')]]
       </div>
@@ -69,14 +69,19 @@ <h1 slot="title" id="touchpad-scroll-title">
     </div>
     <div id="toggleElementBox" class="layout horizontal">
         <div class="flex layout vertical center-justified">
-          <div id="toggleTitle">
+          <div id="toggleTitle" aria-hidden="true">
             [[i18nDynamic(locale, 'TouchpadScrollToggleTitle')]]
           </div>
           <div id="toggleDesc" aria-hidden="true">
             [[i18nDynamic(locale, 'TouchpadScrollToggleDescription')]]
           </div>
         </div>
-        <cr-toggle id="updateToggle" checked="{{isReverseScrolling_}}">
+        <cr-toggle id="updateToggle" checked="{{isReverseScrolling_}}"
+            role="checkbox"
+            aria-checked="[[isReverseScrolling_]]"
+            aria-label$="[[getAriaLabelToggleButtons_(locale,
+                'TouchpadScrollToggleTitle' ,
+                'TouchpadScrollToggleDescription')]]">
         </cr-toggle>
     </div>
   </div>

diff --git a/chrome/browser/resources/chromeos/login/screens/common/touchpad_scroll.js b/chrome/browser/resources/chromeos/login/screens/common/touchpad_scroll.js
@@ -148,6 +148,11 @@ class TouchpadScrollScreen extends TouchpadScrollScreenElementBase {
   onReturnClicked_() {
     this.userActed(UserAction.RETURN);
   }
+
+  getAriaLabelToggleButtons_(locale, title, subtitle) {
+    return this.i18nDynamic(locale, title) + '. ' +
+        this.i18nDynamic(locale, subtitle);
+  }
 }
 
 customElements.define(TouchpadScrollScreen.is, TouchpadScrollScreen);