salesforce · garygong · Apr 15, 2021 · Apr 1, 2021 · Apr 15, 2021 · Apr 15, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -158,8 +158,6 @@ module.exports = {
 				},
 			},
 		],
-		// javascript:void(0) is present in SLDS markup
-		'no-script-url': 'off',
 		// _ is not really private.
 		'no-underscore-dangle': ['error', { allowAfterThis: true }],
 		//
@@ -247,7 +245,7 @@ module.exports = {
 		// TODO: Should be removed
 		'react/no-deprecated': 'off',
 
-		// javascript:void(0) is present in SLDS markup
+		// <a href="#"> is present in SLDS markup
 		'jsx-a11y/anchor-is-valid': 'off',
 		'jsx-a11y/aria-activedescendant-has-tabindex': 2,
 		'jsx-a11y/interactive-supports-focus': 2,

diff --git a/components/alert/__docs__/__snapshots__/storybook-stories.storyshot b/components/alert/__docs__/__snapshots__/storybook-stories.storyshot
@@ -53,7 +53,7 @@ exports[`DOM snapshots SLDSAlert Custom Class Names 1`] = `
         Logged in as John Smith (johnsmith@acme.com).
 
         <a
-          href="javascript:void(0);"
+          href="#"
           onClick={[Function]}
         >
           Log out
@@ -102,7 +102,7 @@ exports[`DOM snapshots SLDSAlert Custom Styles 1`] = `
         Logged in as John Smith (johnsmith@acme.com).
 
         <a
-          href="javascript:void(0);"
+          href="#"
           onClick={[Function]}
         >
           Log out
@@ -146,7 +146,7 @@ exports[`DOM snapshots SLDSAlert Dismissable 1`] = `
         Logged in as John Smith (johnsmith@acme.com).
 
         <a
-          href="javascript:void(0);"
+          href="#"
           onClick={[Function]}
         >
           Log out
@@ -211,7 +211,7 @@ exports[`DOM snapshots SLDSAlert Error 1`] = `
         Your browser is currently not supported. Your Salesforce may be degraded.
 
         <a
-          href="javascript:void(0);"
+          href="#"
           onClick={[Function]}
         >
           More Information
@@ -255,7 +255,7 @@ exports[`DOM snapshots SLDSAlert Info 1`] = `
         Logged in as John Smith (johnsmith@acme.com).
 
         <a
-          href="javascript:void(0);"
+          href="#"
           onClick={[Function]}
         >
           Log out
@@ -299,7 +299,7 @@ exports[`DOM snapshots SLDSAlert Offline 1`] = `
         You are in offline mode.
 
         <a
-          href="javascript:void(0);"
+          href="#"
           onClick={[Function]}
         >
           More information
@@ -343,7 +343,7 @@ exports[`DOM snapshots SLDSAlert Warning 1`] = `
         Your browser is outdated. Your Salesforce experience may be degraded.
 
         <a
-          href="javascript:void(0);"
+          href="#"
           onClick={[Function]}
         >
           More Information

diff --git a/components/alert/__examples__/close-alert.jsx b/components/alert/__examples__/close-alert.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -33,10 +35,9 @@ class Example extends React.Component {
 									heading: 'Logged in as John Smith (johnsmith@acme.com).',
 									headingLink: 'Log out',
 								}}
-								onClickHeadingLink={() => {
-									console.log('Link clicked.');
-								}}
+								onClickHeadingLink={action('onClickHeadingLink')}
 								onRequestClose={() => {
+									action('onRequestClose')();
 									this.setState({ isOpen: false });
 								}}
 							/>

diff --git a/components/alert/__examples__/custom-class-name.jsx b/components/alert/__examples__/custom-class-name.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -16,9 +18,7 @@ class Example extends React.Component {
 							heading: 'Logged in as John Smith (johnsmith@acme.com).',
 							headingLink: 'Log out',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 					/>
 				</AlertContainer>
 			</IconSettings>

diff --git a/components/alert/__examples__/custom-style.jsx b/components/alert/__examples__/custom-style.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -16,9 +18,7 @@ class Example extends React.Component {
 							heading: 'Logged in as John Smith (johnsmith@acme.com).',
 							headingLink: 'Log out',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 					/>
 				</AlertContainer>
 			</IconSettings>

diff --git a/components/alert/__examples__/dismissable.jsx b/components/alert/__examples__/dismissable.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -25,10 +27,9 @@ class Example extends React.Component {
 								heading: 'Logged in as John Smith (johnsmith@acme.com).',
 								headingLink: 'Log out',
 							}}
-							onClickHeadingLink={() => {
-								console.log('Link clicked.');
-							}}
+							onClickHeadingLink={action('onClickHeadingLink')}
 							onRequestClose={() => {
+								action('onRequestClose')();
 								this.setState({ isOpen: false });
 							}}
 						/>

diff --git a/components/alert/__examples__/error.jsx b/components/alert/__examples__/error.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -16,9 +18,7 @@ class Example extends React.Component {
 								'Your browser is currently not supported. Your Salesforce may be degraded.',
 							headingLink: 'More Information',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 						variant="error"
 					/>
 				</AlertContainer>

diff --git a/components/alert/__examples__/info.jsx b/components/alert/__examples__/info.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
@@ -15,9 +17,7 @@ class Example extends React.Component {
 							heading: 'Logged in as John Smith (johnsmith@acme.com).',
 							headingLink: 'Log out',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 					/>
 				</AlertContainer>
 			</IconSettings>

diff --git a/components/alert/__examples__/offline.jsx b/components/alert/__examples__/offline.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime
 
@@ -14,9 +16,7 @@ class Example extends React.Component {
 							heading: 'You are in offline mode.',
 							headingLink: 'More information',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 						variant="offline"
 					/>
 				</AlertContainer>

diff --git a/components/alert/__examples__/warning.jsx b/components/alert/__examples__/warning.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime
 import AlertContainer from '~/components/alert/container'; // `~` is replaced
 import IconSettings from '~/components/icon-settings';
@@ -14,9 +16,7 @@ class Example extends React.Component {
 								'Your browser is outdated. Your Salesforce experience may be degraded.',
 							headingLink: 'More Information',
 						}}
-						onClickHeadingLink={() => {
-							console.log('Link clicked.');
-						}}
+						onClickHeadingLink={action('onClickHeadingLink')}
 						variant="warning"
 					/>
 				</AlertContainer>

diff --git a/components/alert/index.jsx b/components/alert/index.jsx
@@ -15,6 +15,7 @@ import checkProps from './check-props';
 import componentDoc from './component.json';
 import { ALERT } from '../../utilities/constants';
 import DOMElementFocus from '../../utilities/dom-element-focus';
+import EventUtil from '../../utilities/event';
 
 const propTypes = {
 	/**
@@ -163,7 +164,6 @@ class Alert extends React.Component {
 			size: 'x-small',
 		});
 
-		/* eslint-disable no-script-url */
 		return (
 			<div
 				className={classNames(
@@ -187,8 +187,8 @@ class Alert extends React.Component {
 					{heading}{' '}
 					{labels.headingLink ? (
 						<a
-							onClick={this.props.onClickHeadingLink}
-							href="javascript:void(0);"
+							onClick={EventUtil.trappedHandler(this.props.onClickHeadingLink)}
+							href="#"
 						>
 							{labels.headingLink}
 						</a>

diff --git a/components/app-launcher/link.jsx b/components/app-launcher/link.jsx
@@ -62,7 +62,7 @@ class AppLauncherLink extends React.Component {
 
 	// ### Default Props
 	static defaultProps = {
-		href: 'javascript:void(0);', // eslint-disable-line no-script-url
+		href: '#',
 	};
 
 	render() {
@@ -74,9 +74,12 @@ class AppLauncherLink extends React.Component {
 
 		return (
 			<a
-				href={this.props.href} // eslint-disable-line no-script-url
+				href={this.props.href}
 				className={classNames('slds-truncate', this.props.className)}
 				onClick={(event) => {
+					if (this.props.href === '#') {
+						event.preventDefault();
+					}
 					if (this.props.onClick) {
 						event.preventDefault();
 						this.props.onClick(event, { href: this.props.href });

diff --git a/components/app-launcher/tile.jsx b/components/app-launcher/tile.jsx
@@ -91,7 +91,7 @@ const defaultProps = {
 	assistiveText: {
 		dragIconText: 'Reorder',
 	},
-	href: 'javascript:void(0);', // eslint-disable-line no-script-url
+	href: '#',
 	moreLabel: ' More',
 };
 
@@ -158,7 +158,10 @@ class AppLauncherTile extends React.Component {
 				</div>
 				<div className="slds-app-launcher__tile-body">
 					<a
-						href={this.props.href} // eslint-disable-line no-script-url
+						href={this.props.href}
+						onClick={(event) =>
+							this.props.href === '#' && event.preventDefault()
+						}
 					>
 						<Highlighter search={this.props.search}>
 							{this.props.title}

diff --git a/components/breadcrumb/__docs__/__snapshots__/storybook-stories.storyshot b/components/breadcrumb/__docs__/__snapshots__/storybook-stories.storyshot
@@ -15,7 +15,7 @@ exports[`DOM snapshots SLDSBreadcrumb 1 Item 1`] = `
         className="slds-breadcrumb__item"
       >
         <a
-          href="javascript:void(0);"
+          href="#entity"
         >
           Parent Entity
         </a>
@@ -40,7 +40,7 @@ exports[`DOM snapshots SLDSBreadcrumb 2 Items 1`] = `
         className="slds-breadcrumb__item"
       >
         <a
-          href="javascript:void(0);"
+          href="#entity"
           id="parent-entity"
         >
           Parent Entity
@@ -50,7 +50,7 @@ exports[`DOM snapshots SLDSBreadcrumb 2 Items 1`] = `
         className="slds-breadcrumb__item"
       >
         <a
-          href="javascript:void(0);"
+          href="#record"
         >
           Parent Record Name
         </a>
@@ -112,7 +112,7 @@ exports[`DOM snapshots SLDSBreadcrumb Base with overflow menu 1`] = `
         className="slds-breadcrumb__item"
       >
         <a
-          href="javascript:void(0);"
+          href="#entity"
         >
           Parent Entity
         </a>
@@ -121,7 +121,7 @@ exports[`DOM snapshots SLDSBreadcrumb Base with overflow menu 1`] = `
         className="slds-breadcrumb__item"
       >
         <a
-          href="javascript:void(0);"
+          href="#record"
         >
           Parent Record Name
         </a>

diff --git a/components/breadcrumb/__examples__/base-with-overflow-menu.jsx b/components/breadcrumb/__examples__/base-with-overflow-menu.jsx
@@ -9,8 +9,8 @@ class Example extends React.Component {
 
 	render() {
 		const trail = [
-			<a href="javascript:void(0);">Parent Entity</a>,
-			<a href="javascript:void(0);">Parent Record Name</a>,
+			<a href="#entity">Parent Entity</a>,
+			<a href="#record">Parent Record Name</a>,
 		];
 
 		return (

diff --git a/components/breadcrumb/__examples__/base.jsx b/components/breadcrumb/__examples__/base.jsx
@@ -8,10 +8,10 @@ class Example extends React.Component {
 
 	render() {
 		const trail = [
-			<a id="parent-entity" href="javascript:void(0);">
+			<a id="parent-entity" href="#entity">
 				Parent Entity
 			</a>,
-			<a href="javascript:void(0);">Parent Record Name</a>,
+			<a href="#record">Parent Record Name</a>,
 		];
 
 		return (

diff --git a/components/breadcrumb/__examples__/one-item.jsx b/components/breadcrumb/__examples__/one-item.jsx
@@ -7,7 +7,7 @@ class Example extends React.Component {
 	static displayName = 'BreadCrumbExample';
 
 	render() {
-		const trail = [<a href="javascript:void(0);">Parent Entity</a>];
+		const trail = [<a href="#entity">Parent Entity</a>];
 
 		return (
 			<IconSettings iconPath="/assets/icons">