io-sanita-theme 2.2.0 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.2.1](https://github.com/RedTurtle/io-sanita-theme/compare/2.2.0...2.2.1) (2025-02-12)
+
+### Bug Fixes
+
+* a11y focus and enabled PageLoader ([40b83d8](https://github.com/RedTurtle/io-sanita-theme/commit/40b83d8676e82cc60967952cf271a398653b0517))
+* a11y icons ([9214b5c](https://github.com/RedTurtle/io-sanita-theme/commit/9214b5c7788054a947ba134c0cf26cb3ed292b4f))
+* messages ([fb5e06f](https://github.com/RedTurtle/io-sanita-theme/commit/fb5e06ff01def1e6e4bd9f2561981158df3c4eef))
+
+### Maintenance
+
+* info ([2d6a299](https://github.com/RedTurtle/io-sanita-theme/commit/2d6a29953b23b20b342343e0d0b8cd743b28079b))
+* updated bootstrap-italia ([995fec8](https://github.com/RedTurtle/io-sanita-theme/commit/995fec8e4e910d964f412a02169823d9deafab11))
+* updated customized theme/View to add AlternatHrefLangs ([70bba5a](https://github.com/RedTurtle/io-sanita-theme/commit/70bba5a54dba2159a3bf1f5193b8d6d974baad21))
+
 ## [2.2.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.1.0...2.2.0) (2025-02-06)
 
 ### Features

package/RELEASE.md

@@ -41,6 +41,15 @@
 - ...
  -->
 
+## Versione x.x.x (x/x/x)
+
+### Migliorie
+
+- aggiunto il tag <lin rel="canonical"> per tutte le pagine, come suggerito da consulente SEO
+- aggiunta la barra di loading nella parte alta della pagina quando si sta caricando un contenuto
+- a11y - migliorata l'accessibilità del sito per quanto riguarda le icone
+- a11y - migliorato il contrasto del focus sugli elementi con la navigazione da tastiera
+
 ## Versione 2.1.0 (05/02/2025)
 
 ### Novità

package/locales/de/LC_MESSAGES/volto.po

@@ -321,7 +321,7 @@ msgid "Linkto title"
 msgstr ""
 
 #. Default: "Sto caricando la pagina richiesta..."
-#: components/AppExtras/PageLoader
+#: components/AppExtras/PageLoader/PageLoader
 msgid "Loading page..."
 msgstr "Seite wird geladen..."
 
@@ -622,6 +622,11 @@ msgstr ""
 msgid "Uploading image"
 msgstr ""
 
+#. Default: "Utente"
+#: components/layout/Header/HeaderSlim/HeaderLogin
+msgid "User"
+msgstr ""
+
 #. Default: "Vai alla pagina"
 #: components/layout/Footer/FooterInfos
 #: components/layout/Footer/FooterNavigation
@@ -2476,6 +2481,16 @@ msgstr ""
 msgid "search"
 msgstr ""
 
+#. Default: "Nascondi tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-hideAllSections"
+msgstr ""
+
+#. Default: "Mostra tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-showAllSections"
+msgstr ""
+
 #. Default: "Filtro per Categoria"
 #: components/Blocks/SearchBandi/DefaultFilters
 msgid "searchBlock_categoria_filter"

package/locales/en/LC_MESSAGES/volto.po

@@ -316,7 +316,7 @@ msgid "Linkto title"
 msgstr ""
 
 #. Default: "Sto caricando la pagina richiesta..."
-#: components/AppExtras/PageLoader
+#: components/AppExtras/PageLoader/PageLoader
 msgid "Loading page..."
 msgstr "Loading page..."
 
@@ -617,6 +617,11 @@ msgstr ""
 msgid "Uploading image"
 msgstr ""
 
+#. Default: "Utente"
+#: components/layout/Header/HeaderSlim/HeaderLogin
+msgid "User"
+msgstr ""
+
 #. Default: "Vai alla pagina"
 #: components/layout/Footer/FooterInfos
 #: components/layout/Footer/FooterNavigation
@@ -2471,6 +2476,16 @@ msgstr "Deadline for requests for clarification"
 msgid "search"
 msgstr "Search"
 
+#. Default: "Nascondi tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-hideAllSections"
+msgstr ""
+
+#. Default: "Mostra tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-showAllSections"
+msgstr ""
+
 #. Default: "Filtro per Categoria"
 #: components/Blocks/SearchBandi/DefaultFilters
 msgid "searchBlock_categoria_filter"

package/locales/es/LC_MESSAGES/volto.po

@@ -323,7 +323,7 @@ msgid "Linkto title"
 msgstr ""
 
 #. Default: "Sto caricando la pagina richiesta..."
-#: components/AppExtras/PageLoader
+#: components/AppExtras/PageLoader/PageLoader
 msgid "Loading page..."
 msgstr "Cargando página..."
 
@@ -624,6 +624,11 @@ msgstr ""
 msgid "Uploading image"
 msgstr ""
 
+#. Default: "Utente"
+#: components/layout/Header/HeaderSlim/HeaderLogin
+msgid "User"
+msgstr ""
+
 #. Default: "Vai alla pagina"
 #: components/layout/Footer/FooterInfos
 #: components/layout/Footer/FooterNavigation
@@ -2478,6 +2483,16 @@ msgstr ""
 msgid "search"
 msgstr "Búsqueda"
 
+#. Default: "Nascondi tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-hideAllSections"
+msgstr ""
+
+#. Default: "Mostra tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-showAllSections"
+msgstr ""
+
 #. Default: "Filtro per Categoria"
 #: components/Blocks/SearchBandi/DefaultFilters
 msgid "searchBlock_categoria_filter"

package/locales/fr/LC_MESSAGES/volto.po

@@ -323,7 +323,7 @@ msgid "Linkto title"
 msgstr ""
 
 #. Default: "Sto caricando la pagina richiesta..."
-#: components/AppExtras/PageLoader
+#: components/AppExtras/PageLoader/PageLoader
 msgid "Loading page..."
 msgstr "Chargement des pages..."
 
@@ -624,6 +624,11 @@ msgstr ""
 msgid "Uploading image"
 msgstr ""
 
+#. Default: "Utente"
+#: components/layout/Header/HeaderSlim/HeaderLogin
+msgid "User"
+msgstr ""
+
 #. Default: "Vai alla pagina"
 #: components/layout/Footer/FooterInfos
 #: components/layout/Footer/FooterNavigation
@@ -2478,6 +2483,16 @@ msgstr ""
 msgid "search"
 msgstr "Rechercher"
 
+#. Default: "Nascondi tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-hideAllSections"
+msgstr ""
+
+#. Default: "Mostra tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-showAllSections"
+msgstr ""
+
 #. Default: "Filtro per Categoria"
 #: components/Blocks/SearchBandi/DefaultFilters
 msgid "searchBlock_categoria_filter"

package/locales/it/LC_MESSAGES/volto.po

@@ -316,7 +316,7 @@ msgid "Linkto title"
 msgstr ""
 
 #. Default: "Sto caricando la pagina richiesta..."
-#: components/AppExtras/PageLoader
+#: components/AppExtras/PageLoader/PageLoader
 msgid "Loading page..."
 msgstr "Sto caricando la pagina richiesta..."
 
@@ -617,6 +617,11 @@ msgstr "Carica una nuova immagine"
 msgid "Uploading image"
 msgstr "Sto caricando l'immagine"
 
+#. Default: "Utente"
+#: components/layout/Header/HeaderSlim/HeaderLogin
+msgid "User"
+msgstr ""
+
 #. Default: "Vai alla pagina"
 #: components/layout/Footer/FooterInfos
 #: components/layout/Footer/FooterNavigation
@@ -2471,6 +2476,16 @@ msgstr ""
 msgid "search"
 msgstr "Cerca"
 
+#. Default: "Nascondi tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-hideAllSections"
+msgstr ""
+
+#. Default: "Mostra tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-showAllSections"
+msgstr ""
+
 #. Default: "Filtro per Categoria"
 #: components/Blocks/SearchBandi/DefaultFilters
 msgid "searchBlock_categoria_filter"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-02-06T13:52:44.366Z\n"
+"POT-Creation-Date: 2025-02-12T13:43:16.681Z\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"
@@ -318,7 +318,7 @@ msgid "Linkto title"
 msgstr ""
 
 #. Default: "Sto caricando la pagina richiesta..."
-#: components/AppExtras/PageLoader
+#: components/AppExtras/PageLoader/PageLoader
 msgid "Loading page..."
 msgstr ""
 
@@ -619,6 +619,11 @@ msgstr ""
 msgid "Uploading image"
 msgstr ""
 
+#. Default: "Utente"
+#: components/layout/Header/HeaderSlim/HeaderLogin
+msgid "User"
+msgstr ""
+
 #. Default: "Vai alla pagina"
 #: components/layout/Footer/FooterInfos
 #: components/layout/Footer/FooterNavigation
@@ -2473,6 +2478,16 @@ msgstr ""
 msgid "search"
 msgstr ""
 
+#. Default: "Nascondi tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-hideAllSections"
+msgstr ""
+
+#. Default: "Mostra tutte le sezioni"
+#: components/Widgets/SearchSections/SearchSections
+msgid "search-showAllSections"
+msgstr ""
+
 #. Default: "Filtro per Categoria"
 #: components/Blocks/SearchBandi/DefaultFilters
 msgid "searchBlock_categoria_filter"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",
@@ -84,7 +84,7 @@
     "@plone-collective/volto-contents-next": "0.5.0",
     "@plone-collective/volto-sentry": "0.3.1",
     "@release-it/conventional-changelog": "^9.0.3",
-    "bootstrap-italia": "2.8.7",
+    "bootstrap-italia": "2.9.2",
     "design-react-kit": "5.0.0-10",
     "marked": "9.0.0",
     "react-focus-lock": "2.12.1",

package/src/components/AppExtras/GenericAppExtras.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { ScrollToTop } from 'io-sanita-theme/components';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { toPublicURL } from '@plone/volto/helpers/Url/Url';
 import { SubsiteLoader } from 'volto-subsites';
 import config from '@plone/volto/registry';
 
@@ -17,6 +19,10 @@ const GenericAppExtras = (props) => {
 
   return (
     <>
+      <Helmet>
+        <link rel="canonical" href={toPublicURL(location.pathname)} />{' '}
+        {/** Se impostato un canonlical nei campi SEO della pagina vincerà quello */}
+      </Helmet>
       <ScrollToTop />
       <SubsiteLoader pathname={location.pathname} />
     </>

package/src/components/AppExtras/{PageLoader.jsx → PageLoader/PageLoader.jsx}

@@ -2,6 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { Progress } from 'design-react-kit';
 import { useIntl, defineMessages } from 'react-intl';
+import './page-loader.scss';
 
 const messages = defineMessages({
   loadingPage: {

package/src/components/AppExtras/PageLoader/page-loader.scss

@@ -0,0 +1,11 @@
+.iosanita-page-loader {
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  .progress {
+    min-height: 4px;
+  }
+}

package/src/components/Blocks/Accordion/Block/ViewBlock.jsx

@@ -65,6 +65,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index, titleTag }) => {
           id={`content-${id}-${index}`}
           role="region"
           aria-labelledby={`${id}-${index}`}
+          hidden={!isOpen}
         >
           <div className="accordion-inner" onFocus={toggle()}>
             <TextBlockView id={id} data={{ value: data.text }} />

package/src/components/Blocks/CTA/ctaBlock.scss

@@ -43,7 +43,7 @@
         }
 
         &.btn-accent.inverted {
-          &:not(:hover):not(:active):not(:focus) {
+          &:not(:hover):not(:active) {
             background-color: #fff;
             color: var(--is-accent);
             .external-link {

package/src/components/Blocks/Contacts/Block/ViewBlock.jsx

@@ -33,6 +33,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
       className="card-bg rounded subblock-view "
       noWrapper={false}
       tag="div"
+      tabIndex={0}
     >
       <CardBody tag="div">
         {data.title && <div className="contact-title">{data.title}</div>}
@@ -41,7 +42,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
         {tel && (
           <div className="contact-info">
             <div className="icon-wrapper">
-              <Icon icon="phone-alt" />
+              <Icon icon="phone-alt" title="Tel." />
             </div>
             <div className="tel">{tel}</div>
           </div>
@@ -50,7 +51,7 @@ const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
         {email && (
           <div className="contact-info">
             <div className="icon-wrapper">
-              <Icon icon="envelope" />
+              <Icon icon="envelope" title="E-mail" />
             </div>
             <div className="email">{email}</div>
           </div>

package/src/components/Blocks/Hero/StoresButtons.jsx

@@ -23,14 +23,18 @@ const StoresButtons = ({ data }) => {
         {data.playStoreLink && (
           <Button tag={UniversalLink} href={data.playStoreLink} color="primary">
             <span>PLAY STORE</span>
-            <Icon icon="fab google-play" title="Play store" />
+            <Icon
+              icon="fab google-play"
+              title="Play store"
+              aria-hidden={true}
+            />
           </Button>
         )}
 
         {data.appStoreLink && (
           <Button tag={UniversalLink} href={data.appStoreLink} color="primary">
             <span>APP STORE</span>
-            <Icon icon="fab apple" title="App store" />
+            <Icon icon="fab apple" title="App store" aria-hidden={true} />
           </Button>
         )}
       </div>

package/src/components/Blocks/Icons/MoreButton.jsx

@@ -28,6 +28,7 @@ const MoreButton = ({ data, isEditMode }) => {
           icon="it-arrow-right"
           className="arrow-icon ms-1"
           padding={false}
+          aria-hidden={true}
         />
       </Button>
     </div>

package/src/components/Blocks/Listing/CompleteBlockLinks/CompleteBlockLinksTemplate.jsx

@@ -80,6 +80,7 @@ const CompleteBlockLinksTemplate = (props) => {
                                 title={title}
                                 size="xs"
                                 className="ms-1 external-link"
+                                aria-hidden={true}
                               />
                             )}
                         </CardTitle>

package/src/components/Cards/CardGhost/CardGhost.jsx

@@ -19,7 +19,7 @@ export const CardGhost = ({ item, isEditMode, titleDataElement }) => {
           >
             {item.title}
 
-            <Icon icon="it-chevron-right" />
+            <Icon icon="it-chevron-right" aria-hidden={true} />
           </UniversalLink>
         </CardTitle>
 

package/src/components/Cards/CardPersona/CardPersona.jsx

@@ -116,7 +116,11 @@ export const CardPersona = ({
         </div>
 
         <AvatarIcon size="xl">
-          {img ? img : <Icon icon="it-user" color="primary" />}
+          {img ? (
+            img
+          ) : (
+            <Icon icon="it-user" color="primary" aria-hidden={true} />
+          )}
         </AvatarIcon>
       </CardBody>
     </Card>

package/src/components/Cards/CardTaxonomy/CardTaxonomy.jsx

@@ -50,7 +50,7 @@ export const CardTaxonomy = ({
               {title}
             </UniversalLink>
           </CardTitle>
-          {showIcon && <Icon icon={icon} color="accent" />}
+          {showIcon && <Icon icon={icon} color="accent" aria-hidden={true} />}
         </div>
       </CardBody>
     </Card>

package/src/components/Cards/common/CardCategoryTop.jsx

@@ -40,7 +40,11 @@ const CardCategoryTop = (props) => {
     <span className="text">{children}</span>
   );
   const categoryIcon = iconName && (
-    <Icon icon={iconName} title={intl.formatMessage(messages.categoryIcon)} />
+    <Icon
+      icon={iconName}
+      title={intl.formatMessage(messages.categoryIcon)}
+      aria-hidden={true}
+    />
   );
 
   return (

package/src/components/GalleryPreview/GalleryPreview.jsx

@@ -86,7 +86,12 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
                   }}
                   className="prev"
                 >
-                  <Icon color="" icon="it-arrow-left" padding={false} />
+                  <Icon
+                    color=""
+                    icon="it-arrow-left"
+                    padding={false}
+                    aria-hidden={true}
+                  />
                 </Button>
               )}
 
@@ -106,7 +111,12 @@ const GalleryPreview = ({ id, viewIndex, setViewIndex, items }) => {
                   }}
                   className="next"
                 >
-                  <Icon color="" icon="it-arrow-right" padding={false} />
+                  <Icon
+                    color=""
+                    icon="it-arrow-right"
+                    padding={false}
+                    aria-hidden={true}
+                  />
                 </Button>
               )}
             </div>

package/src/components/Icon/Icon.jsx

@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from 'io-sanita-theme/components';
 
 const Icon = (props) => {
   const { icon, className, color, size, padding, ...rest } = props;
+
   if (icon) {
     const classes = classNames(
       'icon',

package/src/components/LinkMore/LinkMore.jsx

@@ -35,6 +35,7 @@ export const LinkMore = ({
           icon="it-arrow-right"
           className="arrow-icon"
           padding={false}
+          aria-hidden={true}
         />
       </UniversalLink>
     </div>

package/src/components/LoginAgid/LoginAgidButtons.jsx

@@ -75,7 +75,13 @@ const SpidButton = ({ spidLoginUrl, qs, intl }) => (
         size="big"
       >
         <span className="rounded-icon">
-          <Icon color="primary" icon="it-user" padding={false} size="" />
+          <Icon
+            color="primary"
+            icon="it-user"
+            padding={false}
+            size=""
+            aria-hidden={true}
+          />
         </span>
         <span>{intl.formatMessage(messages.loginSpidButton)}</span>
       </Button>
@@ -127,7 +133,13 @@ const ArButton = ({ arLoginUrl, intl }) => (
     <div className="authorized-spid-login mb-4">
       <LoginButton baseLoginUrl={arLoginUrl}>
         <span className="rounded-icon">
-          <Icon color="primary" icon="it-user" padding={false} size="" />
+          <Icon
+            color="primary"
+            icon="it-user"
+            padding={false}
+            size=""
+            aria-hidden={true}
+          />
         </span>
         <span className="d-none d-lg-block">
           {intl.formatMessage(messages.loginSpidButton)}

package/src/components/Pagination/PaginationItem.jsx

@@ -89,7 +89,7 @@ class PaginationItem extends Component {
             <>
               <Icon
                 icon="it-chevron-left"
-                style={{ ariaHidden: true }}
+                aria-hidden={true}
                 color="primary"
                 className={cx({ disabled: isPrevButtonInactive })}
                 title={intl.formatMessage(messages.prevPage)}
@@ -104,7 +104,7 @@ class PaginationItem extends Component {
             <>
               <Icon
                 icon="it-chevron-right"
-                style={{ ariaHidden: true }}
+                aria-hidden={true}
                 color="primary"
                 className={cx({ disabled: isForwButtonInactive })}
                 title={intl.formatMessage(messages.nextPage)}

package/src/components/ScrollToTop/ScrollToTop.jsx

@@ -53,7 +53,12 @@ const ScrollToTop = () => {
             aria-hidden="true"
             tabIndex={-1}
           >
-            <Icon icon="it-arrow-up" padding={false} size="sm" />
+            <Icon
+              icon="it-arrow-up"
+              padding={false}
+              size="sm"
+              aria-hidden={true}
+            />
           </Button>
         </div>
       )}

package/src/components/Search/Search.jsx

@@ -323,6 +323,7 @@ const Search = () => {
                       color="primary"
                       padding={false}
                       size=""
+                      aria-hidden={true}
                     />
                   </Button>
                 </div>
@@ -383,6 +384,7 @@ const Search = () => {
                       <Icon
                         icon={advFiltersOpen ? 'it-minus' : 'it-plus'}
                         padding
+                        aria-hidden={true}
                       />
                       {intl.formatMessage(messages.advFilters)}
                     </Button>

package/src/components/Slider/ButtonPlayPause.jsx

@@ -35,10 +35,13 @@ const ButtonPlayPause = ({ onClick, autoplay, showLabel = true, children }) => {
           key={autoplay ? 'pause' : 'play'}
           icon={autoplay ? 'pause' : 'play'}
           title={
-            autoplay
-              ? intl.formatMessage(messages.pause)
-              : intl.formatMessage(messages.play)
+            !showLabel
+              ? autoplay
+                ? intl.formatMessage(messages.pause)
+                : intl.formatMessage(messages.play)
+              : null
           }
+          aria-hidden={showLabel}
         />
         {showLabel && <span>{autoplay ? 'pause' : 'play'}</span>}
       </button>

package/src/components/Slider/NextArrow.jsx

@@ -24,7 +24,7 @@ export default function NextArrow(props) {
       onKeyDown={onKeyDown}
       id={id}
     >
-      <Icon icon="chevron-right" key="chevron-right" title={_title} />
+      <Icon icon="chevron-right" key="chevron-right" aria-hidden={true} />
       <span className="visually-hidden">{_title}</span>
     </button>
   );

package/src/components/Slider/PrevArrow.jsx

@@ -26,7 +26,7 @@ export default function PrevArrow(props) {
       id={id}
       onKeyDown={onKeyDown}
     >
-      <Icon icon="chevron-left" key="chevron-left-prev" title={_title} />
+      <Icon icon="chevron-left" key="chevron-left-prev" aria-hidden={true} />
       <span className="visually-hidden">{_title}</span>
     </button>
   );

package/src/components/View/CartellaModulistica/DocRow.jsx

@@ -156,6 +156,7 @@ const DocRow = ({ doc, items, searchableText, collapsable }) => {
                   icon={itemOpen ? 'it-minus' : 'it-plus'}
                   padding={false}
                   key={itemOpen + id}
+                  aria-hidden={true}
                 />
               </button>
             )}

package/src/components/View/ComeFarePer/Steps/Steps.jsx

@@ -106,7 +106,11 @@ const Steps = ({ content, steps = [] }) => {
         {allOpen
           ? intl.formatMessage(messages.hide_all)
           : intl.formatMessage(messages.show_all)}{' '}
-        <Icon icon={allOpen ? 'it-collapse' : 'it-expand'} size="sm" />
+        <Icon
+          icon={allOpen ? 'it-collapse' : 'it-expand'}
+          size="sm"
+          aria-hidden={true}
+        />
       </Button>
       <Accordion background="active">
         {steps.map((s, index) => {
@@ -140,6 +144,7 @@ const Steps = ({ content, steps = [] }) => {
                         <Icon
                           icon={isActive() ? 'it-collapse' : 'it-expand'}
                           size="sm"
+                          aria-hidden={true}
                         />
                       </Button>
                     )}

package/src/components/View/FAQ/FaqFolder/FaqFolderTree.jsx

@@ -23,7 +23,7 @@ const FaqFolderTree = ({ tree }) => {
     const [itemOpened, setItemOpened] = useState(null);
     let title = (
       <UniversalLink item={item}>
-        {item.icon && <Icon icon={item.icon} />}
+        {item.icon && <Icon icon={item.icon} aria-hidden={true} />}
         {item.title}
       </UniversalLink>
     );

package/src/components/View/commons/PageHeader/PageHeaderStatoServizio.jsx

@@ -27,9 +27,9 @@ const PageHeaderServizio = ({ content }) => {
           : intl.formatMessage(messages.service_off)}
       </Badge>
       {content.servizio_attivo && (
-        <spam className="px-2">
+        <span className="px-2">
           {intl.formatMessage(messages.service_available)}
-        </spam>
+        </span>
       )}
     </div>
   ) : null;

package/src/components/View/commons/Sharing/Sharing.jsx

@@ -154,8 +154,7 @@ const Sharing = ({ url, title }) => {
                     icon={item.icon}
                     padding={false}
                     size=""
-                    alt={item.title}
-                    title={item.title}
+                    aria-hidden={true}
                   />
                   <span>{item.title}</span>
                 </Button>
@@ -167,8 +166,7 @@ const Sharing = ({ url, title }) => {
                     icon={item.icon}
                     padding={false}
                     size=""
-                    alt={item.title}
-                    title={item.title}
+                    aria-hidden={true}
                   />
                   <span>{item.title}</span>
                 </>

package/src/components/View/commons/TassonomiaUtenti.jsx

@@ -33,7 +33,12 @@ const TassonomiaUtenti = ({ content }) => {
             //data-element="service-topic"
           >
             <Chip color="accent" simple>
-              <Icon icon="it-user" size="xs" className="icon-accent" />
+              <Icon
+                icon="it-user"
+                size="xs"
+                className="icon-accent"
+                aria-hidden={true}
+              />
               <ChipLabel>{title}</ChipLabel>
             </Chip>
           </UniversalLink>

package/src/components/Widgets/SearchSections/SearchSections.jsx

@@ -5,7 +5,7 @@ import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { Col, FormGroup, Label, Collapse } from 'design-react-kit';
+import { FormGroup, Label, Collapse } from 'design-react-kit';
 import { Icon, Checkbox } from 'io-sanita-theme/components';
 import { SearchUtils } from 'io-sanita-theme/helpers';
 
@@ -14,6 +14,14 @@ const messages = defineMessages({
     id: 'searchInSection',
     defaultMessage: 'Cerca nella sezione',
   },
+  hideAllSections: {
+    id: 'search-hideAllSections',
+    defaultMessage: 'Nascondi tutte le sezioni',
+  },
+  showAllSections: {
+    id: 'search-showAllSections',
+    defaultMessage: 'Mostra tutte le sezioni',
+  },
 });
 
 export default function SearchSections({
@@ -131,12 +139,18 @@ export default function SearchSections({
                   data-toggle="collapse"
                   aria-expanded={expanded}
                   aria-controls={`section${s.id}Collapse`}
+                  aria-label={intl.formatMessage(
+                    expanded
+                      ? messages.hideAllSections
+                      : messages.showAllSections,
+                  )}
                 >
                   <Icon
                     color="primary"
                     icon={expanded ? 'it-collapse' : 'it-expand'}
                     padding={false}
                     className="right"
+                    aria-hidden={true}
                   />
                 </a>
               )}

package/src/components/Widgets/SelectInput/SelectInput.jsx

@@ -145,7 +145,7 @@ const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
     <components.DropdownIndicator {...props}>
       <Icon
         icon="it-arrow-down-triangle"
-        style={{ ariaHidden: true }}
+        aria-hidden={true}
         title={intl.formatMessage(messages.dropwdown_indicator)}
       />
     </components.DropdownIndicator>
@@ -180,7 +180,7 @@ const ClearIndicator = (props) => {
       >
         <Icon
           icon="it-close"
-          style={{ ariaHidden: true }}
+          aria-hidden={true}
           title={intl.formatMessage(messages.ay11_for_cancel)}
         />
       </div>

package/src/components/Widgets/SortByWidget/SortByWidget.jsx

@@ -88,7 +88,13 @@ const SortByWidget = ({
     <UncontrolledDropdown className="sort-by-widget">
       <DropdownToggle color="primary" outline caret className="px-3 px-lg-4">
         <small>{intl.formatMessage(messages.sort)}</small>{' '}
-        <Icon color="primary" icon="it-expand" padding={false} size="sm" />
+        <Icon
+          color="primary"
+          icon="it-expand"
+          padding={false}
+          size="sm"
+          aria-hidden={true}
+        />
       </DropdownToggle>
       <DropdownMenu>
         {/* <LinkList> */}

package/src/components/index.js

@@ -22,10 +22,7 @@ export const LoginAgidButtons = loadable(() =>
 //layout
 export SkipLinks from 'io-sanita-theme/components/SkipLinks/SkipLinks';
 export Breadcrumbs from 'io-sanita-theme/components/Breadcrumbs/Breadcrumbs';
-export HandleAnchor from 'io-sanita-theme/components/AppExtras/HandleAnchor';
-export GenericAppExtras from 'io-sanita-theme/components/AppExtras/GenericAppExtras';
-export SiteSettingsExtras from 'io-sanita-theme/components/AppExtras/SiteSettingsExtras';
-export PageLoader from 'io-sanita-theme/components/AppExtras/PageLoader';
+
 export ScrollToTop from 'io-sanita-theme/components/ScrollToTop/ScrollToTop';
 
 //Header

package/src/components/layout/Footer/FooterNewsletterSubscribe.jsx

@@ -53,7 +53,13 @@ const FooterNewsletterSubscribe = () => {
         tag="button"
         icon={false}
       >
-        <Icon icon="it-mail" color="white" padding={false} size="" />
+        <Icon
+          icon="it-mail"
+          color="white"
+          padding={false}
+          size=""
+          aria-hidden={true}
+        />
         <span>{intl.formatMessage(messages.subscribe)}</span>
       </Button>
     </Form>

package/src/components/layout/Footer/FooterSocials.jsx

@@ -41,6 +41,7 @@ const FooterSocials = () => {
                 padding={false}
                 size="sm"
                 title={social.title}
+                aria-hidden={true}
               />
               <span className="visually-hidden">{social.title}</span>
             </a>

package/src/components/layout/Header/HeaderContacts/HeaderContacts.jsx

@@ -57,7 +57,12 @@ const HeaderContacts = () => {
                   )}
 
                   {item.icon && (
-                    <Icon icon={item.icon} color="primary" size="sm" />
+                    <Icon
+                      icon={item.icon}
+                      color="primary"
+                      size="sm"
+                      aria-hidden={true}
+                    />
                   )}
                 </Col>
               );

package/src/components/layout/Header/HeaderSearch/HeaderSearch.jsx

@@ -44,7 +44,11 @@ const HeaderSearch = ({ className }) => {
           href="/search"
           role="button"
         >
-          <Icon icon="it-search" title={intl.formatMessage(messages.search)} />
+          <Icon
+            icon="it-search"
+            title={intl.formatMessage(messages.search)}
+            aria-hidden={true}
+          />
         </a>
       </div>
       <SearchModal

package/src/components/layout/Header/HeaderSearch/SearchModal.jsx

@@ -100,7 +100,12 @@ const SearchModal = ({ closeModal, show }) => {
               icon
               className="text-uppercase fw-semibold"
             >
-              <Icon color="" icon="it-arrow-left" padding={false} />
+              <Icon
+                color=""
+                icon="it-arrow-left"
+                padding={false}
+                aria-hidden={true}
+              />
               <span>{intl.formatMessage(messages.closeSearchBack)}</span>
             </Button>
           </div>

package/src/components/layout/Header/HeaderSlim/HeaderLogin.jsx

@@ -41,6 +41,10 @@ const messages = defineMessages({
     id: 'Logout',
     defaultMessage: 'Esci',
   },
+  user: {
+    id: 'User',
+    defaultMessage: 'Utente',
+  },
 });
 
 const HeaderLogin = () => {
@@ -96,7 +100,13 @@ const HeaderLogin = () => {
             }
           >
             <span className="rounded-icon">
-              <Icon color="primary" icon="it-user" padding={false} size="" />
+              <Icon
+                color="primary"
+                icon="it-user"
+                padding={false}
+                size=""
+                aria-hidden={true}
+              />
             </span>
             <span className="d-none d-lg-block">
               {intl.formatMessage(messages.loginAreaPersonale)}
@@ -113,12 +123,23 @@ const HeaderLogin = () => {
                 className="btn-icon"
               >
                 <span className="rounded-icon">
-                  <Icon color="primary" icon="it-user" size="" />
+                  <Icon
+                    color="primary"
+                    icon="it-user"
+                    size=""
+                    title={intl.formatMessage(messages.user)}
+                  />
                 </span>
                 <span className="d-none d-lg-block">
                   {userLogged.fullname || userLogged.username}
                 </span>
-                <Icon color="" icon="it-expand" padding={false} size="" />
+                <Icon
+                  color=""
+                  icon="it-expand"
+                  padding={false}
+                  size=""
+                  aria-hidden={true}
+                />
               </DropdownToggle>
               <DropdownMenu flip tag="div">
                 <Row tag="div">
@@ -140,7 +161,13 @@ const HeaderLogin = () => {
                         }}
                         className="logout"
                       >
-                        <Icon color="" icon="sign-out-alt" size="sm" left />
+                        <Icon
+                          color=""
+                          icon="sign-out-alt"
+                          size="sm"
+                          left
+                          aria-hidden={true}
+                        />
                         <span>{intl.formatMessage(messages.Logout)}</span>
                       </LinkListItem>
                     </LinkList>

package/src/components/layout/Header/SocialHeader.jsx

@@ -66,6 +66,7 @@ const SocialHeader = ({ mobile }) => {
                   padding={false}
                   size=""
                   title={social.title}
+                  aria-hidden={true}
                 />
               </a>
             </li>

package/src/components/layout/Navigation/CollapseNavigation.jsx

@@ -72,7 +72,12 @@ const Collapse = ({
               title={intl.formatMessage(messages.CloseMenu)}
               onClick={onOverlayClick}
             >
-              <Icon color="white" icon="it-close-big" padding={false} />
+              <Icon
+                color="white"
+                icon="it-close-big"
+                padding={false}
+                aria-hidden={true}
+              />
             </button>
           </div>
         )}

package/src/components/layout/Navigation/MegaMenu/MegaMenu.jsx

@@ -256,7 +256,11 @@ const MegaMenu = ({ item, pathname }) => {
             className={cx('dropdown-toggle', { active: isItemActive })}
           >
             <span dangerouslySetInnerHTML={{ __html: item.title }}></span>
-            <Icon icon="it-expand" className={cx('', { open: menuStatus })} />
+            <Icon
+              icon="it-expand"
+              className={cx('', { open: menuStatus })}
+              aria-hidden={true}
+            />
           </DropdownToggle>
           <DropdownMenu flip tag="div">
             <div className="text-end megamenu-close-button">
@@ -273,7 +277,7 @@ const MegaMenu = ({ item, pathname }) => {
                 // https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
                 tabIndex="-1"
               >
-                <Icon icon="it-close" />
+                <Icon icon="it-close" aria-hidden={true} />
               </Button>
             </div>
             <Row>
@@ -384,7 +388,7 @@ const MegaMenu = ({ item, pathname }) => {
                               ? item.showMoreText
                               : intl.formatMessage(messages.view_all)}
                           </span>
-                          <Icon icon="it-arrow-right" />
+                          <Icon icon="it-arrow-right" aria-hidden={true} />
                         </UniversalLink>
                       </li>
                     </LinkList>

package/src/config/ioSanitaConfig.js

@@ -32,15 +32,12 @@ import bandoSVG from 'io-sanita-theme/icons/bando.svg';
 import logSVG from 'io-sanita-theme/icons/log.svg';
 
 import reducers from 'io-sanita-theme/reducers';
-import {
-  LoginAgid,
-  HandleAnchor,
-  GenericAppExtras,
-  SiteSettingsExtras,
-  Icon,
-  FileWidget,
-} from 'io-sanita-theme/components';
-import { ListingContainer } from 'io-sanita-theme/components/Blocks';
+import { LoginAgid, Icon, FileWidget } from 'io-sanita-theme/components';
+import PageLoader from 'io-sanita-theme/components/AppExtras/PageLoader/PageLoader';
+import TrackFocus from 'io-sanita-theme/components/AppExtras/TrackFocus';
+import HandleAnchor from 'io-sanita-theme/components/AppExtras/HandleAnchor';
+import SiteSettingsExtras from 'io-sanita-theme/components/AppExtras/SiteSettingsExtras';
+import GenericAppExtras from 'io-sanita-theme/components/AppExtras/GenericAppExtras';
 import { loadables as IoSanitaLoadables } from 'io-sanita-theme/config/loadables';
 import { registerIOSanitaValidators } from 'io-sanita-theme/config/validators';
 
@@ -52,6 +49,7 @@ import AggregationPage from 'io-sanita-theme/components/View/AggregationPage/Agg
 import { applyFarmacieConfig } from './farmacie';
 
 import getIoSanitaWidgets from 'io-sanita-theme/config/widgets/widgets';
+import { component } from 'design-react-kit/dist/types/Icon/assets/ItAndroidSquare';
 
 export const AGGREGATION_PAGE_ARGOMENTO = '/argomento/';
 export const AGGREGATION_PAGE_TIPOLOGIA_UTENTE = '/tipologia-utente/';
@@ -215,6 +213,11 @@ export default function applyConfig(config) {
         match: '',
         component: SiteSettingsExtras,
       },
+      {
+        match: '',
+        component: PageLoader,
+      },
+      { match: '', component: TrackFocus },
     ],
     maxFileUploadSize: null,
 

package/src/customizations/volto/components/theme/View/View.jsx

@@ -19,13 +19,14 @@ import loadable from '@loadable/component';
 import ContentMetadataTags from '@plone/volto/components/theme/ContentMetadataTags/ContentMetadataTags';
 import Comments from '@plone/volto/components/theme/Comments/Comments';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
-import Tags from '@plone/volto/components/theme/Tags/Tags';
 import { listActions } from '@plone/volto/actions/actions/actions';
 import { getContent } from '@plone/volto/actions/content/content';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { AlternateHrefLangs } from '@plone/volto/components/theme/AlternateHrefLangs/AlternateHrefLangs';
+
 import { getLayoutFieldname } from '@plone/volto/helpers/Content/Content';
 
 import config from '@plone/volto/registry';
@@ -288,6 +289,8 @@ class View extends Component {
     return (
       <div id="view" tabIndex="-1">
         <ContentMetadataTags content={this.props.content} />
+        <AlternateHrefLangs content={this.props.content} />
+
         {/* Body class if displayName in component is set */}
         <BodyClass
           className={
@@ -305,7 +308,6 @@ class View extends Component {
           history={this.props.history}
         />
         <SlotRenderer name="belowContent" content={this.props.content} />
-
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}

package/src/theme/_variables.scss

@@ -41,7 +41,8 @@ $header-center-text-color: $primary-text !default;
 $navigation-toggle-button-icon-color: $primary-text !default;
 
 //footer
-$footer-top-background-asl: $primary-darker !default; // color-ocean-10 --> $primary-a12 //questo perchè su bootstrap-italia la variabile $footer-top-background non è definita come !default
+$footer-top-background: $primary-darker !default;
+$footer-bottom-background: $footer-top-background !default;
 $footer-main-text-color: $header-center-text-color !default;
 
 //nav
@@ -71,6 +72,9 @@ $badge-font-size: 0.778rem !default; // 14px
 //search
 $highlight-search: #ff0;
 
+//focus
+$focus-outline-color: #000;
+$focus-inner-color: #fff;
 //$color-text-base: #2f475e !default;;
 
 // ALERT-BLOCK CUSTOM COLORS

package/src/theme/bootstrap-italia/custom/_focus.scss

@@ -1,11 +1,12 @@
-.skiplinks a:focus:not(.focus--mouse) {
-  border: 2px solid;
+[tabindex='-1']:focus {
+  box-shadow: none !important;
 }
 
-a.img-wrapper:focus:not(.focus--mouse) {
-  border: 2px solid;
-}
+:focus:not(.focus--mouse),
+%focus {
+  outline: 2px solid $focus-outline-color /*$outer-focus-outline*/ !important;
+  outline-offset: 2px;
 
-[tabindex='-1']:focus {
-  box-shadow: none !important;
+  border: none !important;
+  box-shadow: 0 0 0 2px $focus-inner-color /*$inner-focus-shadow*/ !important;
 }

package/src/theme/io-sanita/_buttons.scss

@@ -6,7 +6,8 @@
   .btn.btn-accent {
     &,
     &:hover,
-    &:active {
+    &:active,
+    :focus {
       svg {
         fill: $accent-contrast-text;
       }
@@ -14,7 +15,8 @@
   }
 
   a.btn.btn-accent {
-    &:focus-visible {
+    &:focus-visible,
+    &:focus {
       color: $accent;
     }
 

package/src/theme/io-sanita/components/layout/_footer.scss

@@ -7,7 +7,6 @@ $footer-borders: 1px solid hsla($primary-h, 70.59%, 20%);
 .public-ui .it-footer-main,
 .it-footer-small-prints,
 .public-ui .it-footer-small-prints {
-  background-color: $footer-top-background-asl !important; //questo perchè su bootstrap-italia la variabile $footer-top-background non è definita come !default
   &,
   p,
   ul {

package/src/theme/io-sanita/subsites/_common.scss

@@ -1,7 +1,7 @@
 .subsite-footer {
   //default bg color as main site
   padding: 2rem 0;
-  background-color: $footer-top-background-asl;
+  background-color: $footer-top-background;
   color: $white;
   border-bottom: $footer-borders;