From cc7bd97c46d6f36457123382a34ab6a04b91a28d Mon Sep 17 00:00:00 2001 From: Sabrina Bongiovanni Date: Wed, 28 Feb 2024 09:24:31 +0100 Subject: [PATCH] fix: added aria label to icons across ioComune --- .../Header/HeaderSearch/HeaderSearch.jsx | 2 +- .../ItaliaTheme/Header/SocialHeader.jsx | 8 +++++++- .../ItaliaTheme/Icons/DesignIcon.jsx | 1 + .../ItaliaTheme/Icons/FontAwesomeIcon.jsx | 7 ++++--- src/components/ItaliaTheme/Icons/Icon.jsx | 16 +++++++++++++--- .../ItaliaTheme/Icons/svg/TelegramSVG.jsx | 1 + .../ItaliaTheme/Icons/svg/XTwitterSVG.jsx | 1 + .../View/Commons/Argument/ArgumentIcon.jsx | 19 +++++++++++++++++-- .../PaginaArgomentoView.jsx | 2 +- .../manage/UniversalLink/UniversalLink.jsx | 9 ++++++++- .../theme/Navigation/Navigation.jsx | 18 +++++++++++++++--- 11 files changed, 69 insertions(+), 15 deletions(-) diff --git a/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx b/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx index a3a1797b2..f0ca2a403 100644 --- a/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx +++ b/src/components/ItaliaTheme/Header/HeaderSearch/HeaderSearch.jsx @@ -34,7 +34,7 @@ const HeaderSearch = () => { }} href="#search" > - + { target="_blank" rel="noopener noreferrer" > - + ))} diff --git a/src/components/ItaliaTheme/Icons/DesignIcon.jsx b/src/components/ItaliaTheme/Icons/DesignIcon.jsx index e07e4f8fa..91d6b5887 100644 --- a/src/components/ItaliaTheme/Icons/DesignIcon.jsx +++ b/src/components/ItaliaTheme/Icons/DesignIcon.jsx @@ -53,6 +53,7 @@ const Icon = ({ icon, title, className, size }) => { ? `${title}${name.content}` : name.content, }} + alt={title} /> ); } diff --git a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx index 70b8a39ac..bf6112f35 100644 --- a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx +++ b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx @@ -6,7 +6,7 @@ import React from 'react'; import { fontAwesomeAliases } from 'design-comuni-plone-theme/helpers/index'; const FontAwesomeIcon = (props) => { - const { className, icon, prefix, title } = props; + const { className, icon, prefix, title, socialTitle } = props; const [loadedIcon, setLoadedIcon] = React.useState({ module: null, iconName: '', @@ -35,8 +35,8 @@ const FontAwesomeIcon = (props) => { prefixKey === 'fab' ? 'brands' : prefixKey === 'far' - ? 'regular' - : 'solid', + ? 'regular' + : 'solid', iconName, ]; }; @@ -74,6 +74,7 @@ const FontAwesomeIcon = (props) => { ? `${title}${loadedIcon.module.content}` : loadedIcon.module.content, }} + alt={socialTitle || title} /> ) : icon ? ( diff --git a/src/components/ItaliaTheme/Icons/Icon.jsx b/src/components/ItaliaTheme/Icons/Icon.jsx index 06939fb88..19dbcbe85 100644 --- a/src/components/ItaliaTheme/Icons/Icon.jsx +++ b/src/components/ItaliaTheme/Icons/Icon.jsx @@ -11,7 +11,7 @@ import XTwitterSVG from './svg/XTwitterSVG'; import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme'; const Icon = (props) => { - const { icon, className, color, size, padding, ...rest } = props; + const { icon, className, color, size, padding, title, ...rest } = props; if (icon) { const classes = classNames( 'icon', @@ -35,11 +35,21 @@ const Icon = (props) => { return ; } else if (parts.length > 1) { return ( - + ); } else { return ( - + ); } } diff --git a/src/components/ItaliaTheme/Icons/svg/TelegramSVG.jsx b/src/components/ItaliaTheme/Icons/svg/TelegramSVG.jsx index 3fd17472a..b85ad7949 100644 --- a/src/components/ItaliaTheme/Icons/svg/TelegramSVG.jsx +++ b/src/components/ItaliaTheme/Icons/svg/TelegramSVG.jsx @@ -10,6 +10,7 @@ const TelegramSVG = (props) => ( role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" + alt="Telegram" > diff --git a/src/components/ItaliaTheme/Icons/svg/XTwitterSVG.jsx b/src/components/ItaliaTheme/Icons/svg/XTwitterSVG.jsx index 1d1cad9ef..fa80e83b9 100644 --- a/src/components/ItaliaTheme/Icons/svg/XTwitterSVG.jsx +++ b/src/components/ItaliaTheme/Icons/svg/XTwitterSVG.jsx @@ -10,6 +10,7 @@ const XTwitterSVG = (props) => ( role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" + alt="Twitter" > diff --git a/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx b/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx index e90c2a21a..c26b43d90 100644 --- a/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx +++ b/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useIntl, defineMessages } from 'react-intl'; import PropTypes from 'prop-types'; import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; @@ -8,10 +9,17 @@ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; * @params {object} Dates: object. * @returns {string} Markup of the component. */ -const ArgumentIcon = ({ icon }) => { +const ArgumentIcon = ({ icon, title }) => { + const intl = useIntl(); + return icon ? (
- +
) : null; }; @@ -21,3 +29,10 @@ export default ArgumentIcon; ArgumentIcon.propTypes = { icon: PropTypes.string, }; + +const messages = defineMessages({ + iconTitle: { + id: 'icon_title', + defaultMessage: "Icona per l'argomento {argument_title}", + }, +}); diff --git a/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx b/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx index d834bb72f..ec9e3e494 100644 --- a/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx +++ b/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoView.jsx @@ -87,7 +87,7 @@ const PaginaArgomentoView = ({ content }) => { > - +

{content?.title}

diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx index 1d48aa773..99d4dae2a 100644 --- a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx +++ b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx @@ -22,6 +22,13 @@ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; import config from '@plone/volto/registry'; +const messages = { + externalLink: { + id: 'external_link', + defaultMessage: 'Link esterno', + }, +}; + const UniversalLink = ({ href, item = null, @@ -121,7 +128,7 @@ const UniversalLink = ({ config.settings.siteProperties.markSpecialLinks && ( diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx index c24a48123..61f717481 100644 --- a/src/customizations/volto/components/theme/Navigation/Navigation.jsx +++ b/src/customizations/volto/components/theme/Navigation/Navigation.jsx @@ -100,13 +100,16 @@ const Navigation = ({ pathname }) => { { setCollapseOpen(!collapseOpen); setFocusTrapActive(!focusTrapActive); }} > - + { title={intl.formatMessage(messages.CloseMenu)} onClick={() => setCollapseOpen(!collapseOpen)} > - + @@ -177,6 +185,10 @@ const messages = defineMessages({ id: 'close-menu', defaultMessage: 'Chiudi menu', }, + toggleNavigation: { + id: 'toggle-navigation', + defaultMessage: 'Apri il menu', + }, }); Navigation.propTypes = {