Merge pull request desktop#20051 from desktop/Tutorial-click-events-h…

…ave-key-events

Update tutorial instructions steps to remove `click events have key events` linter

app/package.json

@@ -32,7 +32,7 @@
     "desktop-notifications": "^0.2.4",
     "desktop-trampoline": "desktop/desktop-trampoline#v0.9.10",
     "dexie": "^3.2.2",
-    "dompurify": "^2.5.4",
+    "dompurify": "^3.2.4",
     "dugite": "3.0.0-rc10",
     "electron-window-state": "^5.0.3",
     "event-kit": "^2.0.0",

app/src/ui/tutorial/tutorial-step-instruction.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import * as React from 'react'
 import {
   ValidTutorialStep,
@@ -33,10 +31,11 @@ interface ITutorialStepInstructionsProps {
 export class TutorialStepInstructions extends React.Component<ITutorialStepInstructionsProps> {
   public render() {
     return (
-      <li key={this.props.sectionId} onClick={this.onSummaryClick}>
+      <li key={this.props.sectionId}>
         <details
+          name={'tutorial-step'}
           open={this.props.sectionId === this.props.currentlyOpenSectionId}
-          onClick={this.onSummaryClick}
+          onToggle={this.onToggle}
         >
           {this.renderSummary()}
           <div className="contents">{this.props.children}</div>
@@ -45,6 +44,12 @@ export class TutorialStepInstructions extends React.Component<ITutorialStepInstr
     )
   }
 
+  private onToggle = (e: React.UIEvent<HTMLElement, ToggleEvent>) => {
+    if (e.nativeEvent.newState === 'open') {
+      this.props.onSummaryClick(this.props.sectionId)
+    }
+  }
+
   private renderSummary = () => {
     const shouldShowSkipLink =
       this.props.skipLinkButton !== undefined &&
@@ -82,13 +87,4 @@ export class TutorialStepInstructions extends React.Component<ITutorialStepInstr
       <div className="empty-circle">{stepNumber}</div>
     )
   }
-
-  private onSummaryClick = (e: React.MouseEvent<HTMLElement>) => {
-    // prevents the default behavior of toggling on a `details` html element
-    // so we don't have to fight it with our react state
-    // for more info see:
-    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Events
-    e.preventDefault()
-    this.props.onSummaryClick(this.props.sectionId)
-  }
 }

app/styles/ui/onboarding-tutorial/_right-panel.scss

@@ -48,13 +48,11 @@
     border-bottom: var(--base-border);
   }
 
-  li {
-    padding: var(--spacing-double);
-  }
   summary {
     display: flex;
     align-items: center;
     font-weight: var(--font-weight-semibold);
+    padding: var(--spacing-double);
 
     .summary-text {
       color: var(--text-secondary-color);
@@ -85,6 +83,7 @@
 
   details .contents {
     padding-left: var(--spacing-triple);
+    padding-bottom: var(--spacing-double);
     .description {
       margin-bottom: var(--spacing);
     }
@@ -114,7 +113,7 @@
     }
   }
   details[open] summary {
-    margin-bottom: var(--spacing);
+    padding-bottom: var(--spacing);
     .summary-text {
       color: var(--text-color);
     }

app/yarn.lock

@@ -75,6 +75,11 @@
   resolved "https://registry.yarnpkg.com/@github/stable-socket/-/stable-socket-1.1.0.tgz#b8598c02df1a935fb0c970252f0b0062f4bdaa29"
   integrity sha512-kzLHnrWGvmXka7AIUnsyF+SO5dP4dxEXX2sMixXW5ngRf3i4RhvXzFNgXVy4qBKsIsg6V3fNb3NOto0z6o4XAw==
 
+"@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 [email protected]:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
@@ -360,10 +365,12 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-dompurify@^2.5.4:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.5.4.tgz#347e91070963b22db31c7c8d0ce9a0a2c3c08746"
-  integrity sha512-l5NNozANzaLPPe0XaAwvg3uZcHtDBnziX/HjsY1UcDj1MxTK8Dd0Kv096jyPK5HRzs/XM5IMj20dW8Fk+HnbUA==
+dompurify@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.4.tgz#af5a5a11407524431456cf18836c55d13441cd8e"
+  integrity sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
 
 [email protected]:
   version "3.0.0-rc10"

package.json

@@ -50,6 +50,9 @@
     "node": ">= 10",
     "yarn": ">= 1.9"
   },
+  "resolutions": {
+    "@types/react-css-transition-replace/@types/react": "^16.14.62"
+  },
   "dependencies": {
     "@azure/storage-blob": "^12.25.0",
     "@babel/core": "^7.25.2",
@@ -128,7 +131,7 @@
     "@types/parse-dds": "^1.0.3",
     "@types/plist": "^3.0.2",
     "@types/prettier": "^2.0.1",
-    "@types/react": "^16.8.7",
+    "@types/react": "^16.14.62",
     "@types/react-css-transition-replace": "^2.1.3",
     "@types/react-dom": "^16.8.2",
     "@types/react-transition-group": "^4.4.0",

yarn.lock

@@ -1154,9 +1154,9 @@
   integrity sha512-mMUu4nWHLBlHtxXY17Fg6+ucS/MnndyOWyOe7MmwkoMYxvfQU2ajtRaEvqSUv+aVkMqH/C0NCI8UoVfRNQ10yg==
 
 "@types/dompurify@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.3.1.tgz#2934adcd31c4e6b02676f9c22f9756e5091c04dd"
-  integrity sha512-YJth9qa0V/E6/XPH1Jq4BC8uCMmO8V1fKWn8PCvuZcAhMn7q0ez9LW6naQT04UZzjFfAPhyRMZmI2a2rbMlEFA==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.4.0.tgz#fd9706392a88e0e0e6d367f3588482d817df0ab9"
+  integrity sha512-IDBwO5IZhrKvHFUl+clZxgf3hn2b/lU6H1KaBShPkQyGJUQ0xwebezIPSuiyGwfz1UzJWQl4M7BDxtHtCCPlTg==
   dependencies:
     "@types/trusted-types" "*"
 
@@ -1460,13 +1460,14 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.7":
-  version "16.8.7"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.7.tgz#7b1c0223dd5494f9b4501ad2a69aa6acb350a29b"
-  integrity sha512-0xbkIyrDNKUn4IJVf8JaCn+ucao/cq6ZB8O6kSzhrJub1cVSqgTArtG0qCfdERWKMEIvUbrwLXeQMqWEsyr9dA==
+"@types/react@*", "@types/react@^16.14.62":
+  version "16.14.62"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.62.tgz#449e4e81caaf132d0c2c390644e577702db1dd9e"
+  integrity sha512-BWf7hqninZav6nerxXj+NeZT/mTpDeG6Lk2zREHAy63CrnXoOGPGtNqTFYFN/sqpSaREDP5otVV88axIXmKfGA==
   dependencies:
     "@types/prop-types" "*"
-    csstype "^2.2.0"
+    "@types/scheduler" "^0.16"
+    csstype "^3.0.2"
 
 "@types/request@^2.0.9":
   version "2.0.9"
@@ -1488,6 +1489,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@^0.16":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
 "@types/semver@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
@@ -1576,9 +1582,9 @@
   integrity sha512-txGIh+0eDFzKGC25zORnswy+br1Ha7hj5cMVwKIU7+s0U2AxxJru/jZSMU6OC9MJWP6+pc/hc6ZjyZShpsyY2g==
 
 "@types/trusted-types@*":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
-  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
 "@types/ua-parser-js@^0.7.30":
   version "0.7.32"
@@ -2986,10 +2992,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.3.0.tgz#062e141c78345cf814da0e0b716ad777931b08af"
-  integrity sha512-+iowf+HbYUKV65+HjAhXkx4KH6IFpIxnBlO0maKsXmBIHJXEndaTRYPVL4pEwtK6+1zRvkXo+WD1tRFKygMHQg==
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 cuint@^0.2.2:
   version "0.2.2"