How-to and FAQ blocks improvements

[afercia]

Summary

This PR can be summarized in the following changelog entry:

• Improves accessibility and focus management for the How-To and FAQ blocks

Relevant technical choices:

Currently, focus management for keyboard users in these blocks is broken because it relied on the Gutenberg unstableOnSetup prop, which is now removed. To fully address focus management, we need a few fixes upstream first:

A way to manage focus on the RichText component
WordPress/gutenberg#9740

Not assume the first focusable element in a block is an input of type text, a textarea, or a contenteditable:
WordPress/gutenberg#12648

Minor, but still relevant: refs don't work on the IconButton component:
WordPress/gutenberg#12615

Right now there’s no built-in way to get a reference to the TinyMCE editable area instance (and probably there shouldn't be, but still there should be a way to manage focus). Also, the How-To and FAQ blocks will see some refactoring soon so this PR only fixes what is easily fixable now.

• refactors and simplifies the shared CSS, closing Polish the structured-data-blocks stylesheet #10834
• fixes focus management on the How-To "Add total time"
• uses a Button component instead of an IconButton because the latter doesn't support refs
• removes onFocus callbacks from the days, hours, minutes fields: not sure why they were used in the first place
• when adding a new step or a new question, keeps focus on the button to allow multiple insertions: in this case focus shouldn't be moved
• adds speak() messages when adding a new step or question
• fixes a couple warnings coming from undefined prop / attribute on newly created blocks
• ESLint: reduces the max warnings limit to 187

Test instructions

• add a How-To block
• using the keyboard: press the "Add total time" button
• verify focus is moved to the days field
• tab to the "Delete total time" button and press it
• verify focus is moved back to the "Add total time" button
• tab to the "Add step" button and press it
• verify focus stays on the button and it is possible to press it multiple times to create multiple new steps without losing focus
• create a FAQ block and verify the same on the "Add question" button
• using Safari + VoiceOver:
  • verify there's an audible "New step added" message when creating a new step
  • verify there's an audible "New question added" message when creating a new question

Fixed warnings:
on a newly created How-To block:

Warning: Failed prop type: The prop `isUnorderedList` is marked as required in `HowToStep`, but its value is `undefined`.

on a newly created How-To block when clicking the "Unordered list" toggle in the sidebar:

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Fixes #10766
Fixes #10834
Fixes #11413

[afercia]

Note: there are still warnings related to the subElement prop:

Warning: Failed prop type: The prop `subElement` is marked as required in `HowToStep`, but its value is `undefined`.

Haven't fixed them because subElement is tightly coupled with the broken focus management depending on upstream reasons.

[abotteram]

CR 👍

[abotteram]

Acceptance 👍