From c70ee346fa52d188ba0ff9676a54439613f20e0b Mon Sep 17 00:00:00 2001
From: Martina Bustacchini <martina.bustacchini@redturtle.it>
Date: Thu, 1 Feb 2024 11:43:59 +0100
Subject: [PATCH] fix: a11y use of Sharing and Actions menus

---
 RELEASE.md                                    |  7 ++
 .../ItaliaTheme/View/Commons/Actions.jsx      | 73 ++++++++++++++-----
 .../ItaliaTheme/View/Commons/Sharing.jsx      |  8 +-
 .../ItaliaTheme/Components/_sharing.scss      |  2 +
 4 files changed, 69 insertions(+), 21 deletions(-)

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 (
-    <UncontrolledDropdown className="d-inline page-actions">
+    <UncontrolledDropdown className="d-inline page-actions" id="page-actions">
       <DropdownToggle
         className={`btn btn-dropdown ps-0`}
         color=""
@@ -81,6 +97,14 @@ const Actions = (props) => {
       <DropdownMenu>
         <LinkList>
           {socials.map((item, i) => {
+            const commonButtonProps = {
+              icon: false,
+              title: item.title,
+              alt: item.title,
+              'aria-label': item.title,
+              id: item.id,
+            };
+
             const icon = (
               <>
                 <Icon
@@ -95,23 +119,32 @@ const Actions = (props) => {
                 <span>{item.title}</span>
               </>
             );
-            return item.id === 'print' ? (
-              <li key={item.id}>
-                <Button
-                  color="link"
-                  icon={false}
-                  tag="button"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    return window.print();
-                  }}
-                >
-                  {icon}
-                </Button>
-              </li>
-            ) : (
-              <LinkListItem href={item.url} key={item.id}>
-                {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
+              <LinkListItem
+                key={item.id}
+                role="menuitem"
+                tabIndex={-1}
+                onKeyDown={handleKeyDown}
+              >
+                {item.id === 'print' && (
+                  <Button {...buttonProps}>{icon}</Button>
+                )}
+                {item.id === 'mailto' && <a {...buttonProps}>{icon}</a>}
               </LinkListItem>
             );
           })}
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 }) => {
       <DropdownMenu>
         <LinkList>
           {socials.map((item, i) => (
-            <LinkListItem href={item.url} key={item.id} target="_target">
+            <LinkListItem
+              href={item.url}
+              key={item.id}
+              target="_target"
+              role="menuitem"
+              tabIndex={-1}
+            >
               <Icon
                 className={undefined}
                 color=""
diff --git a/src/theme/ItaliaTheme/Components/_sharing.scss b/src/theme/ItaliaTheme/Components/_sharing.scss
index cfd855fda..15e98f075 100644
--- a/src/theme/ItaliaTheme/Components/_sharing.scss
+++ b/src/theme/ItaliaTheme/Components/_sharing.scss
@@ -8,9 +8,11 @@
     ul {
       li {
         a.list-item,
+        a.list-item a,
         button.btn-link {
           display: flex;
           align-items: center;
+          font-size: var(--bs-dropdown-font-size);
 
           .icon {
             width: 28px;