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

Remove any use of javascript: URLs #2514

Closed
wants to merge 6 commits into from

Conversation

xoob
Copy link
Contributor

@xoob xoob commented May 12, 2020

Fixes #2384 and #2493

Additional description

This maintenance change provides compatibility with React DOM 16.9, which introduced a deprecation warning for javascript: URLs in facebook/react#15047:

Warning: A future version of React will block javascript: URLs as
a security precaution. Use event handlers instead if you can. If you need
to generate unsafe HTML try using dangerouslySetInnerHTML instead.
  • Replaces <a href="javascript:void(0)"> with <a href="#" onClick={(event) => event.preventDefault()}> as suggested in False-positive security precaution warning (javascript: URLs) facebook/react#16382
  • Adds EventUtil.trappedHandler() utility to simplify the process of cancelling the event for an optional handler.
  • Adds a href === '#' conditional cancellation to some components, so they conform with prior behavior.

Changes have been smoke tested but require more detailed testing before they can be merged.

To-Do

  • Test that all changed components are working as expected. We need instructions from the maintainer where to start and what to look for.

  • Discuss a11y warnings with maintainer. npm test now throws these warnings:

[test:accessibility]   ● aXe storyshots › Storyshots › SLDSBreadcrumb › 2 Items
[test:accessibility]
[test:accessibility]     Error
[test:accessibility]
[test:accessibility]       Error: expect(received).toHaveNoViolations(expected)
[test:accessibility]       Expected story to pass aXe accessibility tests.
[test:accessibility]       The following violations were found:
[test:accessibility]       RULE: skip-link: The skip-link target should exist and be focusable
[test:accessibility]       EXPECTED no violations in the following DOM nodes:
[test:accessibility]         #parent-entity
[test:accessibility]           This is a list of checks that, if none pass, will generate a violation. Fix ANY of the following to pass:
[test:accessibility]           - No skip link target
[test:accessibility]         a[href$="\#record"]
[test:accessibility]           This is a list of checks that, if none pass, will generate a violation. Fix ANY of the following to pass:
[test:accessibility]           - No skip link target
[test:accessibility]       Need more help? Please visit: https://dequeuniversity.com/rules/axe/3.2/skip-link?application=axe-puppeteer

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

  • First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
  • npm run lint:fix has been run and linting passes.
  • Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

  • TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
  • Tests have been added for new props to prevent regressions in the future. See readme.
  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at DOM snapshot strings.
Required only if there are markup / UX changes
  • Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
  • Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
  • Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
  • While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

@welcome
Copy link

welcome bot commented May 12, 2020

Thanks for opening this pull request! 💯

This is a community-driven project, and we can't do it without your participation. Please check out our contributing guidelines and review the Contributor Checklist if you haven't already, to make sure everything is squared away. TravisCI will take about 10 minutes to run through the same items that are on the Contributor checklist with a pass/fail check below. Please fix any issues that cause TravisCI to fail or ask for clarification--we try, but sometimes the errors can be unclear.
A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread. To ensure codebase quality, large code line changes may take more than 2 weeks to review, but may take longer depending on the number of pull requests in the queue. Feel free to ask for a status update at any time--you won't be bothering anyone.
Once feedback has been given, please reply to the feedback giver once the feedback on been addressed, so that they can continue the review.
If you need a release while you are waiting for a code review, you can publish a built tag to your own fork. See directions in the release README.

@salesforce-cla
Copy link

Thanks for the contribution! Before we can merge this, we need @xoob to sign the Salesforce.com Contributor License Agreement.

@xoob
Copy link
Contributor Author

xoob commented May 13, 2020

Snapshot tests are failing. Is it okay to just refresh the snapshots? Anything I should look out for?

@garygong garygong self-requested a review June 4, 2020 04:49
@garygong
Copy link
Contributor

garygong commented Jun 4, 2020

Awesome, thanks for taking this up! Sorry for the delay in reviewing. I'll take a look within the next few days.

@xoob
Copy link
Contributor Author

xoob commented Jul 6, 2020

@garygong, any more feedback about these changes? I'd like to get them merged before continuing on TypeScript compatibility...

@garygong
Copy link
Contributor

garygong commented Jul 6, 2020

@garygong, any more feedback about these changes? I'd like to get them merged before continuing on TypeScript compatibility...

Sorry, I lot track of this. I'll look at this in the next day or so!

@garygong
Copy link
Contributor

garygong commented Jul 13, 2020

@xoob The changes look good to me! Thanks for taking this on!

Testing: Running npm run test is a good place to start to verify that components are working as expected. Also, it's good to do manual verification in Storybook for the changed components. I did a few spot checks and they are working for me.

A11y skip-link warnings: Is it possible to avoid using the skip-link altogether?

Instead of:

<a href="#entity">

Use:

<a href="#" onClick={(event) => event.preventDefault()}>

@stale
Copy link

stale bot commented Sep 11, 2020

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.

@garygong
Copy link
Contributor

I'll continue to work on this here: #2829

@garygong garygong closed this Apr 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Prevent javascript URLs warning in React 16.9
3 participants