diff --git a/RELEASE.md b/RELEASE.md index a8edf225c..def4334cf 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -41,11 +41,18 @@ - ... --> +## Versione X.X.X (dd/mm/yyyy) + +### Fix + +- [ Accessibilità ] Risolto un problema relativo alla navigazione da tastiera e di gestione del focus nei menu a tendina "Condividi" e "Azioni" nelle testate delle viste dei Content Type che le implementano. + ## Versione 11.3.3 (30/01/2024) ### Migliorie - Migliorato il focus sulle immagini in edit del blocco Immagine quando queste sono allineate a sinistra o a destra. + ### Fix - Sistemato il layout del blocco elenco per i Bandi diff --git a/src/components/ItaliaTheme/View/Commons/Actions.jsx b/src/components/ItaliaTheme/View/Commons/Actions.jsx index ffcbdbfeb..171717446 100644 --- a/src/components/ItaliaTheme/View/Commons/Actions.jsx +++ b/src/components/ItaliaTheme/View/Commons/Actions.jsx @@ -9,7 +9,6 @@ import { LinkListItem, Button, } from 'design-react-kit'; - import { toPublicURL } from '@plone/volto/helpers'; import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; @@ -42,7 +41,7 @@ const messages = defineMessages({ const Actions = (props) => { const intl = useIntl(); const publicUrl = toPublicURL(props.url); - let socials = [ + const socials = [ { id: 'print', attributes: null, @@ -58,8 +57,25 @@ const Actions = (props) => { icon: 'it-mail', }, ]; + const handlePrint = (e) => { + e.preventDefault(); + return window.print(); + }; + const handleKeyDown = (e) => { + if (e.key === 'Enter' || e.code === 'Space') { + const childElement = e.target.firstChild; + if (childElement.tagName === 'BUTTON' || childElement.tagName === 'A') { + // La libreria del dropdown ha dei problemi nel suo focus manager interno. + // Enter e spazio chiudono il menu, quindi fermiamo il bubbling (per chiudere si usa esc, + // come correttamente dichiarato dallo screen reader), poi simuliamo il click + e.stopPropagation(); + childElement.click(); + } + } + }; + return ( - + { {socials.map((item, i) => { + const commonButtonProps = { + icon: false, + title: item.title, + alt: item.title, + 'aria-label': item.title, + id: item.id, + }; + const icon = ( <> { {item.title} ); - return item.id === 'print' ? ( -
  • - -
  • - ) : ( - - {icon} + + let buttonProps = { ...commonButtonProps }; + if (item.id === 'print') + buttonProps = { + ...commonButtonProps, + tag: 'button', + onClick: handlePrint, + color: 'link', + }; + else if (item.id === 'mailto') + buttonProps = { + ...commonButtonProps, + href: item.url, + }; + return ( + // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role#:~:text=within%20the%20menu-,tabindex,-attribute + + {item.id === 'print' && ( + + )} + {item.id === 'mailto' && {icon}} ); })} diff --git a/src/components/ItaliaTheme/View/Commons/Sharing.jsx b/src/components/ItaliaTheme/View/Commons/Sharing.jsx index b9228b5ff..517814583 100644 --- a/src/components/ItaliaTheme/View/Commons/Sharing.jsx +++ b/src/components/ItaliaTheme/View/Commons/Sharing.jsx @@ -85,7 +85,13 @@ const Sharing = ({ url, title }) => { {socials.map((item, i) => ( - +