Problem/Motivation

The existing iframe implementation did not include required accessibility attributes (title and lang), leading to WCAG-related errors reported by automated accessibility tools such as Acquia Web Governance.

Steps to reproduce

Proposed resolution

Implemented title and lang attributes on the iframe to address accessibility compliance issues identified by tools like Acquia Web Governance.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ✅ Update Release Notes
  • ✅ Release varbase-10.1.1, varbase_media-10.1.2

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ahmad.estaitia created an issue. See original summary.

ahmad.estaitia’s picture

Title: Add title and lang to iframe for accessibility » Add title tag and lang attribute to iframe for accessibility

ahmad.estaitia’s picture

Status: Active » Needs review

rajab natshah’s picture

Assigned: Unassigned » josebc
Issue tags: +Accessibility, +a11y

I merged the MR
But followed up with the Full testing round

Having the following may hit a performance issue in projects, If we have 10-20 iframe(s) in the same page
As this will call the resource server ( Youtube, Vimeo, ... ) to get the title from the remote server.
On every load for the page.

  // Add media title from resource if available.
  if (!empty($variables['resource']) && !empty($variables['resource']->getTitle())) {
    $variables['media_title'] = $variables['resource']->getTitle();
  }

Maybe - better to remove this.
I do not recommend using a local patch for this MR in projects.

We had a case before, but was managed with hook_entity_presave

/**
 * Implements hook_entity_presave().
 */
function varbase_media_entity_presave(EntityInterface $entity) {
  if ($entity->getEntityType()->id() == 'media' && $entity->bundle->target_id == 'remote_video') {
    // If the field_provider exists in the remote video media type.
    $field_field_media_remote_video_field_provider = FieldConfig::loadByName('media', 'remote_video', 'field_provider');
    if (isset($field_field_media_remote_video_field_provider)) {
      // Fetch the resource from the URL and save in the field_provider.
      $url_resolver = \Drupal::service('media.oembed.url_resolver');
      $resource_fetcher = \Drupal::service('media.oembed.resource_fetcher');
      $resource_url = $url_resolver->getResourceUrl(($entity->field_media_oembed_video->value));
      $resource = $resource_fetcher->fetchResource($resource_url);
      $provider = strtolower($resource->getProvider()->getName() ?? '');
      if ($entity->field_provider->value != $provider) {
        $entity->set('field_provider', $provider);
      }
    }
  }
}

Easy direction to remove the Add media title from resource if available. ( as we do not want to have any new cache buffer fields )

rajab natshah’s picture

Status: Needs review » Needs work

➖ Performance
Having this will bring a performance issue.

rajab natshah’s picture

One more option:

  • Get the media entity title/name, the one the user/editor filled in when added the remote media.
josebc’s picture

Assigned: josebc » Unassigned

Hello, some small comments
- Duplicate checks for langcodes, remove logic from twig
- Use media entity label instead of OEmbed to allow admins to edit and translate

rajab natshah’s picture

Issue summary: View changes
Status: Needs work » Fixed
Issue tags: +varbase-10.1.1, +varbase_media-10.1.2

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.