Skip to content

Commit ddb2aca

Browse files
committed
make media play icon more apparent for visually impaired
Fixes: CNVS-36212 test plan: - initial set-up needs to happen at <Your Canvas URL>/plugins/kaltura (_read wiki for setting up kaltura/notorious_) - once kaltura is activated - navigate to a course - select "pages" from the sub-nav... click the + Page button to create a new one - within the tinymce toolbar there should now be an option to "Record/Upload Media" click that option (locally there may be some limitations with uploading an audio-only file [???]) if so try the "record option"... example with record option: https://screencast.com/t/LlImaQmz5e example with default image: https://www.screencast.com/t/YlUaGOIBGnB9 (had to fake the 2nd screenshot from sandbox version vs local) Change-Id: I5c62c3128e39c1a1152c01d295844c93d7cacbdf Reviewed-on: https://gerrit.instructure.com/109734 Tested-by: Jenkins Reviewed-by: Colleen Palmer <colleen@instructure.com> Product-Review: Colleen Palmer <colleen@instructure.com> QA-Review: Pierce Arner <pierce@instructure.com>
1 parent 0e02030 commit ddb2aca

3 files changed

Lines changed: 26 additions & 17 deletions

File tree

app/coffeescripts/jquery/mediaCommentThumbnail.coffee

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ define [
5454
class='media_comment_thumbnail media_comment_thumbnail-#{htmlEscape(size)}'
5555
>
5656
<span class='media_comment_thumbnail_play_button'>
57-
#{htmlEscape I18n.t 'click_to_view', 'Click to view'}
57+
<span class='screenreader-only'>
58+
#{htmlEscape I18n.t 'click_to_view', 'Click to view'}
59+
</span>
5860
</span>
5961
</span>"
6062

app/stylesheets/components/_g_media_comments.scss

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "base/environment";
2+
13
#media_record_option_holder .record_option {
24
display: block;
35
margin: 0 2px 2px 2px;
@@ -213,30 +215,34 @@ div#audio_upload, div#video_upload {
213215
width: 140px;
214216
height: 100px;
215217
margin: 3px 5px;
218+
box-sizing: border-box;
216219
background: url(/images/blank.png) no-repeat center center;
217-
background-color: #222;
218-
border: 0px solid #000;
219-
display: block;
220-
padding: 2px;
220+
background-color: $electric;
221+
background-size: cover;
222+
display: flex;
223+
justify-content: space-around;
224+
align-items: center;
225+
align-content: center;
226+
padding: 0;
221227
&.media_comment_thumbnail-small {
222228
width: 70px;
223229
height: 50px;
224230
}
225231
}
226232

227233
.media_comment_thumbnail_play_button {
228-
display: inline-block;
229-
// these are the height/width of "play_overlay.png"
230-
height: 100px;
231-
width: 140px;
232-
// accessibly hide text
233-
text-indent: -999px;
234-
overflow: hidden;
235-
background-image: url(/images/play_overlay.png);
234+
width: 50px;
235+
height: 50px;
236+
text-align: center;
237+
background-image: url(/images/icon-arrow-right-white.svg);
238+
background-repeat: no-repeat;
239+
background-size: 40%;
240+
background-position: 55%;
241+
background-color: $electric;
242+
border-radius: 50%;
243+
236244
.media_comment_thumbnail-small & {
237-
// these are the height/width of "play_overlay_small.png"
238-
height: 50px;
239-
width: 70px;
240-
background-image: url(/images/play_overlay_small.png);
245+
width: 25px;
246+
height: 25px;
241247
}
242248
}
Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)