Gutenberg: Generated aria labels for links in block elements can destroy the output

[black-forever]

Describe the bug
If in block elements (e.g. Listings) with the characters * ">" * or * "<" * are used in the text, there is a problem with the Aria labels for links.

The entire text of the block is included in the Aria labels. With all the special characters. The special characters are not escaped. This will destroy the output.

To Reproduce
Steps to reproduce the behavior:

1. Create a block element (e.g. a List) within a post or page
2. Write several list elements
3. Use special characters - (for example: "Use a PHP version> 7.2")
4. Use the Link Function and Edit the Link
5. Save or Update your post and Preview the post/page.
6. See the error

Expected behavior
Before copy the content to the Aria label - escape the special characters / html charakters
Example: "&lt" for < | "&gt" for >

Another question: Why is the entire text of the block used for the Aria labels?

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 63.0.3

Version of Gutenberg

• WordPress 5.0 with integrated Gutenberg

[swissspidy]

I feel like I saw a similar issue before about this 🤔

[afercia]

Right, in https://github.com/WordPress/gutenberg/pull/12154 it was suggested to use a screen-reader-text appended to the link content instead of using aria-label. Unfortunately, that hasn't been addressed yet.

Another question: Why is the entire text of the block used for the Aria labels?

This is a bug, tracked in https://github.com/WordPress/gutenberg/issues/12325

[afercia]

To clarify: insert a link with the text link including a greater than > character:

Generated markup (notice the > within the HTML attribute):

Layout breakage in the front end, due to invalid markup:

[black-forever]

Thank you for the clarification and the included screens. Due to #12325 the error happens even if the greater than > character is not in the link text itself.

[afercia]

Right! 😞

[aduth]

Related (partially duplicates):

• #8779
• #9915

Fixed by one of:

• #9963
• https://core.trac.wordpress.org/ticket/45387

[Otto42]

Easily reproducible from the description here:
https://wordpress.org/support/topic/a-minor-gutenberg-hyperlink-bug/

[afercia]

Just to note this was reported again on Trac, see https://core.trac.wordpress.org/ticket/46114

[afercia]

Removing the Accessibility label because not a real a11y bug. I guess it should get prioritized though. /Cc @youknowriad

[youknowriad]

This seems fixed by #9963