Skip to content
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.

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

Fixed A11y Video Block Issue #5732

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
5 changes: 5 additions & 0 deletions packages/volto/locales/ca/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2558,6 +2558,11 @@ msgstr "Eines personals"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Responsables de la creació del contingut d'aquest article. Introduïu una llista de noms d'usuari, un per línia. El creador principal hauria de ser primer."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/de/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2557,6 +2557,11 @@ msgstr "Persönliche Einstellungen"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Eine Liste von Personen, die an der Erstellung dieses Artikels beteiligt waren. Bitte geben Sie einen Benutzernamen pro Zeile ein. Der Hauptverantwortliche sollte zuerst genannt werden."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr "Video abspielen"

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/en/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2552,6 +2552,11 @@ msgstr ""
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr ""

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr "Play Video"

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/es/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2559,6 +2559,11 @@ msgstr "Herramientas personales"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Las personas responsables de la creación del contenido de este elemento. Por favor, introduzca una lista de nombres de usuarios, uno por linea. El principal autor debe aparecer de primer lugar."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/eu/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2559,6 +2559,11 @@ msgstr "Tresna pertsonalak"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Elementu honen edukia sortzearen arduradunak. Idatzi erabiltzaile-izen bat lerro bakoitzean. Egile nagusia lehenengoa izan beharko litzateke."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/fi/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2557,6 +2557,11 @@ msgstr "Omat työkalut"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Tämän sisällön tuottamiseen osallistuneet käyttäjät. Syötä Yksi käyttäjätunus per rivi. Syötä ensisijainen tekijä ensimmäisenä."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/fr/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2559,6 +2559,11 @@ msgstr "Outils personnelles"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Personnes responsables de la création du contenu de cet article. Veuillez entrer une liste de noms d'utilisateurs, un par ligne. Le créateur principal doit venir en premier."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/it/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2552,6 +2552,11 @@ msgstr "Strumenti"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Persone responsabili della creazione del contenuto di questo elemento. Inserisci un elenco di nomi, uno per riga. L'autore principale dovrebbe essere messo al primo posto."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/ja/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2557,6 +2557,11 @@ msgstr "個人設定"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "このアイテムのコンテンツ作成責任者。リーダーを先頭にして、ユーザー名を1行に1名ずつ入力してください。"

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/nl/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2556,6 +2556,11 @@ msgstr ""
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Gebruikers die verantwoordelijk zijn voor de inhoud van dit item. De eindverantwoordelijke vermeldt u als eerste."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/pt/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2557,6 +2557,11 @@ msgstr ""
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Pessoas responsáveis pela criação de conteúdo deste item. Pro favor escreva uma lista de nomes de utilizador, um por linha. O criador principal deve estar em primeiro lugar."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/pt_BR/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2558,6 +2558,11 @@ msgstr "Ferramentas pessoais"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Pessoas responsáveis pela criação do conteúdo deste item. Por favor, insira uma lista de nomes de usuário, um por linha. O autor principal deve vir primeiro."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/ro/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2552,6 +2552,11 @@ msgstr "Instrumente personale"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "Persoane responsabile de crearea conținutului acestui articol. Vă rugăm să introduceți o listă cu numele de utilizator, unul pe fiecare linie. Creatorul principal ar trebui să vină pe primul loc."

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
7 changes: 6 additions & 1 deletion packages/volto/locales/volto.pot
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Plone\n"
"POT-Creation-Date: 2024-01-12T09:21:12.378Z\n"
"POT-Creation-Date: 2024-02-05T15:09:34.846Z\n"
"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
"Content-Type: text/plain; charset=utf-8\n"
Expand Down Expand Up @@ -2554,6 +2554,11 @@ msgstr ""
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr ""

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/zh_CN/LC_MESSAGES/volto.po
Original file line number Diff line number Diff line change
Expand Up @@ -2558,6 +2558,11 @@ msgstr "个人工具"
msgid "Persons responsible for creating the content of this item. Please enter a list of user names, one per line. The principal creator should come first."
msgstr "负责创建此条目内容的人员。请输入用户名列表,每行一个。主要创建者应放在首位。"

#. Default: "Play Video"
#: components/manage/Blocks/Video/Body
msgid "Play Video"
msgstr ""

#. Default: "Please choose an existing content as source for this element"
#: components/manage/Blocks/Teaser/DefaultBody
msgid "Please choose an existing content as source for this element"
Expand Down
1 change: 1 addition & 0 deletions packages/volto/news/5732.bugfix
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fixed the missing aira-label on Video-Blocks @Molochem
Molochem marked this conversation as resolved.
Show resolved Hide resolved
12 changes: 11 additions & 1 deletion packages/volto/src/components/manage/Blocks/Video/Body.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { Embed, Message } from 'semantic-ui-react';
import cx from 'classnames';
import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
Expand Down Expand Up @@ -58,6 +58,8 @@ const getVideoIDAndPlaceholder = (url) => {
};

const Body = ({ data, isEditMode }) => {
const intl = useIntl();

let placeholder = data.preview_image
? isInternalURL(data.preview_image)
? `${flattenToAppURL(data.preview_image)}/@@images/image`
Expand All @@ -66,6 +68,13 @@ const Body = ({ data, isEditMode }) => {

const { videoID, listID, thumbnailURL } = getVideoIDAndPlaceholder(data.url);

const messages = defineMessages({
arialabel: {
id: 'Play Video',
defaultMessage: 'Play Video',
},
});

placeholder = !placeholder ? thumbnailURL : placeholder;

const ref = React.createRef();
Expand All @@ -84,6 +93,7 @@ const Body = ({ data, isEditMode }) => {
tabIndex: 0,
onKeyPress: onKeyDown,
ref: ref,
'aria-label': intl.formatMessage(messages.arialabel),
};

return (
Expand Down
43 changes: 29 additions & 14 deletions packages/volto/src/components/manage/Blocks/Video/View.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import React from 'react';
import renderer from 'react-test-renderer';
import View from './View';
import config from '@plone/volto/registry';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-intl-redux';

const mockStore = configureStore();

config.blocks.blocksConfig = {
video: {
Expand All @@ -20,29 +24,40 @@ config.blocks.blocksConfig = {
},
};

const store = mockStore({
intl: {
locale: 'en',
messages: {},
},
});

test('renders a view video component', () => {
const component = renderer.create(
<View
data={{
'@type': 'video',
url: 'https://youtu.be/KqjeO_ekW3g',
}}
/>,
<Provider store={store}>
<View
data={{
'@type': 'video',
url: 'https://youtu.be/KqjeO_ekW3g',
}}
/>
</Provider>,
);
const json = component.toJSON();
expect(json).toMatchSnapshot();
});

test('renders a view video component with placeholder', () => {
const component = renderer.create(
<View
data={{
'@type': 'video',
url: 'https://youtu.be/KqjeO_ekW3g',
preview_image:
'https://github.com/plone/volto/raw/main/logos/volto-colorful.png',
}}
/>,
<Provider store={store}>
<View
data={{
'@type': 'video',
url: 'https://youtu.be/KqjeO_ekW3g',
preview_image:
'https://github.com/plone/volto/raw/main/logos/volto-colorful.png',
}}
/>
</Provider>,
);
const json = component.toJSON();
expect(json).toMatchSnapshot();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports[`renders a youtube video body component 1`] = `
className="video-inner"
>
<div
aria-label="Play Video"
className="ui 16:9 embed"
onClick={[Function]}
onKeyPress={[Function]}
Expand All @@ -44,6 +45,7 @@ exports[`renders a youtube video body component in edit mode 1`] = `
className="video-inner"
>
<div
aria-label="Play Video"
className="ui 16:9 embed"
onClick={[Function]}
onKeyPress={[Function]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ exports[`renders an edit video block component 1`] = `
className="video-inner"
>
<div
aria-label="Play Video"
className="ui 16:9 embed"
onClick={[Function]}
onKeyPress={[Function]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ exports[`renders a view video component 1`] = `
className="video-inner"
>
<div
aria-label="Play Video"
className="ui 16:9 embed"
onClick={[Function]}
onKeyPress={[Function]}
Expand Down Expand Up @@ -35,6 +36,7 @@ exports[`renders a view video component with placeholder 1`] = `
className="video-inner"
>
<div
aria-label="Play Video"
className="ui 16:9 embed"
onClick={[Function]}
onKeyPress={[Function]}
Expand Down