Skip to content

GitLab

T
tangled
Commit 4c48422d authored by Luciano Pacheco's avatar Luciano Pacheco Committed by Commit Bot
Browse files
Options

Quick view: allow tab to audio and video controls 

Change quick view for audios and videos to allow to use tab to focus
the audio and video HTML5 tag's controls, e.g.: play, slider and
volume.

Add a blue outline for focused elements inside audio and video HTML5
tags, as part of the accessibility to make visually clear what control
is focused.

Change audio to not show the download button since it's already in the
file system and downloading doesn't make sense in that context.

Change video to not show picture-in-picture since it doesn't work for
quick-view.

Bug: 627701, 801522, 848216
Change-Id: Ie46159bc90d2948bbac98d69acaf8b53e62d5e58
Reviewed-on: https://chromium-review.googlesource.com/c/1341777
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: default avatarSam McNally <sammc@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609653}
parent 8d78c42c
Hide whitespace changes
Inline Side-by-side
Showing with 33 additions and 6 deletions
ui/file_manager/file_manager/foreground/elements/files_quick_view.html
View file @ 4c48422d
......@@ -64,7 +64,7 @@
<div class="no-preview">[[noPlaybackText]]</div>
</template>
<template is="dom-if" if="[[contentUrl]]">
<files-safe-media type="video" class="content no-close-on-click" controls autoplay="[[autoplay]]" src="[[contentUrl]]" poster="[[videoPoster]]"></files-safe-media>
<files-safe-media tabindex="0" type="video" class="content no-close-on-click" controls autoplay="[[autoplay]]" src="[[contentUrl]]" poster="[[videoPoster]]"></files-safe-media>
</template>
</template>
<!-- Audio -->
......@@ -72,7 +72,7 @@
<files-safe-media type="image" id="audio-artwork" class="no-close-on-click" src="[[audioArtwork]]" hidden="[[!audioArtwork]]"></files-safe-media>
</template>
<div>
<files-safe-media type="audio" class="no-close-on-click" autoplay="[[autoplay]]" controls src="[[audioUrl_(contentUrl, type)]]" hidden="[[!isAudio_(type)]]"></files-safe-media>
<files-safe-media tabindex="0" type="audio" class="no-close-on-click" controls autoplay="[[autoplay]]" src="[[audioUrl_(contentUrl, type)]]" hidden="[[!isAudio_(type)]]"></files-safe-media>
</div>
<template is="dom-if" if="[[isAudio_(type)]]">
<template is="dom-if" if="[[!contentUrl]]">
......
ui/file_manager/file_manager/foreground/elements/files_safe_audio_webview_content.css
View file @ 4c48422d
......@@ -29,6 +29,11 @@ img {
display: none;
}
#content:focus {
outline: 2px solid rgba(66, 133, 244, 0.5);
outline-offset: -2px;
}
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-play-button {
......@@ -38,3 +43,11 @@ audio::-webkit-media-controls-play-button {
audio::-webkit-media-controls-volume-slider {
display: none;
}
audio:focus,
audio::-webkit-media-controls-timeline:focus,
audio::-webkit-media-controls-mute-button:focus,
audio::-webkit-media-controls-play-button:focus {
outline: 1px solid rgba(66, 133, 244, 0.5);
outline-offset: -1px;
}
ui/file_manager/file_manager/foreground/elements/files_safe_audio_webview_content.html
View file @ 4c48422d
......@@ -9,7 +9,7 @@
<link rel="stylesheet" type="text/css" href="files_safe_audio_webview_content.css">
</head>
<body>
<audio hidden id="content" controls autoplay></audio>
<audio hidden id="content" controls autoplay controlsList="nodownload"></audio>
<script src="files_safe_media_webview_content.js"></script>
</body>
</html>
ui/file_manager/file_manager/foreground/elements/files_safe_media.js
View file @ 4c48422d
......@@ -81,6 +81,13 @@ var FilesSafeMedia = Polymer({
},
ready: function() {
this.addEventListener('focus', (event) => {
if (this.type === 'audio' || this.type === 'video')
// Avoid setting the focus on the files-safe-media itself, rather sends
// it down to its webview element.
if (this.webview_)
this.webview_.focus();
});
window.addEventListener('message', function(event) {
if (event.origin !== FILES_APP_ORIGIN) {
console.log('Unknown origin.');
......
ui/file_manager/file_manager/foreground/elements/files_safe_video_webview_content.css
View file @ 4c48422d
......@@ -40,3 +40,11 @@ video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-volume-slider {
display: none;
}
video:focus,
video::-webkit-media-controls-timeline:focus,
video::-webkit-media-controls-mute-button:focus,
video::-webkit-media-controls-play-button:focus {
outline: 2px solid rgba(66, 133, 244, 0.5);
outline-offset: -2px;
}
ui/file_manager/file_manager/foreground/elements/files_safe_video_webview_content.html
View file @ 4c48422d
......@@ -9,8 +9,7 @@
<link rel="stylesheet" type="text/css" href="files_safe_video_webview_content.css">
</head>
<body>
<video hidden id="content" muted autoplay controls controlsList="nodownload">
</video>
<video hidden id="content" muted autoplay controls controlsList="nodownload" disablePictureInPicture></video>
<script src="files_safe_media_webview_content.js"></script>
</body>
</html>
ui/file_manager/file_manager/main.html
View file @ 4c48422d
......@@ -542,7 +542,7 @@
</div>
<div id="drag-container"></div>
<files-tooltip></files-tooltip>
<files-quick-view id="quick-view"
<files-quick-view tabindex="-1" id="quick-view"
i18n-values="no-playback-text:QUICK_VIEW_NO_PLAYBACK_AVAILABLE;no-preview-text:QUICK_VIEW_NO_PREVIEW_AVAILABLE">
</files-quick-view>
<iframe id="command-dispatcher" hidden aria-hidden="true"></iframe>
......
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