Skip to content

GitLab

T
tangled
Commit 31fcb756 authored by Yue Li's avatar Yue Li Committed by Commit Bot
Browse files
Options

GAR4: Add aria labels for icons in Assistant opt-in flow 

Adding labels for images inside the webview. Also fix a visibility issue
for ChromeVox by setting the webview and the image unselectable.

Bug: b/142957550
Test: Manual Test
Change-Id: I98d1826c5f302df0a696dc9c7a75e10799302720
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1887848Reviewed-by: default avatarXiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Yue Li <updowndota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710539}
parent 20a988ab
Hide whitespace changes
Inline Side-by-side
Showing with 21 additions and 7 deletions
chrome/app/chromeos_strings.grdp
View file @ 31fcb756
...@@ -3134,6 +3134,9 @@ ...@@ -3134,6 +3134,9 @@
<message name="IDS_ASSISTANT_LOGO" desc="Logo label for voice interaction."> <message name="IDS_ASSISTANT_LOGO" desc="Logo label for voice interaction.">
Google assistant logo Google assistant logo
</message> </message>
<message name="IDS_ASSISTANT_OOBE_USER_IMAGE" desc="Image label for the user image.">
User image
</message>
<message name="IDS_ASSISTANT_SCREEN_CONTEXT_TITLE" desc="Title for assistant screen context optin. This is also used as the title for a toggle that lets the assistant use whats on the screen in Assistant settings page."> <message name="IDS_ASSISTANT_SCREEN_CONTEXT_TITLE" desc="Title for assistant screen context optin. This is also used as the title for a toggle that lets the assistant use whats on the screen in Assistant settings page.">
Related info Related info
</message> </message>
......
chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.js
View file @ 31fcb756
...@@ -105,7 +105,8 @@ Polymer({ ...@@ -105,7 +105,8 @@ Polymer({
zippy.setAttribute( zippy.setAttribute(
'icon-src', 'icon-src',
'data:text/html;charset=utf-8,' + 'data:text/html;charset=utf-8,' +
encodeURIComponent(zippy.getWrappedIcon(data['iconUri']))); encodeURIComponent(
zippy.getWrappedIcon(data['iconUri'], data['title'])));
zippy.setAttribute('hide-line', true); zippy.setAttribute('hide-line', true);
zippy.setAttribute('toggle-style', true); zippy.setAttribute('toggle-style', true);
zippy.id = 'zippy-' + data['id']; zippy.id = 'zippy-' + data['id'];
......
chrome/browser/resources/chromeos/assistant_optin/assistant_shared_styles.css
View file @ 31fcb756
...@@ -12,6 +12,10 @@ oobe-dialog { ...@@ -12,6 +12,10 @@ oobe-dialog {
height: 100%; height: 100%;
} }
webview {
user-select: none;
}
.container { .container {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
......
chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js
View file @ 31fcb756
...@@ -143,7 +143,8 @@ Polymer({ ...@@ -143,7 +143,8 @@ Polymer({
zippy.setAttribute( zippy.setAttribute(
'icon-src', 'icon-src',
'data:text/html;charset=utf-8,' + 'data:text/html;charset=utf-8,' +
encodeURIComponent(zippy.getWrappedIcon(data['iconUri']))); encodeURIComponent(
zippy.getWrappedIcon(data['iconUri'], data['title'])));
zippy.setAttribute('expand-style', true); zippy.setAttribute('expand-style', true);
var title = document.createElement('div'); var title = document.createElement('div');
......
chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.html
View file @ 31fcb756
...@@ -22,7 +22,8 @@ ...@@ -22,7 +22,8 @@
<div class="flex layout horizontal center"> <div class="flex layout horizontal center">
<div id="value-prop-container"> <div id="value-prop-container">
<div class="flex layout horizontal center"> <div class="flex layout horizontal center">
<img id="user-image"> <img id="user-image"
i18n-values="aria-label:assistantUserImage">
<div class="content" id="user-name"></div> <div class="content" id="user-name"></div>
</div> </div>
<webview id="value-prop-view" tabindex="-1"></webview> <webview id="value-prop-view" tabindex="-1"></webview>
......
chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js
View file @ 31fcb756
...@@ -286,7 +286,8 @@ Polymer({ ...@@ -286,7 +286,8 @@ Polymer({
zippy.setAttribute( zippy.setAttribute(
'icon-src', 'icon-src',
'data:text/html;charset=utf-8,' + 'data:text/html;charset=utf-8,' +
encodeURIComponent(zippy.getWrappedIcon(data['iconUri']))); encodeURIComponent(
zippy.getWrappedIcon(data['iconUri'], data['title'])));
zippy.setAttribute('hide-line', true); zippy.setAttribute('hide-line', true);
zippy.setAttribute('popup-style', true); zippy.setAttribute('popup-style', true);
......
chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js
View file @ 31fcb756
...@@ -36,11 +36,12 @@ Polymer({ ...@@ -36,11 +36,12 @@ Polymer({
* Wrap the icon as a image into a html snippet. * Wrap the icon as a image into a html snippet.
* *
* @param {string} iconUri the icon uri to be wrapped. * @param {string} iconUri the icon uri to be wrapped.
* @param {string} imageLabel the aria label of the image.
* @return {string} wrapped html snippet. * @return {string} wrapped html snippet.
* *
* @private * @private
*/ */
getWrappedIcon: function(iconUri) { getWrappedIcon: function(iconUri, imageLabel) {
return String.raw` return String.raw`
<html> <html>
<style> <style>
...@@ -50,9 +51,10 @@ Polymer({ ...@@ -50,9 +51,10 @@ Polymer({
#icon { #icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
user-select: none;
} }
</style> </style>
<body><img id='icon' src="` + <body><img id="icon" aria-label="` +
iconUri + '"></body></html>'; imageLabel + `" src="` + iconUri + '"></body></html>';
}, },
}); });
chrome/browser/ui/webui/chromeos/login/assistant_optin_flow_screen_handler.cc
View file @ 31fcb756
...@@ -75,6 +75,7 @@ void AssistantOptInFlowScreenHandler::DeclareLocalizedValues( ...@@ -75,6 +75,7 @@ void AssistantOptInFlowScreenHandler::DeclareLocalizedValues(
IDS_ASSISTANT_VALUE_PROP_SKIP_BUTTON); IDS_ASSISTANT_VALUE_PROP_SKIP_BUTTON);
builder->Add("assistantOptinRetryButton", builder->Add("assistantOptinRetryButton",
IDS_ASSISTANT_VALUE_PROP_RETRY_BUTTON); IDS_ASSISTANT_VALUE_PROP_RETRY_BUTTON);
builder->Add("assistantUserImage", IDS_ASSISTANT_OOBE_USER_IMAGE);
builder->Add("assistantVoiceMatchTitle", IDS_ASSISTANT_VOICE_MATCH_TITLE); builder->Add("assistantVoiceMatchTitle", IDS_ASSISTANT_VOICE_MATCH_TITLE);
builder->Add("assistantVoiceMatchMessage", IDS_ASSISTANT_VOICE_MATCH_MESSAGE); builder->Add("assistantVoiceMatchMessage", IDS_ASSISTANT_VOICE_MATCH_MESSAGE);
builder->Add("assistantVoiceMatchNoDspMessage", builder->Add("assistantVoiceMatchNoDspMessage",
......
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