Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some blocks do not inform that links opens in new tabs #38398

Closed
carolinan opened this issue Feb 1, 2022 · 1 comment
Closed

Some blocks do not inform that links opens in new tabs #38398

carolinan opened this issue Feb 1, 2022 · 1 comment
Assignees
Labels
[Block] Comment Template Affects the Comment Template Block [Block] Post Title Affects the Post Title Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).

Comments

@carolinan
Copy link
Contributor

carolinan commented Feb 1, 2022

Description

The following blocks have options to open links in new tabs, but does not inform users that the link opens in a new tab:

  • Post title
  • Comment author name
  • Comment edit link
  • Post author name
  • Post author avatar (not merged)

Opening links in new tabs without notifying, can be disorienting for some users.
Not all screen readers will use the target attribute for announcing that the link will open in a new tab.
Read more:
https://www.w3.org/TR/WCAG20-TECHS/G201.html
https://adrianroselli.com/2020/02/link-targets-and-3-2-5.html

The exceptions are the site logo and site title block that adds the information using an aria-label:
Example from the site title block, which needs to be updated to include the link text:

		if ( '_blank' === $attributes['linkTarget'] ) {
			$link_attrs[] = 'target="_blank"';
			$link_attrs[] = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
		}

Example from the site logo block:

	if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) {
		// Add the link target after the rel="home".
		// Add an aria-label for informing that the page opens in a new tab.
		$aria_label  = 'aria-label="' . esc_attr__( '(Home link, opens in a new tab)' ) . '"';
		$custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . esc_attr( $attributes['linkTarget'] ) . '"' . $aria_label, $custom_logo );
	}

Step-by-step reproduction instructions

  1. Create a new post or page
  2. Add one of the blocks for example the post title block
  3. Enable the "Make title a link" option ( for post title)
  4. Enable the "Open in new tab" option.
  5. Save and view the post item on the front.
  6. Enable a screen reader and navigate to the block with the link
  7. Confirm that there is no notification that the link will open in a new tab.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.9, Gutenberg trunk.
NVDA screen reader.

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

@carolinan carolinan added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Block] Post Title Affects the Post Title Block [Block] Comment Template Affects the Comment Template Block labels Feb 1, 2022
@carolinan carolinan self-assigned this Feb 1, 2022
@carolinan carolinan added [a11y] Labelling and removed [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Feb 1, 2022
@carolinan
Copy link
Contributor Author

carolinan commented Feb 1, 2022

I have been going back and forward about this one, and after reading through lots of past conversations, my understanding is that the intention was to replace the aria-label in the inline links (rich text blocks like the paragraph) with a new system that either: Prints the text but uses a CSS class to visually hide the text, displays the information for all users, or displays an icon for links that opens in a new tab.

For reasons unknown to me, this seems to only have been partially implemented, and then removed again when the link modal was remade.

Because of this, I don't think we can move forward with the changes I proposed in this issue. Even though four years have passed, a new system still needs to be implemented for all links that opens in new windows, not only for these blocks.
#18727
#12154 (comment)

@priethor priethor added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed [a11y] Labelling labels Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Comment Template Affects the Comment Template Block [Block] Post Title Affects the Post Title Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Development

No branches or pull requests

2 participants