Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(129)

Unified Diff: ui/file_manager/audio_player/elements/control_panel.js

Issue 1415953006: Fix accessibility issues in AudioPlayer and VideoPlayer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: ui/file_manager/audio_player/elements/control_panel.js
diff --git a/ui/file_manager/audio_player/elements/control_panel.js b/ui/file_manager/audio_player/elements/control_panel.js
index 89562878932e291d1dcad25ac2b8ebd98db8d363..3427fe4236aa42d343e83e6b40924acb130effa6 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -16,7 +16,9 @@
playing: {
type: Boolean,
value: false,
- notify: true
+ notify: true,
+ reflectToAttribute: true,
+ observer: 'playingChanged_'
},
/**
@@ -88,6 +90,14 @@
type: Boolean,
value: false,
notify: true
+ },
+
+ /**
+ * Dictionary which contains aria-labels for each controls.
+ */
+ ariaLabels: {
+ type: Object,
+ observer: 'ariaLabelsChanged_'
}
},
@@ -147,19 +157,34 @@
},
/**
- * Computes state for play button based on 'playing' property.
- * @return {string}
+ * Invoked when the playing property is changed.
+ * @param {boolean} playing
+ * @private
*/
- computePlayState_: function(playing) {
- return playing ? "playing" : "ended";
+ playingChanged_: function(playing) {
+ if (this.ariaLabels) {
+ this.$.play.setAttribute('aria-label',
+ playing ? this.ariaLabels.pause : this.ariaLabels.play);
+ }
},
/**
- * Computes style for '.filled' element of progress bar.
- * @return {string}
+ * Invoked when the ariaLabels property is changed.
+ * @param {Object} ariaLabels
+ * @private
*/
- computeProgressBarStyle_: function(time, duration) {
- return 'width: ' + (time / duration * 100) + '%;';
+ ariaLabelsChanged_: function(ariaLabels) {
yawano 2015/11/06 05:38:37 small nit: assert(ariaLabels)?
fukino 2015/11/06 10:13:21 Done.
+ // TODO(fukino): Use data bindings.
+ this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider);
yawano 2015/11/06 05:38:37 Is it difficult to use i18nTemplate here as we do
fukino 2015/11/06 10:13:21 I pass translated labels to the custom element bec
+ this.$.shuffle.setAttribute('aria-label', ariaLabels.shuffle);
+ this.$.repeat.setAttribute('aria-label', ariaLabels.repeat);
+ this.$.previous.setAttribute('aria-label', ariaLabels.previous);
+ this.$.play.setAttribute('aria-label',
+ this.playing ? ariaLabels.pause : ariaLabels.play);
+ this.$.next.setAttribute('aria-label', ariaLabels.next);
+ this.$.volume.setAttribute('aria-label', ariaLabels.volume);
+ this.$.playList.setAttribute('aria-label', ariaLabels.playList);
+ this.$.timeSlider.setAttribute('aria-label', ariaLabels.seekSlider);
}
});
})(); // Anonymous closure

Powered by Google App Engine
This is Rietveld 408576698