How-to block: improve a11y and manage focus when adding total time

[afercia]

When adding total time to a How-to block, the interaction with the "Add total time" button behavior can be improved for better accessibility.

This button doesn't say anything to screen reader users about what is going to happen when pressed:

In similar cases, an aria-expanded attribute could help users understand that the button makes something appear in the page. However, since this button disappears when activated, I'd rather consider to just manage focus and move it to the hour input field. The field will be properly announced when it receives focus once it will be properly labelled, see #10750

Worth noting that currently, as soon as the "Add total time" button is pressed using the keyboard, there's a focus loss. We should always, always, avoid to remove from the DOM an element that's currently focused. If removing it is really, really, necessary, then focus must be managed programmatically.

Please consider the focus loss is more evident in some browsers (e.g. IE 11) or when using a screen reader. Modern browsers try to keep focus "in place". Regardless, at some point there's no focused element.

To make the focus loss more evident, in the screenshots below I'm using a red outline as focus indicator:

focus is on the "Add total time" button:

After activation, the button disappears and there's a focus loss:

Same happens when activating the "Delete total time" button:

After activation, the button disappears and there's a focus loss:

In this case, I'd propose to move focus back to the "Add total time" button.

[afercia]

Spent some time on this to understand why focus management didn't work at all any longer. To my understanding, unstableOnSetup has been removed, see WordPress/gutenberg#10744

In the 3.9.0 deprecations, it was noted:

• RichText onSetup prop has been removed. The unstableOnSetup prop is available if continued use is required. Unstable APIs are strongly discouraged to be used, and are subject to removal without notice.

😞

[afercia]

Also the focus prop of the IconButton was removed in WordPress/gutenberg#9572 so initial focus on the "Add total time" button doesn't work any more.

[afercia]

For the initial focus on the blocks, I think it should be addressed upstream. Created WordPress/gutenberg#12648

[afercia]

For history: To see how focus management worked originally, test with Gutenberg 3.7.0.

[afercia]

Also, we shouldn't render conditionally the "mover" buttons and the other buttons:

to avoid focus losses when moving the steps (or the Q/A) these buttons should be always rendered and hidden only via CSS, as Gutenberg does for its "movers".