Sets ‘has captions or subtitles accessibility’ label

contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue

@@ -338,7 +338,10 @@
       <!-- Subtitles -->
       <VLayout v-if="videoSelected" row wrap class="section">
         <VFlex xs12>
-          <SubtitlesList :nodeId="firstNode.id" />
+          <SubtitlesList
+            :nodeId="firstNode.id"
+            @addFile="subtitleFileLanguageComparison"
+          />
         </VFlex>
       </VLayout>
 
@@ -384,7 +387,7 @@
   import VisibilityDropdown from 'shared/views/VisibilityDropdown';
   import Checkbox from 'shared/views/form/Checkbox';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
-  import { NEW_OBJECT, FeatureFlagKeys } from 'shared/constants';
+  import { NEW_OBJECT, FeatureFlagKeys, AccessibilityCategories } from 'shared/constants';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
   // Define an object to act as the place holder for non unique values.
@@ -809,6 +812,11 @@
           eventLabel: 'File',
         });
       },
+      subtitleFileLanguageComparison(file) {
+        if (this.oneSelected && this.language === file.language) {
+          this.accessibility = [...this.accessibility, AccessibilityCategories.CAPTIONS_SUBTITLES];
+        }
+      },
     },
     $trs: {
       basicInfoHeader: 'Basic information',

contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue

@@ -11,6 +11,7 @@
       :readonly="readonly"
       :nodeId="nodeId"
       @upload="trackUpload"
+      @addFile="addFileHandler"
     />
   </div>
 
@@ -53,6 +54,9 @@
           eventLabel: 'Related file',
         });
       },
+      addFileHandler(f) {
+        this.$emit('addFile', f);
+      },
     },
     $trs: {
       subtitlesHeader: 'Captions and subtitles',

contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <VList two-line>
+  <VList>
     <SupplementaryItem
       v-for="file in files"
       :key="file.id"
@@ -18,18 +18,20 @@
       @upload="$emit('upload')"
     >
       <template #default="{ openFileDialog }">
-        <VListTile @click.stop>
+        <VListTile inactive class="languageTile py-2">
           <VListTileContent v-if="!addingFile">
             <ActionLink
               data-test="add-file"
               :text="addText"
               @click="addingFile = true"
             />
           </VListTileContent>
-          <VListTileContent v-else style="max-width: 250px; height: auto;">
+          <VListTileContent v-else class="captionLanguageDropdown">
             <LanguageDropdown
+              id="captionLanguage"
               v-model="selectedLanguage"
               data-test="select-language"
+              dropAbove
               :excludeLanguages="currentLanguages"
               hide-details
             />
@@ -117,7 +119,10 @@
     methods: {
       ...mapActions('file', ['updateFile', 'deleteFile']),
       add(file) {
-        this.makeFile(file).then(this.reset);
+        this.makeFile(file).then(f => {
+          this.$emit('addFile', f);
+          this.reset();
+        });
       },
       makeFile(file) {
         return this.updateFile({
@@ -142,3 +147,20 @@
   };
 
 </script>
+<style lang="less" scoped>
+
+  .languageTile:hover {
+    background-color: var(--v-greyBackground-base);
+  }
+
+  /deep/ .languageTile > .v-list__tile {
+    height: 56px;
+  }
+
+  .captionLanguageDropdown {
+    max-width: 250px;
+    height: auto;
+    overflow: visible;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/constants.js

@@ -196,7 +196,7 @@ export const ContentModalities = {
 export const AccessibilityCategoriesMap = {
   // Note: audio is not included, as it is rendered in the UI differently.
   document: ['ALT_TEXT', 'HIGH_CONTRAST', 'TAGGED_PDF'],
-  video: ['SIGN_LANGUAGE', 'AUDIO_DESCRIPTION'],
+  video: ['SIGN_LANGUAGE', 'AUDIO_DESCRIPTION', 'CAPTIONS_SUBTITLES'],
   exercise: ['ALT_TEXT'],
   html5: ['ALT_TEXT', 'HIGH_CONTRAST'],
 };

contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue

@@ -20,7 +20,7 @@
     :menu-props="menuProps"
     :multiple="multiple"
     :chips="multiple"
-    attach="#language"
+    :attach="$attrs.id ? `#${$attrs.id}` : '.language-dropdown'"
     @change="input = ''"
     @focus="$emit('focus')"
   >
@@ -73,6 +73,10 @@
         type: Boolean,
         default: false,
       },
+      dropAbove: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -92,6 +96,7 @@
         return {
           minWidth: 300,
           maxWidth: 300,
+          top: this.dropAbove,
         };
       },
       languages() {

contentcuration/contentcuration/frontend/shared/vuex/file/actions.js

@@ -99,6 +99,7 @@ export function updateFile(context, { id, ...payload }) {
         }
       }
     }
+    return { id, ...fileData };
   });
 }