From 59d54e62f78d2f82cb62227d4f74fed9cae6f7fd Mon Sep 17 00:00:00 2001
From: Jeremy Stanley <jeremy@instructure.com>
Date: Mon, 28 Sep 2020 15:28:27 -0600
Subject: [PATCH] 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>
---
 .../plugins/instructure_record/VideoOptionsTray/index.js    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/canvas-rce/src/rce/plugins/instructure_record/VideoOptionsTray/index.js b/packages/canvas-rce/src/rce/plugins/instructure_record/VideoOptionsTray/index.js
index f82507a54ec..06095aaccf8 100644
--- a/packages/canvas-rce/src/rce/plugins/instructure_record/VideoOptionsTray/index.js
+++ b/packages/canvas-rce/src/rce/plugins/instructure_record/VideoOptionsTray/index.js
@@ -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>