[Win10 FRE] Fix ARIA attributes to conform to accordion widget.

chrome/browser/resources/welcome/win10/inline.html

Index: chrome/browser/resources/welcome/win10/inline.html
diff --git a/chrome/browser/resources/welcome/win10/inline.html b/chrome/browser/resources/welcome/win10/inline.html
index e8149b30f3b10359b5e9941af589eb32586ce9f6..af02727c82dc24fcce5522e45d3252fb904120a8 100644
--- a/chrome/browser/resources/welcome/win10/inline.html
+++ b/chrome/browser/resources/welcome/win10/inline.html
@@ -275,30 +275,32 @@
       <div class="sections">
         <div class$="[[computeClasses(isCombined)]]">
           <template is="dom-if" if="[[isCombined]]">
-            <a is="action-link" class="section-heading" on-tap="onToggle">
-              <div class="section-heading-text">
-                $i18n{defaultBrowserSubheaderText}
-              </div>
-              <iron-icon class="section-heading-expand" icon="cr:expand-more">
-              </iron-icon>
-            </a>
+            <div role="heading">
+              <a id="tab1" is="action-link" class="section-heading" on-tap="onToggle" role="button" area-controls="panel1" aria-expanded="true">
+                <div class="section-heading-text" role="presentation">
+                  $i18n{defaultBrowserSubheaderText}
+                </div>
+                <iron-icon class="section-heading-expand" icon="cr:expand-more" role="presentation">
+                </iron-icon>
+              </a>
+            </div>
           </template>
           <template is="dom-if" if="[[!isCombined]]">
-            <div class="section-heading">
-              <div class="section-heading-text">
+            <div class="section-heading" tabindex="0" role="text">

[dmazzoni, 2017/03/09 19:55:08]

What's the tabindex here for?

It's unusual to make something keyboard focusable if it's not
interactive.

If the only purpose is so a screen reader can read it, that's
unnecessary, there are other screen reader shortcuts to navigate
to static text

[huangs, 2017/03/10 17:23:15]

It was for my own convenience -- previously I didn't know MS Narrator uses
<Space>, not <Enter> to activate. Removed.

+              <div class="section-heading-text" role="presentation">
                 $i18n{defaultBrowserSubheaderText}
               </div>
             </div>
           </template>
-          <ol class="section-steps">
-            <li>
-              <a is="action-link" on-tap="onOpenSettings">
+          <ol id="panel1" class="section-steps" role="list" aria-labelledby="tab1">

[dmazzoni, 2017/03/09 19:55:08]

Role=list shouldn't be needed here, it's implicit with <ol>

[huangs, 2017/03/10 17:23:15]

This was a workaround, but seems to be not needed any more. Removed.

+            <li tabindex="0">

[dmazzoni, 2017/03/09 19:55:08]

No tabindex here. The link is already focusable

[huangs, 2017/03/10 17:23:15]

Removed.

+              <a is="action-link" on-tap="onOpenSettings" tabindex="0" role="link">
                 $i18n{openSettingsText}
               </a>
             </li>
-            <li>
-              <div>$i18nRaw{clickEdgeText}</div>
-              <div class="screenshot-image" id="default-image">
+            <li tabindex="0">
+              <div role="presentation">$i18nRaw{clickEdgeText}</div>

[dmazzoni, 2017/03/09 19:55:08]

All of the role=presentation in this change is safe and
harmless but shouldn't really be needed. I'd leave it
out unless there's a good reason

The most common reason for role=presentation is if there's
an extra "layer" between a container and its item, like:

<div role="list">
  <div role="presentation">   <!-- needed otherwise the listitem is lost -->
    <div role="listitem">

[huangs, 2017/03/10 17:23:15]

These are added since otherwise MS Narrator, after reading the line, would
proceed to highlight each word and read them one-by-one, which seems rather
redundant.  Also, $i18nRaw(...) does not inject pure text, but may contain tags.

So left as-is, but please let me know if what I described is intended, or if
there's are better solutions. Thanks!

+              <div class="screenshot-image" id="default-image" role="presentation">
                 <div class="screenshot-overlay" id="browser-overlay">
                   <div aria-hidden="true">$i18n{webBrowserLabel}</div>
                 </div>
@@ -307,21 +309,27 @@
                 </div>
               </div>
             </li>
-            <li>$i18nRaw{clickSelectChrome}</li>
+            <li tabindex="0">
+              <div role="presentation">$i18nRaw{clickSelectChrome}</div>
+            </li>
           </ol>
         </div>
         <template is="dom-if" if="[[isCombined]]">
           <div class="section expandable">
-            <a is="action-link" class="section-heading" on-tap="onToggle">
-              <div class="section-heading-text">$i18n{pinSubheaderText}</div>
-              <iron-icon class="section-heading-expand" icon="cr:expand-more">
-              </iron-icon>
-            </a>
-            <ol class="section-steps">
-              <li>$i18nRaw{rightClickText}</li>
-              <li>
-                <div>$i18nRaw{pinInstructionText}</div>
-                <div class="screenshot-image" id="taskbar-image">
+            <div role="heading">

[dmazzoni, 2017/03/09 19:55:07]

aria-level=2 or something like that, just like a <h2>, <h3>, etc

Any chance you could just use a native <h2>? Slightly preferred,
but role=heading with aria-level is okay too

[huangs, 2017/03/10 17:23:15]

That would require more complex CSS to restyle <h2>; I'd prefer to go with
aria-level=2.

+              <a id="tab2" is="action-link" class="section-heading" on-tap="onToggle" role="button" area-controls="panel2" aria-expanded="false">

[dmazzoni, 2017/03/09 19:55:08]

aria-controls (spelling)

[huangs, 2017/03/10 17:23:15]

Ah oops. Done.

+                <div class="section-heading-text" role="presentation">
+                  $i18n{pinSubheaderText}
+                </div>
+                <iron-icon class="section-heading-expand" icon="cr:expand-more" role="presentation">
+                </iron-icon>
+              </a>
+            </div>
+            <ol id="panel2" class="section-steps" role="list" aria-labelledby="tab2">
+              <li tabindex="0">$i18nRaw{rightClickText}</li>
+              <li tabindex="0">
+                <div role="presentation">$i18nRaw{pinInstructionText}</div>
+                <div class="screenshot-image" id="taskbar-image" role="presentation">
                   <div class="screenshot-overlay" id="taskbar-overlay">
                     <div aria-hidden="true">$i18n{pinToTaskbarLabel}</div>
                   </div>