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

[Link] Refinement #14162

Merged
merged 3 commits into from
Jan 13, 2019
Merged

[Link] Refinement #14162

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33d4056
[Link] Refinement
oliviertassinari Jan 12, 2019
8ef1187
Update links.md
oliviertassinari Jan 12, 2019
c7afa7d
Update links.md
oliviertassinari Jan 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ class AppFrame extends React.Component {
color="inherit"
aria-label="Edit docs colors"
component={Link}
naked
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the dependency on the CSS injection order.

capture d ecran 2019-01-12 a 13 14 20

href="/style/color/#color-tool"
data-ga-event-category="AppBar"
data-ga-event-action="colors"
Expand Down
1 change: 1 addition & 0 deletions docs/src/pages/style/links/ButtonLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default function ButtonLink() {
return (
<Link
component="button"
variant="body2"
onClick={() => {
alert("I'm a button.");
}}
Expand Down
5 changes: 3 additions & 2 deletions docs/src/pages/style/links/Links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
link: {
Expand All @@ -17,7 +18,7 @@ function Links(props) {
const { classes } = props;

return (
<div>
<Typography>
<Link href={dudUrl} className={classes.link}>
Link
</Link>
Expand All @@ -27,7 +28,7 @@ function Links(props) {
<Link href={dudUrl} variant="body1" className={classes.link}>
{'variant="body1"'}
</Link>
</div>
</Typography>
);
}

Expand Down
21 changes: 11 additions & 10 deletions docs/src/pages/style/links/links.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,24 @@ You can leverage its properties.

{{"demo": "pages/style/links/Links.js"}}

However, the link has different default properties than the typography:
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
- `color="primary"` as the link needs to stand out.
- `variant="inherit"` as the link will, most of the time, be used as a child of a Typograpy component.

## Accessibility

- When providing the content for the link, avoid phrases like "click here" or "go to".
- When providing the content for the link, avoid generic descriptions like "click here" or "go to".
Instead, use [specific descriptions](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text).
- For the best user experience links should stand out from the text on the page.
- If a link doesn't have a meaningful href, [it should be rendered using a `<button>` element](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md).

{{"demo": "pages/style/links/ButtonLink.js"}}

## Recommendations
## Security

When you use `target="_blank"` with Links it is recommended to always use `rel="noopener"` or `rel="noreferrer"` when linking to third party content.
When you use `target="_blank"` with Links it is [recom](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md)[mended](https://developers.google.com/web/tools/lighthouse/audits/noopener) to always set `rel="noopener"` or `rel="noreferrer"` when linking to third party content.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved

`rel="noopener"` prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
- `rel="noopener"` prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
Without this the target page can potentially redirect your page to a malicious URL.

`rel="noreferrer""` has the same effect, but also prevents the Referer header from being sent to the new page.

Removing the referer header will affect analytics. By stripping the referral value, the traffic from these links will be
misattributed — instead of showing as referral traffic, they will be attributed as “direct” in Google Analytics. Or, if
you use an alternative analytics application, you may see the visits in a "noreferral" bucket.
- `rel="noreferrer""` has the same effect, but also prevents the *Referer* header from being sent to the new page.
⚠️ Removing the referrer header will affect analytics.
6 changes: 0 additions & 6 deletions packages/material-ui/src/Link/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,11 +117,6 @@ Link.propTypes = {
* Either a string to use a DOM element or a component.
*/
component: componentPropType,
/**
* The target of the link. You can read about this property on the
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes)
*/
target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix W3C warning: https://validator.w3.org/nu/?doc=https%3A%2F%2Fmaterial-ui.netlify.com%2Fstyle%2Flinks%2F

capture d ecran 2019-01-12 a 13 14 45

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't we decide anyway that we don't validate DOM attributes?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean by we don't validate DOM attributes? Oh yeah. We don't need to document it. It's making the component lighter :).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I mean by this is that we don't validate props that we simply forward.

target is valid DOM attribute for a elements just not button. So the validation was correct for the default case but not if component="button" was used. The validator mentioned this explicitly "Attribute target not allowed on element button at this point.".

Oh and we need to remove the default value for target: https://github.com/mui-org/material-ui/blob/dfff366df7b83b26b2ab6cc169e51184742d043b/packages/material-ui/src/Link/Link.js#L143

/**
* `classes` property applied to the [`Typography`](/api/typography/) element.
*/
Expand All @@ -140,7 +135,6 @@ Link.defaultProps = {
block: false,
color: 'primary',
component: 'a',
target: '_self',
underline: 'hover',
variant: 'inherit',
};
Expand Down
1 change: 0 additions & 1 deletion pages/api/link.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import Link from '@material-ui/core/Link';
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'<br></span> | <span class="prop-default">'primary'</span> | The color of the link. |
| <span class="prop-name">component</span> | <span class="prop-type">componentPropType</span> | <span class="prop-default">'a'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
| <span class="prop-name">target</span> | <span class="prop-type">enum:&nbsp;'_self'&nbsp;&#124;<br>&nbsp;'_blank'&nbsp;&#124;<br>&nbsp;'_parent'&nbsp;&#124;<br>&nbsp;'_top'<br></span> | <span class="prop-default">'_self'</span> | The target of the link. You can read about this property on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) |
| <span class="prop-name">TypographyClasses</span> | <span class="prop-type">object</span> |   | `classes` property applied to the [`Typography`](/api/typography/) element. |
| <span class="prop-name">underline</span> | <span class="prop-type">enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'hover'&nbsp;&#124;<br>&nbsp;'always'<br></span> | <span class="prop-default">'hover'</span> | Controls when the link should have an underline. |
| <span class="prop-name">variant</span> | <span class="prop-type">string</span> | <span class="prop-default">'inherit'</span> | Applies the theme typography styles. |
Expand Down