Conversation
scruffian
commented
Mar 1, 2023
| content={ | ||
| post ? decodeEntities( post?.description?.rendered ) : null | ||
| <> | ||
| <a href={ post?.link } target="_blank" rel="noreferrer"> |
Contributor
Author
There was a problem hiding this comment.
Is there a component we can use instead of a normal link?
We need to change the style of this.
Contributor
There was a problem hiding this comment.
It may be overkill, but we could use the <Button /> component. It looks like if you pass it a href it will output it as an <a> element. The Preview link in the page editor uses the <PostPreviewButton /> which wraps the wp components <Button /> which outputs an <a> element if it has an href.
So, I think directly using an <a> is fine. If we want to style it (and the <Button /> has a default that works for us, add tooltips, aria elements, and state, etc, then the <Button /> component could be a good option.
Contributor
There was a problem hiding this comment.
a11y-wise it's best not to open links in a new tab without warning:
It is recommended that when links are opened to a new window, there is advance warning.
https://www.w3.org/TR/WCAG20-TECHS/G200.html
Using the <Button /> element doesn't look like it automatically handles adding a visually-hidden warning if you pass an href and a target="_blank", but there may be another component that does. I'm looking.
Contributor
There was a problem hiding this comment.
Ah, right. The the component @richtabor mentioned in the issue: ExternalLink lol. I'll update the PR.
|
Size Change: +163 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 7e5d717. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4306324775
|
For improved a11y without extra effort, let's use the ExternalLink component as it already meets WCAG specs/best practices for warning a user when a link will be opened in a new page. https://www.w3.org/TR/WCAG20-TECHS/G200.html
Switched from the blue to a gray link. Added hover and focus styles as well. Checked color contrast and it meets WCAG AA level.
scruffian
commented
Mar 1, 2023
| } | ||
|
|
||
| .components-external-link__icon { | ||
| margin-left: $grid-unit-5; |
Contributor
Author
There was a problem hiding this comment.
This won't build for me, I get:
'Error: Undefined variable.\n' +
' ╷\n' +
'22 │ margin-left: $grid-unit-5;\n' +
' │ ^^^^^^^^^^^^\n' +
' ╵\n' +
Contributor
Author
There was a problem hiding this comment.
Pushed a fix for this
Contributor
Author
There was a problem hiding this comment.
I'm surprised this isn't part of the component itself. It might be worth looking into a more general fix for the component, in a followup PR...
Member
There was a problem hiding this comment.
I'm surprised this isn't part of the component itself. It might be worth looking into a more general fix for the component, in a followup PR...
I think it's cause this can be used in smaller inline text, where its not necessary to add space before the icon. Although we probably should have some space after the icon in the screenshot:
Member
There was a problem hiding this comment.
Pushed a fix for this
Did you push it?
Contributor
Author
There was a problem hiding this comment.
oops no, I have now!
Contributor
There was a problem hiding this comment.
Weird — it both built and showed a space as if it was working for me 🤷🏻 Thanks for catching and fixing that!
scruffian
commented
Mar 1, 2023
scruffian
commented
Mar 1, 2023
Contributor
Author
|
Thanks for the fixes @jeryj, I'm happy for this to be merged if you are :) |
jameskoster
approved these changes
Mar 2, 2023
jameskoster
left a comment
Contributor
There was a problem hiding this comment.
We still need to fix the alignment, and may want to follow-up to add more information (publish date, that kind of thing). But this seems like a fair starting point and solves the chasm of emptiness we have currently.
Contributor
|
I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: 0641bce |
ntsekouras
pushed a commit
that referenced
this pull request
Mar 7, 2023
* Show the post link * Open in new window * Use ExternalLink component for link For improved a11y without extra effort, let's use the ExternalLink component as it already meets WCAG specs/best practices for warning a user when a link will be opened in a new page. https://www.w3.org/TR/WCAG20-TECHS/G200.html * Style link to use gray color Switched from the blue to a gray link. Added hover and focus styles as well. Checked color contrast and it meets WCAG AA level. * fix the grid unit variable name --------- Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
This was referenced Jul 10, 2023
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
This adds the URL of the current page when previewing a page in the Site Editor.
Fixes #48482 (comment)
Why?
This gives additional context when editing a page and also makes it possible to preview the page.
How?
Get the URL from the post data.
Testing Instructions
Screenshots or screencast