Skip to content

GitLab

T
tangled
Commit bdbe2f86 authored by huangs's avatar huangs Committed by Commit bot
Browse files
Options

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

This CL updates role and aria-* attributes to get screen readers to
work.

BUG=697142
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2742833002
Cr-Commit-Position: refs/heads/master@{#456175}
parent 921d5298
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 29 deletions
chrome/browser/resources/welcome/win10/inline.html
View file @ bdbe2f86
...@@ -270,35 +270,41 @@ ...@@ -270,35 +270,41 @@
} }
} }
</style> </style>
<div class="header-logo"></div> <div class="header-logo" role="presentation"></div>
<div class="heading">$i18n{headerText}</div> <div class="heading">$i18n{headerText}</div>
<div class="sections"> <div class="sections">
<div class$="[[computeClasses(isCombined)]]"> <div class$="[[computeClasses(isCombined)]]">
<template is="dom-if" if="[[isCombined]]"> <template is="dom-if" if="[[isCombined]]">
<a is="action-link" class="section-heading" on-tap="onToggle"> <div role="heading" aria-level="2">
<div class="section-heading-text"> <a id="tab1" is="action-link" class="section-heading"
$i18n{defaultBrowserSubheaderText} on-tap="onToggle" role="button" aria-controls="panel1"
</div> aria-expanded="true">
<iron-icon class="section-heading-expand" icon="cr:expand-more"> <div class="section-heading-text" role="presentation">
</iron-icon> $i18n{defaultBrowserSubheaderText}
</a> </div>
<iron-icon class="section-heading-expand" icon="cr:expand-more"
role="presentation">
</iron-icon>
</a>
</div>
</template> </template>
<template is="dom-if" if="[[!isCombined]]"> <template is="dom-if" if="[[!isCombined]]">
<div class="section-heading"> <div class="section-heading" role="text">
<div class="section-heading-text"> <div class="section-heading-text" role="presentation">
$i18n{defaultBrowserSubheaderText} $i18n{defaultBrowserSubheaderText}
</div> </div>
</div> </div>
</template> </template>
<ol class="section-steps"> <ol id="panel1" class="section-steps" aria-labelledby="tab1">
<li> <li>
<a is="action-link" on-tap="onOpenSettings"> <a is="action-link" on-tap="onOpenSettings" role="link">
$i18n{openSettingsText} $i18n{openSettingsText}
</a> </a>
</li> </li>
<li> <li>
<div>$i18nRaw{clickEdgeText}</div> <div role="presentation">$i18nRaw{clickEdgeText}</div>
<div class="screenshot-image" id="default-image"> <div class="screenshot-image" id="default-image"
role="presentation">
<div class="screenshot-overlay" id="browser-overlay"> <div class="screenshot-overlay" id="browser-overlay">
<div aria-hidden="true">$i18n{webBrowserLabel}</div> <div aria-hidden="true">$i18n{webBrowserLabel}</div>
</div> </div>
...@@ -307,21 +313,31 @@ ...@@ -307,21 +313,31 @@
</div> </div>
</div> </div>
</li> </li>
<li>$i18nRaw{clickSelectChrome}</li> <li>
<div role="presentation">$i18nRaw{clickSelectChrome}</div>
</li>
</ol> </ol>
</div> </div>
<template is="dom-if" if="[[isCombined]]"> <template is="dom-if" if="[[isCombined]]">
<div class="section expandable"> <div class="section expandable">
<a is="action-link" class="section-heading" on-tap="onToggle"> <div role="heading" aria-level="2">
<div class="section-heading-text">$i18n{pinSubheaderText}</div> <a id="tab2" is="action-link" class="section-heading"
<iron-icon class="section-heading-expand" icon="cr:expand-more"> on-tap="onToggle" role="button" aria-controls="panel2"
</iron-icon> aria-expanded="false">
</a> <div class="section-heading-text" role="presentation">
<ol class="section-steps"> $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" aria-labelledby="tab2">
<li>$i18nRaw{rightClickText}</li> <li>$i18nRaw{rightClickText}</li>
<li> <li>
<div>$i18nRaw{pinInstructionText}</div> <div role="presentation">$i18nRaw{pinInstructionText}</div>
<div class="screenshot-image" id="taskbar-image"> <div class="screenshot-image" id="taskbar-image"
role="presentation">
<div class="screenshot-overlay" id="taskbar-overlay"> <div class="screenshot-overlay" id="taskbar-overlay">
<div aria-hidden="true">$i18n{pinToTaskbarLabel}</div> <div aria-hidden="true">$i18n{pinToTaskbarLabel}</div>
</div> </div>
......
chrome/browser/resources/welcome/win10/inline.js
View file @ bdbe2f86
...@@ -47,11 +47,13 @@ Polymer({ ...@@ -47,11 +47,13 @@ Polymer({
}, },
onToggle: function() { onToggle: function() {
if (this.isCombined) { if (!this.isCombined)
var sections = this.shadowRoot.querySelectorAll('.section.expandable'); return;
sections.forEach(function(section) { var sections = this.shadowRoot.querySelectorAll('.section.expandable');
section.classList.toggle('expanded'); sections.forEach(function(section) {
}); var isExpanded = section.classList.toggle('expanded');
} section.querySelector('[role~="button"]').setAttribute(
'aria-expanded', isExpanded);
});
} }
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment