A11y: aria-label text not visible in editor for Pagination Block if "showLabel" is unchecked

[krokodok]

Description

There is a new feature to hide the label of Query Pagination Previous Block and Query Pagination Next Block inside the Query Pagination Block: #50779

We just tested this feature for accessibility. If I hide the label text, the block's text value will be used as aria-label on the previous and next buttons instead. This is fine behaviour.

But from an editor's view, it could be problematic that an editor won't know this unless he checks the frontend for accessibility. The showLabel option's label just says: "Toggle off to hide the label text, e.g. 'Next Page'." It does not give any indication that the text value will still be present in the HTML document and accessible for screen reader users. There is also no indication what the visually hidden values are, as they are completely removed from the editor once the option is enabled.

A possible real life scenario:

An editor inserts the Query Pagination Block and plays around with the previous and next labels. They write some funny text or insert Unicode characters because they want to display arrows. Then they notice the option to hide the labels and just use the preset icons instead. This is exactly what they want, and the experimentally changed texts are now hidden. In the frontend everything looks fine for visual users but screen reader users would read the non-appropriate aria-labels, not explaining what the links do.

A suggestion would be to explain to the editor that the values will still be rendered in the HTML document instead of just the current message: "Toggle off to hide the label text, e.g. 'Next Page'.". For example: "Toggle off to visually hide the label text, e.g. 'Next Page'. The text will still be used for screen readers."

We could also even dynamically display the real text values instead of just "e.g. 'Next Page'" in the Block settings.

Step-by-step reproduction instructions

1. Insert a Query Loop Block.
2. If not present yet, insert a Query Pagination Block.
3. If not present yet, insert a Query Previous Block or Query Next Block.
4. The block's values are "Previous page" and "Next page" by default.
5. Change the values to some other text.
6. Choose an arrow icon in the Block settings of Query Pagination block in the "Arrow" option.
7. Un-check the now visible option "Show label" underneath the arrow option.
8. The changed text values from the Query Previous Block or Query Next Block will not be visible in the editor anymore. To change them, you have to check "Show label" again.

Screenshots, screen recording, code snippet

Backend

Frontend

Environment info

• Gutenberg up from #ede0978

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

We should also drop the word toggle from the help text.

@afercia, I think we missed this case in #66369.

We could also even dynamically display the real text values instead of just "e.g. 'Next Page'" in the Block settings.

Unfortunately, I don't think that's possible. The parent block isn't aware of the labels in child blocks.

[afercia]

, I think we missed this case in #66369.

Yes, it would be good to fix it here.

The parent block isn't aware of the labels in child blocks.

I find pretty confusing that the Show label text setting is in the parent Pagination block in the first place. It also assumes that users want to show/hide the label text on both previous and next links while, for example, there may be cases where I'd want to show only an arrow fot Previous and an arrow + text for Next.

I tend to think this setting should be moved to the 'Previous Page' and 'Next Page' blocks, because it's a setting that belongs to those blocks.

Regarding the potential confusion when hiding the label, maybe it could be mitigated by adding an input field in the settings panel that always shows and allows to edit the label, additionally to the in-canvas editing.