Merge pull request #3649 from bjester/accessibility-tooltips

Hide tooltip for certain accessibility options and reorder them
learningequality · Sep 19, 2022 · 99db2a2 · 99db2a2
2 parents 98e70e1 + 0aa17f1
commit 99db2a2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/...entcuration/contentcuration/frontend/channelEdit/components/edit/AccessibilityOptions.vue b/...entcuration/contentcuration/frontend/channelEdit/components/edit/AccessibilityOptions.vue
@@ -18,6 +18,7 @@
             <span class="text-xs-left">{{ accessibilityItem.label }}</span>
             &nbsp;
             <HelpTooltip
+              v-if="accessibilityItem.showTooltip"
               :text="$tr(accessibilityItem.help)"
               bottom
               class="px-2"
@@ -40,6 +41,9 @@
   import HelpTooltip from 'shared/views/HelpTooltip';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
+  // A list of accessibility category values for which to hide the tooltip
+  const HideTooltips = [AccessibilityCategories.CAPTIONS_SUBTITLES];
+
   export default {
     name: 'AccessibilityOptions',
     components: {
@@ -70,15 +74,14 @@
        * List of accessibility options for all content kinds except for audio
        */
       showCorrectAccessibilityList() {
-        return Object.keys(AccessibilityCategories)
-          .filter(key => AccessibilityCategoriesMap[this.kind].includes(key))
-          .map(key => {
-            return {
-              label: this.translateMetadataString(camelCase(key)),
-              value: AccessibilityCategories[key],
-              help: camelCase(key),
-            };
-          });
+        return AccessibilityCategoriesMap[this.kind].map(key => {
+          return {
+            label: this.translateMetadataString(camelCase(key)),
+            value: AccessibilityCategories[key],
+            help: camelCase(key),
+            showTooltip: !HideTooltips.includes(AccessibilityCategories[key]),
+          };
+        });
       },
     },
     $trs: {

diff --git a/...ntentcuration/frontend/channelEdit/components/edit/__tests__/accessibilityOptions.spec.js b/...ntentcuration/frontend/channelEdit/components/edit/__tests__/accessibilityOptions.spec.js
@@ -49,6 +49,8 @@ describe('AccessibilityOptions', () => {
     expect(wrapper.find('[data-test="checkbox-Tagged PDF"]').exists()).toBe(false);
     expect(wrapper.find('[data-test="checkbox-Has sign language captions"]').exists()).toBe(true);
     expect(wrapper.find('[data-test="checkbox-Has audio descriptions"]').exists()).toBe(true);
+    expect(wrapper.find('[data-test="checkbox-Has captions or subtitles"]').exists()).toBe(true);
+    expect(wrapper.find('[data-test="tooltip-Has captions or subtitles"]').exists()).toBe(false);
   });
 
   it('should display the correct list of accessibility options if resource is an exercise/practice', () => {

diff --git a/contentcuration/contentcuration/frontend/shared/constants.js b/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', 'CAPTIONS_SUBTITLES'],
+  video: ['CAPTIONS_SUBTITLES', 'AUDIO_DESCRIPTION', 'SIGN_LANGUAGE'],
   exercise: ['ALT_TEXT'],
   html5: ['ALT_TEXT', 'HIGH_CONTRAST'],
 };

diff --git a/integration_testing/features/wip-studio-edit-modal/wip-edit-accessibility-field.feature b/integration_testing/features/wip-studio-edit-modal/wip-edit-accessibility-field.feature
@@ -3,7 +3,7 @@ Feature: Edit *Accessibility* field
 
 # Comment here
 
-	Background: 
+	Background:
 		Given I am signed into Studio
 			And I am in an editable channel
 		When I right click <resource>
@@ -13,8 +13,9 @@ Feature: Edit *Accessibility* field
 
 	Scenario: View options for .MP4
 		Given I am viewing an .MP4 in the edit modal
-		Then I see a checkbox that says *Has sign language captions*
+		Then I see a checkbox that says *Has captions or subtitles*
 			And I see a checkbox that says *Has audio descriptions*
+			And I see a checkbox that says *Has sign language captions*
 
 	Scenario: View tooltips for .MP4
 		Given I am viewing an .MP4 in the edit modal