Skip to content

OEL-4643: Media Copyright Accessibility improvements #551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
piotrsmykaj merged 9 commits into from
May 7, 2026
Merged

OEL-4643: Media Copyright Accessibility improvements #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
69f3b91
OEL-4643: Add copyright_label.
piotrsmykaj Apr 9, 2026
3c4ef31
OEL-4643: Add the "aria-describedby" attribute to the <img> tag.
piotrsmykaj Apr 10, 2026
92c34b7
OEL-4643: Update BCL.
piotrsmykaj Apr 10, 2026
12cd380
OEL-4643: Fix tests.
piotrsmykaj Apr 12, 2026
d904582
OEL-4643: If the <figure> and <figcaption> are done correctly, we don…
piotrsmykaj Apr 16, 2026
855ca87
OEL-4643: Better formatting and changed copyright label to be more ge…
piotrsmykaj Apr 21, 2026
9e4c49e
OEL-4643: Update BCL.
piotrsmykaj Apr 21, 2026
c2f6757
OEL-4643: Update test.
piotrsmykaj Apr 21, 2026
0f2e103
OEL-4643: Update BCL.
piotrsmykaj May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions includes/pattern.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,3 +311,14 @@ function oe_bootstrap_theme_preprocess_pattern_card(array &$variables): void {
$variables['bc_card_search_image_hide_on_mobile'] = BackwardCompatibility::getSetting('card_search_image_hide_on_mobile');
$variables['bc_card_search_use_grid_classes'] = BackwardCompatibility::getSetting('card_search_use_grid_classes');
}

/**
* Implements hook_preprocess_HOOK() for listing pattern.
*/
function oe_bootstrap_theme_preprocess_pattern_listing(array &$variables): void {
foreach ($variables['items'] as &$item) {
if (!empty($item['image_copyright'])) {
$item['image_copyright_label'] = t('Image credit:');
}
}
}
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
"production": "npm-run-all build:*"
},
"devDependencies": {
"@openeuropa/bcl-builder": "^1.11",
"@openeuropa/bcl-theme-default": "^1.11",
"@openeuropa/bcl-builder": "0.4643.202605061520",
"@openeuropa/bcl-theme-default": "0.4643.202605061520",
"bootstrap-ie11": "5.0.2",
"chokidar-cli": "^3.0.0",
"copyfiles": "2.4.1",
Expand Down
1 change: 1 addition & 0 deletions templates/patterns/banner/pattern-banner.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
description: description,
link: call_to_action,
copyright: (variant == 'image' or variant == 'image_shade') ? copyright : '',
copyright_label: (variant == 'image' or variant == 'image_shade') ? 'Image credit:'|t : '',
Comment thread
donquixote marked this conversation as resolved.
image: variant == 'image' or variant == 'image_shade' ? image : '' ,
content_classes: content_classes,
attributes: attributes,
Expand Down
1 change: 1 addition & 0 deletions templates/patterns/card/pattern-card.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
'title': title,
'title_tag': title_tag,
'image_copyright': image_copyright,
'image_copyright_label': 'Image credit:'|t,
'subtitle': (subtitle is not empty) ? {
'content': subtitle,
} : {},
Expand Down
1 change: 1 addition & 0 deletions templates/patterns/carousel/pattern-carousel.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
{% set _slides = _slides|merge([_item]) %}
{% endfor %}
{% include '@oe-bcl/carousel' with {
'copyright_label': 'Image credit:'|t,
'title': title,
'title_tag': title_tag,
'id': carousel_id,
Expand Down
1 change: 1 addition & 0 deletions templates/patterns/content_banner/pattern-content-banner.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
'alt': image.alt,
} : {},
'copyright': copyright,
'copyright_label': 'Image credit:'|t,
'image_size': image_size ?? 'lg',
'badges': _badges,
'links': links,
Expand Down
1 change: 1 addition & 0 deletions templates/patterns/featured_media/pattern-featured-media.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
'content_classes': 'bg-light p-3',
'ratio': ratio,
'copyright': copyright,
'copyright_label': image is not empty ? 'Image credit:'|t : 'Copyright:'|t,
} only %}
{% endmacro %}

Expand Down
1 change: 1 addition & 0 deletions templates/patterns/gallery/pattern-gallery.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
caption: _item.is_playable ? '' : _item.caption,
caption_title: _item.is_playable ? '' : _item.caption_title,
link: _item.is_playable ? '' : _item.link,
copyright_label: _item.is_playable ? 'Copyright:'|t : 'Image credit:'|t,
})),
} only %}
{% endblock %}
2 changes: 1 addition & 1 deletion tests/src/Kernel/fixtures/markup_rendering_patterns/card.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,4 +179,4 @@ card_with_image_copyright:
'article.card img.card-img-top': 1
'article.card .bcl-card__image-footer .bcl-copyright': 1
equals:
'article.card .bcl-copyright': '© 2024 Example Organisation'
'article.card .bcl-copyright': '<span class="visually-hidden">Image credit: </span>© 2024 Example Organisation'
28 changes: 14 additions & 14 deletions tests/src/Kernel/fixtures/markup_rendering_patterns/featured_media.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ featured_media_image_not_wrapper:
'div.bcl-featured-media > div.row > div.col-12.col-md-4': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-4 > figure': 1
'figure > img.img-fluid.flex-end-100': 1
'figure > figcaption.bg-light.p-3': 1
'figure > figcaption > div.bg-light.p-3': 1
'h2': 0
'h5': 0
'a': 0
'.md-6,.order-1,.order-2': 0
equals:
'figcaption': 'Media description text goes here.'
'figcaption > div.bg-light.p-3': 'Media description text goes here.'
featured_media_image_with_copyright_overlay:
render:
'#type': pattern
Expand Down Expand Up @@ -75,15 +75,15 @@ featured_media_image_with_title_tag:
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > figure': 1
'figure > img.img-fluid.flex-end-100': 1
'figure > figcaption.bg-light.p-3': 1
'figure > figcaption > div.bg-light.p-3': 1
'h1.mb-4': 1
'h5': 0
'a': 0
'.md-6': 0
equals:
'h1.bcl-heading': 'Title'
'div.col-12.col-md-6.order-1': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
'figcaption > div.bg-light.p-3': 'Media description text goes here.'
featured_media_image_with_text_aligned_left:
render:
'#type': pattern
Expand Down Expand Up @@ -113,15 +113,15 @@ featured_media_image_with_text_aligned_left:
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > figure': 1
'figure > img.img-fluid.flex-end-100': 1
'figure > figcaption.bg-light.p-3': 1
'figure > figcaption > div.bg-light.p-3': 1
'h2.mb-4': 1
'h5': 0
'a': 0
'.md-6': 0
equals:
'h2.bcl-heading': 'Title'
'div.col-12.col-md-6.order-1': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
'figcaption > div.bg-light.p-3': 'Media description text goes here.'
featured_media_image_with_text_aligned_right:
render:
'#type': pattern
Expand Down Expand Up @@ -151,15 +151,15 @@ featured_media_image_with_text_aligned_right:
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'figure > img.img-fluid.flex-end-100': 1
'figure > figcaption.bg-light.p-3': 1
'figure > figcaption > div.bg-light.p-3': 1
'h2.mb-4': 1
'h5': 0
'a': 0
'.md-6': 0
equals:
'h2': 'Title'
'div.col-12.col-md-6.order-2': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
'figcaption > div.bg-light.p-3': 'Media description text goes here.'
featured_media_iframe_not_wrapper:
render:
'#type': pattern
Expand All @@ -186,13 +186,13 @@ featured_media_iframe_not_wrapper:
'div.bcl-featured-media > div.row > div.col-12.col-md-4': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-4 > figure': 1
'figure > div.ratio.ratio-16x9': 1
'figure > figcaption.bg-light.p-3': 1
'figure > figcaption > div.bg-light.p-3': 1
'h2': 0
'h5': 0
'a': 0
'.md-6,.order-1,.order-2': 0
equals:
'figcaption': 'Media description text goes here.'
'figcaption > div.bg-light.p-3': 'Media description text goes here.'
featured_media_iframe_with_text_container_left_aligned_with_default_ratio:
render:
'#type': pattern
Expand Down Expand Up @@ -224,15 +224,15 @@ featured_media_iframe_with_text_container_left_aligned_with_default_ratio:
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > figure': 1
'figure > div.ratio.ratio-16x9': 1
'figure > figcaption.bg-light.p-3': 1
'figure > figcaption > div.bg-light.p-3': 1
'h2.mb-4': 1
'h5': 0
'a': 0
'.md-6': 0
equals:
'h2': 'Title'
'div.col-12.col-md-6.order-1': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
'figcaption > div.bg-light.p-3': 'Media description text goes here.'
featured_media_iframe_with_text_container_right_aligned_with_link_ratio_21x9:
render:
'#type': pattern
Expand Down Expand Up @@ -269,15 +269,15 @@ featured_media_iframe_with_text_container_right_aligned_with_link_ratio_21x9:
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > a': 1
'figure > div.ratio.ratio-21x9': 1
'figure > figcaption.bg-light.p-3': 1
'figure > figcaption > div.bg-light.p-3': 1
'h2.mb-4': 1
'h5': 0
'a': 1
'a[href="#example"]': 1
'.md-6': 0
equals:
'h2': 'Title'
'figcaption': 'Media description text goes here.'
'figcaption > div.bg-light.p-3': 'Media description text goes here.'
contains:
'div.col-12.col-md-6.order-2': 'Lorem Ipsum dolor sit amet.'
'div.col-12.col-md-6.order-2 a': 'View all'
Expand Down
8 changes: 4 additions & 4 deletions tests/src/Kernel/fixtures/markup_rendering_patterns/listing.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -546,7 +546,7 @@ listing_default_1_col_with_image_copyright:
'article.listing-item': 1
'article.listing-item .bcl-card__image-footer .bcl-copyright': 1
equals:
'article.listing-item .bcl-copyright': '© 2024 Example Organisation'
'article.listing-item .bcl-copyright': '<span class="visually-hidden">Image credit: </span>© 2024 Example Organisation'
listing_default_2_col_with_image_copyright:
render:
'#type': pattern
Expand All @@ -568,7 +568,7 @@ listing_default_2_col_with_image_copyright:
'article.listing-item': 1
'article.listing-item .bcl-card__image-footer .bcl-copyright': 1
equals:
'article.listing-item .bcl-copyright': '© 2024 Example Organisation'
'article.listing-item .bcl-copyright': '<span class="visually-hidden">Image credit: </span>© 2024 Example Organisation'
listing_default_1_col_highlight_with_image_copyright:
render:
'#type': pattern
Expand All @@ -591,7 +591,7 @@ listing_default_1_col_highlight_with_image_copyright:
'article.listing-item--highlight .bcl-card__image-footer .bcl-copyright': 1
'article.listing-item--highlight .card-body.pt-3': 1
equals:
'article.listing-item--highlight .bcl-copyright': '© 2024 Example Organisation'
'article.listing-item--highlight .bcl-copyright': '<span class="visually-hidden">Image credit: </span>© 2024 Example Organisation'
listing_default_2_col_highlight_with_image_copyright:
render:
'#type': pattern
Expand All @@ -614,4 +614,4 @@ listing_default_2_col_highlight_with_image_copyright:
'article.listing-item--highlight .bcl-card__image-footer .bcl-copyright': 1
'article.listing-item--highlight .card-body.pt-3': 1
equals:
'article.listing-item--highlight .bcl-copyright': '© 2024 Example Organisation'
'article.listing-item--highlight .bcl-copyright': '<span class="visually-hidden">Image credit: </span>© 2024 Example Organisation'
Loading