Skip to content

GitLab

T
tangled
Commit d8ba8493 authored by Kuo Jen Wei's avatar Kuo Jen Wei Committed by Commit Bot
Browse files
Options

Fix a11y bug of CCA in camera view. 

This CL does following changes and fixes following a11y bugs:
1. Fix focus blue border pushing out layout of sibling in mode selector.
2. Fix losing focus when enter/leave setting menus.
3. Relayout the a11y navigation in clockwise order.

Bug: 966755

Change-Id: I175583a032b9309d92516e89f73611e930958cce
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1634571
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Reviewed-by: default avatarSheng-hao Tsao <shenghao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664386}
parent 881f6a4c
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 62 deletions
chrome/browser/resources/chromeos/camera/src/css/main.css
View file @ d8ba8493
...@@ -259,6 +259,10 @@ div.mode-item>span { ...@@ -259,6 +259,10 @@ div.mode-item>span {
text-shadow: none; text-shadow: none;
} }
.mode-item>input:focus + span {
margin-bottom: 6px;
}
button.shutter { button.shutter {
display: none; display: none;
height: 72px; height: 72px;
...@@ -388,7 +392,7 @@ body.mode-switching:not(.streaming) #camera-mode { ...@@ -388,7 +392,7 @@ body.mode-switching:not(.streaming) #camera-mode {
#options-group { #options-group {
bottom: calc((var(--bottom-line) + (var(--big-icon) / 2)) + 30px); bottom: calc((var(--bottom-line) + (var(--big-icon) / 2)) + 30px);
flex-direction: column; flex-direction: column-reverse;
} }
body:not(.multi-camera) #options-group { body:not(.multi-camera) #options-group {
......
chrome/browser/resources/chromeos/camera/src/images/camera_intro_banner_close.svg
View file @ d8ba8493
<?xml version="1.0" encoding="UTF-8"?> <svg width="20" height="20" viewBox="10 10 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M16 5.41L14.59 4 10 8.59 5.41 4 4 5.41 8.59 10 4 14.59 5.41 16 10 11.41 14.59 16 16 14.59 11.41 10z"/></defs><g fill="none" fill-rule="evenodd"><path d="M0 0h40v40H0z"/><use fill="#5F6368" xlink:href="#a" transform="translate(10 10)"/></g></svg>
<svg width="20px" height="20px" viewBox="10 10 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> \ No newline at end of file
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>ic_close</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="16 5.41 14.59 4 10 8.59 5.41 4 4 5.41 8.59 10 4 14.59 5.41 16 10 11.41 14.59 16 16 14.59 11.41 10"></polygon>
</defs>
<g id="ic_close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<rect id="Tap-target" x="0" y="0" width="40" height="40"></rect>
<g id="dense/navigation/close" transform="translate(10.000000, 10.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Color-fill" fill="#5F6368" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>
chrome/browser/resources/chromeos/camera/src/images/camera_intro_banner_icon.svg
View file @ d8ba8493
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 6l2-2h5l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3zM3 8v9h13V8H3zm14.373-5.373L16 2l1.373-.627L18 0l.627 1.373L20 2l-1.373.627L18 4l-.627-1.373zM9.5 15.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#1A73E8" fill-rule="nonzero"/></svg> <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 6l2-2h5l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3zM3 8v9h13V8H3zm14.373-5.373L16 2l1.373-.627L18 0l.627 1.373L20 2l-1.373.627L18 4l-.627-1.373zM9.5 15.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#1A73E8"/></svg>
\ No newline at end of file \ No newline at end of file
chrome/browser/resources/chromeos/camera/src/js/views/settings.js
View file @ d8ba8493
...@@ -39,6 +39,13 @@ cca.views.BaseSettings.prototype = { ...@@ -39,6 +39,13 @@ cca.views.BaseSettings.prototype = {
__proto__: cca.views.View.prototype, __proto__: cca.views.View.prototype,
}; };
/**
* @override
*/
cca.views.BaseSettings.prototype.focus = function() {
this.rootElement_.querySelector('[tabindex]').focus();
};
/** /**
* Opens sub-settings. * Opens sub-settings.
* @param {string} id Settings identifier. * @param {string} id Settings identifier.
......
chrome/browser/resources/chromeos/camera/src/views/main.html
View file @ d8ba8493
...@@ -61,18 +61,15 @@ ...@@ -61,18 +61,15 @@
</div> </div>
<div class="centered-overlay" id="camera-mode"></div> <div class="centered-overlay" id="camera-mode"></div>
</div> </div>
<div id="banner" class="horizontal-center-stripe" aria-live="polite"> <div id="shutters-group" class="buttons right-stripe circle">
<div id="banner-title"> <button id="start-recordvideo" class="shutter" tabindex="0"
<div id="banner-title-icon"></div> i18n-label="record_video_start_button"></button>
<span id="banner-title-text" i18n-content="banner_title"></span> <button id="stop-recordvideo" class="shutter" tabindex="0"
</div> i18n-label="record_video_stop_button"></button>
<div id="banner-msg"> <button id="start-takephoto" class="shutter" tabindex="0"
<span i18n-content="banner_msg"></span> i18n-label="take_photo_button"></button>
<button id="banner-learn-more" <button id="stop-takephoto" class="shutter" tabindex="0"
i18n-content="banner_learn_more_button"> i18n-label="take_photo_cancel_button"></button>
</button>
</div>
<button id="banner-close" i18n-label="banner_close_button"></button>
</div> </div>
<div id="modes-group" class="buttons right-stripe"> <div id="modes-group" class="buttons right-stripe">
<div class="mode-item"> <div class="mode-item">
...@@ -104,47 +101,50 @@ ...@@ -104,47 +101,50 @@
aria-hidden="true"></span> aria-hidden="true"></span>
</div> </div>
</div> </div>
<div id="shutters-group" class="buttons right-stripe circle"> <div class="bottom-stripe right-stripe buttons circle">
<button id="start-recordvideo" class="shutter" tabindex="0" <button id="gallery-enter" tabindex="0"
i18n-label="record_video_start_button"></button> i18n-label="gallery_button" hidden></button>
<button id="stop-recordvideo" class="shutter" tabindex="0"
i18n-label="record_video_stop_button"></button>
<button id="start-takephoto" class="shutter" tabindex="0"
i18n-label="take_photo_button"></button>
<button id="stop-takephoto" class="shutter" tabindex="0"
i18n-label="take_photo_cancel_button"></button>
</div> </div>
<div class="top-stripe right-stripe buttons"> <div id="banner" class="horizontal-center-stripe" aria-live="polite">
<input type="checkbox" id="toggle-mic" tabindex="0" <div id="banner-title">
i18n-label="toggle_mic_button" data-state="mic" <div id="banner-title-icon"></div>
data-key="toggleMic" checked> <span id="banner-title-text" i18n-content="banner_title"></span>
</div>
<div id="banner-msg">
<span i18n-content="banner_msg"></span>
<button id="banner-learn-more"
i18n-content="banner_learn_more_button">
</button>
</div>
<button id="banner-close" i18n-label="banner_close_button"></button>
</div> </div>
<div class="top-stripe left-stripe buttons"> <div class="bottom-stripe left-stripe buttons circle">
<button id="open-settings" tabindex="0" <button id="switch-device" tabindex="0"
i18n-label="settings_button" aria-haspopup="true"></button> i18n-label="switch_camera_button"></button>
</div> </div>
<div id="options-group" class="left-stripe buttons"> <div id="options-group" class="left-stripe buttons">
<input type="checkbox" id="toggle-mirror" tabindex="0"
i18n-label="toggle_mirror_button" data-state="mirror" checked>
<input type="checkbox" id="toggle-grid" tabindex="0"
i18n-label="toggle_grid_button" data-state="grid"
data-key="toggleGrid">
<input type="checkbox" id="toggle-timer" tabindex="0" <input type="checkbox" id="toggle-timer" tabindex="0"
i18n-label="toggle_timer_button" data-state="timer" i18n-label="toggle_timer_button" data-state="timer"
data-key="toggleTimer"> data-key="toggleTimer">
<input type="checkbox" id="toggle-grid" tabindex="0"
i18n-label="toggle_grid_button" data-state="grid"
data-key="toggleGrid">
<input type="checkbox" id="toggle-mirror" tabindex="0"
i18n-label="toggle_mirror_button" data-state="mirror" checked>
</div> </div>
<div class="bottom-stripe left-stripe buttons circle"> <div class="top-stripe left-stripe buttons">
<button id="switch-device" tabindex="0" <button id="open-settings" tabindex="0"
i18n-label="switch_camera_button"></button> i18n-label="settings_button" aria-haspopup="true"></button>
</div>
<div class="bottom-stripe right-stripe buttons circle">
<button id="gallery-enter" tabindex="0"
i18n-label="gallery_button" hidden></button>
</div> </div>
<div class="top-stripe horizontal-center-stripe" id="record-time" hidden> <div class="top-stripe horizontal-center-stripe" id="record-time" hidden>
<div class="icon"></div> <div class="icon"></div>
<div id="record-time-msg"></div> <div id="record-time-msg"></div>
</div> </div>
<div class="top-stripe right-stripe buttons">
<input type="checkbox" id="toggle-mic" tabindex="0"
i18n-label="toggle_mic_button" data-state="mic"
data-key="toggleMic" checked>
</div>
<div class="centered-overlay"> <div class="centered-overlay">
<div id="timer-tick-msg"></div> <div id="timer-tick-msg"></div>
</div> </div>
......
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