fix: fix blocks Alert, Card Semplice, Card immagine, Accordion keyboa…

RELEASE.md

@@ -36,6 +36,7 @@
 
 - Nel template Blocco link solo immagini con link esterni, icona accessibilità per link esterni ora è disattivabile attraverso opzione del template
 - Migliorata l'accessibilità e il supporto Screen Reader per il menu a tendina "Ordina Per" nella pagina di ricerca
+- Migliorata la navigazione da tastiera quando si è in modifica dei blocchi Alert, Card Semplice, Card con Immagine, Accordion
 
 ### Fix
 

src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx

@@ -48,16 +48,6 @@ class EditBlock extends SubblockEdit {
     this.accordion_item_ref = React.createRef();
   }
 
-  componentDidMount() {
-    // eslint-disable-next-line no-unused-expressions
-    this.accordion_item_ref?.current?.addEventListener('keydown', (e) => {
-      if (e.keyCode === 13) {
-        if (!(this.state.focusOn === 'text')) {
-          this.setState({ focusOn: 'text' });
-        }
-      }
-    });
-  }
   /**
    * Render method.
    * @method render
@@ -105,12 +95,20 @@ class EditBlock extends SubblockEdit {
                 placeholder={this.props.intl.formatMessage(
                   messages.titlePlaceholder,
                 )}
-                nextFocus="text"
-                prevFocus="text"
-                disableMoveToNearest={true}
-                setFocus={(f) => {
-                  this.setState({ focusOn: f });
+                onSelectBlock={() => {}}
+                onAddBlock={() => {
+                  this.setState({ focusOn: 'text' });
+                }}
+                onFocusNextBlock={() => {
+                  this.setState({ focusOn: 'text' });
                 }}
+                onFocusPreviousBlock={
+                  this.props.isFirst
+                    ? this.props.onFocusPreviousBlock
+                    : () => {
+                        this.props.onSubblockChangeFocus(this.props.index - 1);
+                      }
+                }
                 showToolbar={false}
                 key="title"
               />
@@ -135,11 +133,19 @@ class EditBlock extends SubblockEdit {
                   placeholder={this.props.intl.formatMessage(
                     messages.textPlaceholder,
                   )}
-                  disableMoveToNearest={true}
-                  prevFocus="title"
-                  nextFocus="title"
-                  setFocus={(f) => {
-                    this.setState({ focusOn: f });
+                  onAddBlock={this.props.onFocusNextBlock}
+                  onFocusNextBlock={
+                    this.props.isLast
+                      ? this.props.onFocusNextBlock
+                      : () => {
+                          this.setState({ focusOn: null });
+                          this.props.onSubblockChangeFocus(
+                            this.props.index + 1,
+                          );
+                        }
+                  }
+                  onFocusPreviousBlock={() => {
+                    this.setState({ focusOn: 'title' });
                   }}
                   key="text"
                 />

src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx

@@ -51,9 +51,17 @@ class Edit extends SubblocksEdit {
                       <EditBlock
                         data={subblock}
                         index={subindex}
-                        selected={this.isSubblockSelected(subindex)}
+                        selected={
+                          this.props.selected &&
+                          this.isSubblockSelected(subindex)
+                        }
                         {...this.subblockProps}
                         openObjectBrowser={this.props.openObjectBrowser}
+                        onFocusPreviousBlock={this.props.onFocusPreviousBlock}
+                        onFocusNextBlock={this.props.onFocusNextBlock}
+                        onSubblockChangeFocus={this.onSubblockChangeFocus}
+                        isLast={this.state.subblocks.length - 1 === subindex}
+                        isFirst={subindex === 0}
                       />
                     </div>
                   ))}

src/components/ItaliaTheme/Blocks/Alert/Edit.jsx

@@ -7,15 +7,25 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { injectIntl } from 'react-intl';
+
 import cx from 'classnames';
 import { Container, Row, Col } from 'design-react-kit';
 
 import { createContent } from '@plone/volto/actions';
 import { SidebarPortal } from '@plone/volto/components';
-import { EditTextBlock } from '@plone/volto/components';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import {
+  AlertSidebar,
+  TextEditorWidget,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
 
-import { AlertSidebar } from 'design-comuni-plone-theme/components/ItaliaTheme';
+const messages = defineMessages({
+  content_placeholder: {
+    id: 'Type text…',
+    defaultMessage: 'Digita il testo…',
+  },
+});
 /**
  * Edit Alert block class.
  * @class Edit
@@ -84,20 +94,23 @@ class Edit extends Component {
                   </Col>
                 )}
                 <Col>
-                  <EditTextBlock
+                  <TextEditorWidget
                     data={this.props.data}
-                    detached={true}
-                    index={this.props.index}
+                    fieldName="text"
                     selected={this.props.selected}
                     block={this.props.block}
+                    onChangeBlock={(data) =>
+                      this.props.onChangeBlock(this.props.block, data)
+                    }
+                    placeholder={this.props.intl.formatMessage(
+                      messages.content_placeholder,
+                    )}
+                    showToolbar={true}
+                    onSelectBlock={this.props.onSelectBlock}
                     onAddBlock={this.props.onAddBlock}
-                    onChangeBlock={this.props.onChangeBlock}
-                    onDeleteBlock={this.props.onDeleteBlock}
-                    onMutateBlock={this.props.onMutateBlock}
-                    onFocusPreviousBlock={this.props.onFocusPreviousBlock}
+                    index={this.props.index}
                     onFocusNextBlock={this.props.onFocusNextBlock}
-                    onSelectBlock={this.props.onSelectBlock}
-                    blockNode={this.blockNode}
+                    onFocusPreviousBlock={this.props.onFocusPreviousBlock}
                   />
                 </Col>
               </Row>

src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx

@@ -1,7 +1,7 @@
 import { Button, Container } from 'design-react-kit';
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Image from '@plone/volto/components/theme/Image/Image';
@@ -35,16 +35,26 @@ const Block = ({
   onSelectBlock,
   onAddBlock,
   index,
+  onFocusNextBlock,
+  onFocusPreviousBlock,
+  selected,
 }) => {
   const intl = useIntl();
   const title = data?.cta_title?.blocks[0]?.text;
   const hasImage = data?.showImage && data?.ctaImage?.length > 0;
   const content = data?.cta_content;
   const showFullwidth = data?.showFullWidth;
 
-  const [selected, setSelected] = useState('title');
+  const [selectedField, setSelectedField] = useState('title');
   const titleRef = useRef();
   const contentRef = useRef();
+  useEffect(() => {
+    if (selected) {
+      setSelectedField('title');
+    } else {
+      setSelectedField(null);
+    }
+  }, [selected]);
 
   return (
     <div
@@ -62,7 +72,7 @@ const Block = ({
           }
 
           if (titleRef.current.contains(e.target)) {
-            setSelected('content');
+            setSelectedField('content');
           }
         }
       }}
@@ -90,24 +100,28 @@ const Block = ({
               <div
                 ref={titleRef}
                 onClick={() => {
-                  setSelected('title');
+                  setSelectedField('title');
                 }}
                 onFocus={() => {
-                  setSelected('title');
+                  setSelectedField('title');
                 }}
               >
                 <TextEditorWidget
                   data={data}
                   fieldName="cta_title"
-                  selected={selected === 'title'}
+                  selected={selectedField === 'title'}
                   block={block}
                   onChangeBlock={(data) => onChangeBlock(block, data)}
                   placeholder={intl.formatMessage(messages.cta_title)}
                   showToolbar={false}
                   onSelectBlock={() => {}}
                   onAddBlock={() => {
-                    setSelected('content');
+                    setSelectedField('content');
                   }}
+                  onFocusNextBlock={() => {
+                    setSelectedField('content');
+                  }}
+                  onFocusPreviousBlock={onFocusPreviousBlock}
                 />
               </div>
             ) : (
@@ -118,23 +132,27 @@ const Block = ({
             <div
               ref={contentRef}
               onClick={() => {
-                setSelected('content');
+                setSelectedField('content');
               }}
               onFocus={() => {
-                setSelected('content');
+                setSelectedField('content');
               }}
             >
               <TextEditorWidget
                 data={data}
                 fieldName="cta_content"
-                selected={selected === 'content'}
+                selected={selectedField === 'content'}
                 block={block}
                 onChangeBlock={(data) => onChangeBlock(block, data)}
                 placeholder={intl.formatMessage(messages.cta_content)}
                 showToolbar={true}
                 onSelectBlock={onSelectBlock}
                 onAddBlock={onAddBlock}
                 index={index}
+                onFocusNextBlock={onFocusNextBlock}
+                onFocusPreviousBlock={() => {
+                  setSelectedField('title');
+                }}
               />
             </div>
           ) : (