Add title attribute to oEmbed iframe for accessibility [#3264297]

Problem/Motivation

The oEmbedFormatter renders remote video content in an iframe element. This element should contain a title attribute for better accessibility.

https://webaim.org/techniques/frames/#title

Proposed resolution

Add the name of the media as the title of the oEmbed iframe

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
✅ Accessibility and Readability
✅ Code review from 1 Varbase core team member
✅ Full testing and approval
✅ Credit contributors
✅ Review with the product owner
✅ Update Release Notes and Update Helper on new feature change/addition
✅ Release varbase-9.0.6, varbase_media-9.0.9

Varbase update type:

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

User interface changes

API changes

Data model changes

Issue #3264297 by hanii.gerges: Added title attribute to oEmbed iframe for accessibility

Issue fork varbase_media-3264297

Show commands

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

Add & fetch this issue fork’s repository

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

Add & fetch this issue fork’s repository

3264297-Update-title-attribute-on-iframes changes, plain diff MR !8
Check out this branch for the first time

Check out existing branch, if you already have it locally
3264297-add-title-attribute compare
Check out this branch for the first time

Check out existing branch, if you already have it locally
9.1.x compare
Check out this branch for the first time

Check out existing branch, if you already have it locally

2 hidden branches

3264297-Add-title-attribute-to-iframes

changes, plain diff MR !1

Check out this branch for the first time

Check out existing branch, if you already have it locally

3264297-Update-title-attribute-to-iframes

changes, plain diff MR !7

Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

14 February 2022 at 15:45

hanii.gerges created an issue. See original summary.

Comment #2

14 February 2022 at 16:09

hanii.gerges opened merge request !1

Comment #3

hanii.gerges commented 14 February 2022 at 16:11

Version:

9.1.x-dev

» 9.0.x-dev

Comment #4

rajab natshah

he/him

commented 14 February 2022 at 16:26

Issue summary:	View changes
Issue tags:		+Accessibility

Comment #5

hanii.gerges commented 15 February 2022 at 09:37

Status:

Active

» Needs review

Comment #6

rajab natshah

he/him

commented 15 February 2022 at 10:38

Status:

Needs review

» Needs work

Thanks, Hani for filing the issue, and the MR :)

Reviewed with Razem.

He liked the fix

Only I had a 2nd code review.
Needs a basic check not to have <iframe title=""> or <iframe title=" ">
In case the oEmbed media type had no name in any case. Or was not filled by the form mode selection.

Comment #7

rajab natshah

he/him

commented 15 February 2022 at 10:36

Issue summary:

View changes

Comment #8

rajab natshah

he/him

commented 28 March 2022 at 12:38

Issue tags:

+varbase-9.0.6

Comment #9

rajab natshah

he/him

commented 21 April 2022 at 08:47

Assigned:	Unassigned	» rajab natshah
Status:	Needs work	» Needs review
Issue tags:		+a11y, +Needs accessibility review, +varbase_media-9.0.9

Comment #10

hanii.gerges commented 21 April 2022 at 08:52

Comment #11

21 April 2022 at 09:03

Rajab Natshah committed 41a3a8d on 9.0.x authored by hanii.gerges

Issue #3264297 by hanii.gerges: Add title attribute to oEmbed iframe for...

Comment #12

21 April 2022 at 09:04

Rajab Natshah committed 1509820 on 9.1.x authored by hanii.gerges

Issue #3264297 by hanii.gerges: Add title attribute to oEmbed iframe for...

Comment #13

21 April 2022 at 09:34

hanii.gerges opened merge request !7

Comment #14

21 April 2022 at 09:37

hanii.gerges closed merge request !7

Comment #15

21 April 2022 at 09:42

hanii.gerges opened merge request !8

Comment #16

21 April 2022 at 09:42

Rajab Natshah closed merge request !1

Comment #17

hanii.gerges commented 21 April 2022 at 09:44

i think instead of isset() we can use !empty()
because empty() will check if the value exists and not empty by default
and the if statement will be like this

if (!empty($media->name->value)) {
  $element[$delta]['#attributes']['title'] = $media->name->value;
}

Made a MR for this.

Comment #18

rajab natshah

he/him

commented 21 April 2022 at 10:00

Agrees with that Hani.
Better to change it. Better coding style too.

Comment #19

21 April 2022 at 10:48

Rajab Natshah committed b8ab87f on 9.1.x authored by hanii.gerges

Issue #3264297 by hanii.gerges: Add title attribute to oEmbed iframe for...

Comment #20

21 April 2022 at 10:49

Rajab Natshah committed cf207c9 on 9.0.x authored by hanii.gerges

Issue #3264297 by hanii.gerges: Add title attribute to oEmbed iframe for...

Comment #21

rajab natshah

he/him

commented 21 April 2022 at 10:55

Issue summary:	View changes
Issue tags:	-Needs accessibility review

Comment #22

rajab natshah

he/him

commented 21 April 2022 at 10:56

Status:

Needs review

» Fixed

Comment #23

rajab natshah

he/him

commented 21 April 2022 at 11:06

Issue summary:

View changes

✅ Released varbase_media-9.0.9

Comment #24

rajab natshah

he/him

commented 26 April 2022 at 13:31

✅ Released varbase-9.0.6

Comment #25

rajab natshah

he/him

commented 26 April 2022 at 15:52

Issue summary:

View changes

Comment #26

10 May 2022 at 15:54

Status:

Fixed

» Closed (fixed)

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