ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix closed captioning sidebar label 

previously, the controls to add and remove caption files were
embedded inside their <label>, causing all controls to be read
every time any of the controls was focused

instead of using a label, use a fieldset with a legend

test plan:
 - enable RCE Enhancements and Edit Closed Captions features
 - select a video in rich text and click "Video Options"
 - add some caption files
 - turn on VO and navigate between languages
 - VO should read the focused option and the "Closed Caption/
   Subtitles" legend, not *all* options

flag = none
fixes LS-1456

Change-Id: If495b007e48a0d07124c2813f2ecc161b85e51cc
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/248795
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: James Williams <jamesw@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Jeremy Stanley <jeremy@instructure.com>
This commit is contained in:
Jeremy Stanley 2020-09-28 15:28:27 -06:00
parent 6931030d92
commit 59d54e62f7
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/canvas-rce/src/rce/plugins/instructure_record/VideoOptionsTray/index.js
View File

@ -23,7 +23,7 @@ import {Heading} from '@instructure/ui-elements'
import {RadioInput, RadioInputGroup, Select, TextArea} from '@instructure/ui-forms'
import {IconQuestionLine} from '@instructure/ui-icons'
import {Flex} from '@instructure/ui-flex'
import {FormField} from '@instructure/ui-form-field'
import {FormFieldGroup} from '@instructure/ui-form-field'
import {View} from '@instructure/ui-view'
import {Tooltip, Tray} from '@instructure/ui-overlays'
import {StoreProvider} from '../../shared/StoreContext'
@ -219,7 +219,7 @@ export default function VideoOptionsTray(props) {
</Flex.Item>
{cc_in_rce_video_tray && (
<Flex.Item padding="small">
<FormField label="Closed Captions/Subtitles" id="closedcaptionfield">
<FormFieldGroup description={formatMessage('Closed Captions/Subtitles')}>
<ClosedCaptionPanel
subtitles={subtitles.map(st => ({
locale: st.locale,
@ -230,7 +230,7 @@ export default function VideoOptionsTray(props) {
updateSubtitles={handleUpdateSubtitles}
liveRegion={getLiveRegion}
/>
</FormField>
</FormFieldGroup>
</Flex.Item>
)}
</Flex>