Fix embedded media accessibility issues

[bryanpizzillo]

Issue description

ESTIMATE TBD

• Image Carousels
  • [x] Change the image carousel title to a span, keeping the visual display.
  • URLS:
    • https://www-dev-ac.cancer.gov/pets/didi (It is the block titled, "Didi in 3 Poses")
  • Template: docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/block_content/image_carousel/block-content--cgov-image-carousel--full.html.twig
  • Current Code

    <h4>{{ content.field_carousel_image_title }}</h4>

  • [x] Give the new heading span an id. You can do this by:

    <span id="{{ content.field_carousel_image_title['#items'][0].value | striptags | nci_transliterate | clean_id }}">{{ content.field_carousel_image_title }}</span>

  • [x] Add an aria-labelledby attribute to <div class="ic-carousel"> that points to the span ID
• Video Carousels
  • [x] Change the video carousel title to a <figcaption> and place it in <figure class="yt-carousel-selected video center">. Make sure you keep the show-for-sr class since this never had a visual display. The caption is the accessible name for the figure and is the best option here.
  • URLS:
    • https://www-dev-ac.cancer.gov/pets/test-content#the-seer-did-you-know-video-series
  • Template: docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/block_content/video_carousel/block-content--cgov-video-carousel--full.html.twig
  • Current Code

    <h4 class="show-for-sr">{{ block_description }}</h4>

• Video
  • [x] Make some new YAML content
  • Create the file with the filename 807_test_embedded_videos.content.yml
  • The contents should be the YAML in https://github.com/NCIOCPL/cgov-digital-platform/issues/4419#issuecomment-2298900897
    • This has the markup for all 6 of the embedded video displays. It will become a page at /test/embedded-video-test
  • Once you make the file, you can run the following in your container:

    drush yci /var/www/docroot/profiles/custom/cgov_site/modules/custom/cgov_yaml_content 807_test_embedded_videos

  • [x] Change how titles are handled in embedded videos. Change this to a span I guess. There could be better label things, but lets keep it this way for now.
  • URLS:
    • https://www-dev-ac.cancer.gov/types/breast - just make sure the "STATISTICS" card does not break. It does NOT show the title.
    • https://www-dev-ac.cancer.gov/about-cancer/treatment/types/immunotherapy/nonspecific-immune-stimulation-video - just make sure the full page template does not break. It does not show a title above the video either. (The page title is the title)
    • /test/embedded-video-test - This is your new page. This is where you will see titles.
  • Template: docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/media/video/video_macros.twig
  • Current Code

    macro video(name, content, showCaption = true, additionalClasses = "")
    <h4 tabindex="0" class="title">{{ name }}</h4>

[bryanpizzillo]

- entity: 'node'
  type: 'cgov_article'
  langcode: en
  status: 1
  moderation_state:
    value: 'published'
  title:
    value: 'Embedded Video Test'
  field_page_description:
    value: 'Embedded Video Test'
  field_browser_title:
    value: 'Embedded Video Test'
  field_site_section:
    - '#process':
        callback: 'reference'
        args:
          - 'taxonomy_term'
          - vid: 'cgov_site_sections'
            computed_path: '/test'
  field_pretty_url:
    value: 'embedded-video-test'
  field_intro_text:
    - format: "streamlined"
      value: |
        <p>This page is a test of all the embedded video types</p>
  field_article_body:
    - entity: 'paragraph'
      type: 'body_section'
      field_body_section_heading:
        - format: 'simple'
          value: 'Large No Title'
      field_body_section_content:
        - format: 'full_html'
          value: |
            <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
            <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
            <drupal-entity
              data-caption=""
              data-embed-button="cgov_video_button"
              data-entity-embed-display="view_mode:media.video_display_large_no_title"
              data-entity-type="media"
              data-entity-uuid="#process"
              data-cgov-yaml-query-bundle="cgov_video"
              data-cgov-yaml-query-name="Nonspecific Immune Stimulation"
            ></drupal-entity>
            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
    - entity: 'paragraph'
      type: 'body_section'
      field_body_section_heading:
        - format: 'simple'
          value: 'Large With Title'
      field_body_section_content:
        - format: 'full_html'
          value: |
            <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
            <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
            <drupal-entity
              data-caption=""
              data-embed-button="cgov_video_button"
              data-entity-embed-display="view_mode:media.video_display_large_title"
              data-entity-type="media"
              data-entity-uuid="#process"
              data-cgov-yaml-query-bundle="cgov_video"
              data-cgov-yaml-query-name="Nonspecific Immune Stimulation"
            ></drupal-entity>
            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
    - entity: 'paragraph'
      type: 'body_section'
      field_body_section_heading:
        - format: 'simple'
          value: 'Medium No Title'
      field_body_section_content:
        - format: 'full_html'
          value: |
            <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
            <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
            <drupal-entity
              data-caption=""
              data-embed-button="cgov_video_button"
              data-entity-embed-display="view_mode:media.video_display_medium_no_title"
              data-entity-type="media"
              data-entity-uuid="#process"
              data-cgov-yaml-query-bundle="cgov_video"
              data-cgov-yaml-query-name="Nonspecific Immune Stimulation"
            ></drupal-entity>
            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
    - entity: 'paragraph'
      type: 'body_section'
      field_body_section_heading:
        - format: 'simple'
          value: 'Medium With Title'
      field_body_section_content:
        - format: 'full_html'
          value: |
            <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
            <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
            <drupal-entity
              data-caption=""
              data-embed-button="cgov_video_button"
              data-entity-embed-display="view_mode:media.video_display_medium_title"
              data-entity-type="media"
              data-entity-uuid="#process"
              data-cgov-yaml-query-bundle="cgov_video"
              data-cgov-yaml-query-name="Nonspecific Immune Stimulation"
            ></drupal-entity>
            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
    - entity: 'paragraph'
      type: 'body_section'
      field_body_section_heading:
        - format: 'simple'
          value: 'Small No Title'
      field_body_section_content:
        - format: 'full_html'
          value: |
            <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
            <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
            <drupal-entity
              data-caption=""
              data-embed-button="cgov_video_button"
              data-entity-embed-display="view_mode:media.video_display_small_no_title"
              data-entity-type="media"
              data-entity-uuid="#process"
              data-cgov-yaml-query-bundle="cgov_video"
              data-cgov-yaml-query-name="Nonspecific Immune Stimulation"
            ></drupal-entity>
            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>
    - entity: 'paragraph'
      type: 'body_section'
      field_body_section_heading:
        - format: 'simple'
          value: 'Small With Title'
      field_body_section_content:
        - format: 'full_html'
          value: |
            <p>Lorem ipsum dolor sit amet. Hic quaerat molestiae ex enim quae est eaque quod et omnis eligendi. Aut tempore distinctio aut iste perspiciatis qui saepe odio qui tempora eveniet ex aperiam totam non sint inventore.</p>
            <p>Ut sunt minima ut cupiditate sunt quo enim explicabo sed dolor eveniet 33 repellat galisum. Et voluptas porro est distinctio debitis sed molestias maxime ut laboriosam magnam ad expedita voluptates et cupiditate magni quo repellendus officiis.</p>
            <drupal-entity
              data-caption=""
              data-embed-button="cgov_video_button"
              data-entity-embed-display="view_mode:media.video_display_small_title"
              data-entity-type="media"
              data-entity-uuid="#process"
              data-cgov-yaml-query-bundle="cgov_video"
              data-cgov-yaml-query-name="Nonspecific Immune Stimulation"
            ></drupal-entity>
            <p>Ut minus quia et unde harum non voluptatum reiciendis eum quas illum qui molestiae voluptatem et voluptatem ipsum aut numquam aperiam. Ut unde sequi qui illo velit in eligendi alias sed vero assumenda. Et earum voluptas aut dolore neque non eligendi quia sit explicabo ipsum eum sequi corporis! Id praesentium saepe cum voluptatibus eaque et dicta tempore non neque rerum est ipsum eligendi sit asperiores quaerat et sequi Quis.</p>
            <p>Ut quia repudiandae qui facere assumenda et sunt praesentium? Et quas corporis a iure nesciunt aut ipsam sunt et tempore totam id beatae nisi sed velit atque ut quasi laboriosam. Sed asperiores animi ut laudantium exercitationem qui nobis dolores est tempora dolorem non galisum consequatur eos rerum possimus. Ut aliquam amet et ipsam obcaecati et incidunt ipsum est voluptas ullam et sapiente alias!</p>