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.

Sign up for GitHub

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

Jump to bottom

Links that open in a new tab/window need to inform users a new tab/window will open #1105

Closed
afercia opened this issue Jun 10, 2017 · 8 comments · Fixed by #7883
Closed

Links that open in a new tab/window need to inform users a new tab/window will open #1105

afercia opened this issue Jun 10, 2017 · 8 comments · Fixed by #7883
Assignees
@talldan @afercia
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended [Type] Task Issues or PRs that have been broken down into an individual action to take
Milestone
WordPress 5.0 RC

Comments

@afercia
Copy link
Contributor

afercia commented Jun 10, 2017

There are some cases where links use target="_blank". For example:

screen shot 2017-06-10 at 14 10 00

current link html:
<a href="https://codex.wordpress.org/Excerpt" target="_blank">Learn more about manual excerpts</a>

In all these cases, the link should inform users a new tab/window will open;

  • for accessibility: some visually hidden text in the link text would be ok; core recently standardized to always use (opens in a new window), see https://core.trac.wordpress.org/changeset/40643
  • visually: I'll suggest to consider to use some visual indicator too, it's also a usability thing but this is definitely up to designers :)

See also: https://core.trac.wordpress.org/query?keywords=~target-blank
@afercia afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jun 10, 2017
@afercia afercia changed the title Links that open in a new tab/window needs to inform users a new tab/window will open Links that open in a new tab/window need to inform users a new tab/window will open Jun 10, 2017
@aduth
Copy link
Member

aduth commented Jun 12, 2017

Could render an adjacent <Dashicon icon="external" /> to visually indicate external:

https://developer.wordpress.org/resource/dashicons/#external

Maybe even logic built-in to the link component to detect whether it should be shown by default based on target or "off-site" URL.

@mtias mtias added the [Type] Task Issues or PRs that have been broken down into an individual action to take label Jun 22, 2017
@afercia
Copy link
Contributor Author

afercia commented Jun 22, 2017

Could render an adjacent to visually indicate external:

Yes, something like that could help, however "external" doesn't exactly mean "new tab/window": it just means external site (as in opening an external site in the same window).

@mehigh
Copy link
Contributor

mehigh commented Jun 29, 2017

I'm interested in working on this feature and improving the user experience with the addition of the external icon having an a11y label for the screen readers.

@mehigh mehigh mentioned this issue Jun 29, 2017
Merged
3 tasks
@mehigh
Copy link
Contributor

mehigh commented Jun 29, 2017

Thank you @afercia and @aduth for the comments. They helped get this issue home quicker. PR created.

@swissspidy
Copy link
Member

Most links in WordPress don't have target="_blank" though, including many links to the Codex.

mehigh added a commit to xwp/gutenberg that referenced this issue Jul 18, 2017
@mehigh
Links that open in a new tab/window need to inform users a new tab/wi…
0a39d47 
…ndow will open

## Description
Fixes WordPress#1105 by adding the external dashicon and the standard screen
reader text too.

## How Has This Been Tested?
I checked that the Excerpt external link which makes use of the new
ExternalLink component contains the new icon and displays it correctly
in major OSX browsers (Safari, Chrome, Firefox).
I used the browser's inspector to confirm the screen-reader-text
element gets properly added as well.

## Screenshots:
![Updated
panel](http://files.urldocs.com/share/excerpt-block-updated/excerpt-bloc
k-updated.png)

## Types of changes
New feature (non-breaking change which adds functionality)

## Checklist:
- [x] My code is tested.
- [x] My code follows the WordPress code style.
- [x] My code follows has proper inline documentation. (Other as basic
components don't have inline documentation, just like this one)
aduth pushed a commit that referenced this issue Jul 18, 2017
@mehigh @aduth
Links that open in a new tab/window need to inform users a new tab/wi…
710fb34 
…ndow will open (#1577)

* Links that open in a new tab/window need to inform users a new tab/window will open

## Description
Fixes #1105 by adding the external dashicon and the standard screen
reader text too.

## How Has This Been Tested?
I checked that the Excerpt external link which makes use of the new
ExternalLink component contains the new icon and displays it correctly
in major OSX browsers (Safari, Chrome, Firefox).
I used the browser's inspector to confirm the screen-reader-text
element gets properly added as well.

## Screenshots:
![Updated
panel](http://files.urldocs.com/share/excerpt-block-updated/excerpt-bloc
k-updated.png)

## Types of changes
New feature (non-breaking change which adds functionality)

## Checklist:
- [x] My code is tested.
- [x] My code follows the WordPress code style.
- [x] My code follows has proper inline documentation. (Other as basic
components don't have inline documentation, just like this one)

* 1105 - Fix formatting

* 1105 - Changed the class name. Added translators: accessibility text comment
@aaronjorbin aaronjorbin mentioned this issue Aug 11, 2017
Merged
@afercia afercia added the [Type] Bug An existing feature does not function as intended label Mar 1, 2018
@afercia
Copy link
Contributor Author

afercia commented Mar 1, 2018

Reopening because things have changed a bit and this issue still needs to be fully addressed.

On current master, there are a few occurrences of links that use a target="_blank" attribute. Worth reminding that any link that opens a new tab / window needs to inform users about what is going to happen, to prevent an unexpected change of context.

Some of these links are:

  • the Preview link
  • the link in the block toolbar when editing a link
  • the post permalink link

Edge cases:
the links in the Categories and Latest Posts blocks use target="_blank" in the editor, so they need a proper informative message and the rel attribute with proper values, but they open in the current tab / window when in the front-end.

There is now an ExternalLink component, used for example in the Excerpt component for the link to the Codex page, but it uses also an icon so I'm not sure it can be used for the cases listed above.

screen shot 2018-03-01 at 11 32 46

@afercia afercia reopened this Mar 1, 2018
@afercia afercia mentioned this issue Mar 28, 2018
Merged
3 tasks
@afercia afercia self-assigned this Apr 18, 2018
@afercia afercia mentioned this issue Apr 18, 2018
Closed
@afercia afercia mentioned this issue May 16, 2018
Closed
@danielbachhuber danielbachhuber added this to the WordPress 5.0 milestone Jun 4, 2018
@karmatosed karmatosed added Needs Design Feedback Needs general design feedback. and removed Design labels Jun 25, 2018
@karmatosed
Copy link
Member

From a design perspective I don't mind adding this symbol:

2018-07-05 at 22 17

If I am correct that's what is being asked for from design side?

@karmatosed karmatosed removed the Needs Design Feedback Needs general design feedback. label Jul 5, 2018
@talldan talldan self-assigned this Jul 10, 2018
@talldan
Copy link
Contributor

talldan commented Jul 10, 2018

I'll take a look at fixing this next.

@talldan talldan mentioned this issue Jul 11, 2018
Merged
4 tasks
This was referenced Jan 18, 2022
Open
Open
@afercia afercia mentioned this issue Jul 24, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@talldan talldan

@afercia afercia

Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Milestone
WordPress 5.0 RC
Development

Successfully merging a pull request may close this issue.

Add an icon and visually hidden a11y text to links that open in a new tab WordPress/gutenberg
8 participants
@danielbachhuber @karmatosed @mehigh @mtias @talldan @swissspidy @afercia @aduth