feat: accessibility improvements and bug fixes

* chore: add pr deployment previews workflows * fix(payment): redirect to wrong media after payment * chore: add version number to footer text Co-authored-by: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com> * fix: show error on email field when invalid * fix(project): favicons & preconnect jwapp.com * fix: broken checkbox in personal details form * fix: hide disabled questions in personal details screen * fix: improve consents required form error * fix: show error when delete account fails * fix: hide optional label in season select dropdown * fix: shelf margin and grid loading state * chore: add default config and set demo mode on for build (#127) * feat: Render favicons dynamically Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * refactor(payment): improve choose offer flow * fix(payment): ui not updating after paypal payment * refactor: add strict util for modal urls from window location * feat(a11y): add auto focus to play/pause button of players * fix(menu): prevent text to go on two lines in buttons * fix(a11y): ensure wcag compliance with 1.5 line-height for texts (#109) * feat(a11y): apply the autocomplete attribute to input fields(#115) * feat(a11y): apply correct aria attributes and improve searchbar (#117) * feat(a11y): video meta data items separated (#116) Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix(a11y): only set focus programmatically on keyboard navigation Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * feat(a11y): form validation improvements for screen readers Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix(a11y): apply aria-hidden to checkbox asterisk (#121) * feat(a11y): slide chevron buttons hitarea increased Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix(a11y): usermenu item count & correct html structure Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix(a11y): roles and aria-attributes regarding modals (#125) * feat(a11y): slider navigation optimized * chore: fix react warning * fix(payment): layout of invoices on mobile * fix(a11y): optimize footer for accessibility * feat(a11y): improve accessibility of sidebar * feat(a11y): optimize profile menu * fix(a11y): improve screenreader focus on start watching button * fix(a11y): videoplayer focus (iOS) & restoration Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix: active state of language menu and apply aria-current * fix(search): prevent keyboard from persisting in searchbar on submit * fix(a11y): ensure correct focus on first sidebar menu item * fix(user): update question value while typing Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> * fix(videodetail): don’t render empty duration metadata * fix(user): error when updating customer * fix(project): checkbox values for customer consents * fix(menu): ensure sidebar is scrollable * refactor(menu): apply dynamic viewport height for sidebar * fix(project): overall styling of the hub page * fix(payment): fix new subscription not showing in UI * fix: cinema not covering full viewport height * fix(videodetail): page behind player too wide * fix(videodetail): buttons not aligning properly * feat: align sidebar backdrop with modal * fix(a11y): add selected state to season filters * fix(a11y): add role to make lock icon readable refactor(tests): update snapshots * fix(a11y): add aria-pressed to password icon and underline to footer links * fix: video metadata styling with status icon for live events * chore: format package files * fix(player): back button not working * fix(player): title overlay fade animation * chore(project): maintenance 2024-q1 * chore: enable verbatimModuleSyntax * chore: use cjs for lighthouse config * chore: add comment to s3 workflow * refactor: extract metadata utils * chore: cleanup translations --------- Co-authored-by: Vincent Couzij <vincent@videodock.com> Co-authored-by: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com> Co-authored-by: Mike van Veenhuijzen <mike@videodock.com> Co-authored-by: langemike <mikevv@gmail.com> Co-authored-by: Roy Schut <roy@videodock.com> Co-authored-by: Roy Schut <royschut@gmail.com> Co-authored-by: Melissa 't Hart <melissa@videodock.com>
jwplayer · Mar 15, 2024 · 82b5967 · 82b5967
1 parent 69eff3c
commit 82b5967
Show file tree

Hide file tree

Showing 227 changed files with 4,143 additions and 3,390 deletions.
diff --git a/...flows/web-test-preview-and-lighthouse.yml → ...eb-test-deploy-preview-and-lighthouse.yml b/...flows/web-test-preview-and-lighthouse.yml → ...eb-test-deploy-preview-and-lighthouse.yml
@@ -1,4 +1,4 @@
-name: Web - Test - Deploy Preview and Lighthouse Test
+name: Web - Test - PR Deploy Preview and Lighthouse Test
 
 on:
   pull_request:
@@ -36,4 +36,4 @@ jobs:
       - name: Install Lighthouse CI
         run: sudo yarn global add @lhci/cli@0.12.x
       - name: Run Lighthouse CI
-        run: lhci autorun --collect.url=${{ needs.build_and_preview.outputs.output1 }}?app-config=gnnuzabk --config=./lighthouserc.js
+        run: lhci autorun --collect.url=${{ needs.build_and_preview.outputs.output1 }}?app-config=gnnuzabk --config=./lighthouserc.cjs
diff --git a/.github/workflows/web-test-deploy-preview-aws.yml b/.github/workflows/web-test-deploy-preview-aws.yml
@@ -0,0 +1,84 @@
+# Example workflow to deploy the web platform to an AWS S3 bucket on pull requests
+# This workflow is disabled for the OTT Web App
+#
+# See
+# - https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html
+# - https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-policies-s3.html#iam-policy-ex0
+#
+# Create an environment named `Deployment Previews` or change the environment.name below
+#
+# Environment variables:
+# - DEPLOYMENT_PREVIEWS   - Set this any value to enable this workflow
+# - AWS_ACCESS_KEY_ID     - The AWS access key id
+# - AWS_REGION            - The AWS region where the bucket is created. Example `us-west-1`
+# - CLOUDFRONT_ID         - Optionally define the AWS Cloudfront ID to invalidate the cache after the build
+#
+# Environment secrets:
+# - AWS_SECRET_ACCESS_KEY - The AWS secret access key
+
+name: Web - Test - PR Deploy Preview
+run-name: Deploy Preview - PR ${{ github.event.pull_request.number || '0' }}
+
+on:
+  pull_request:
+
+defaults:
+  run:
+    working-directory: ./platforms/web
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    environment:
+      name: Deployment Previews
+      url: ${{ format('https://pr-{0}.{1}?app-config={2}', github.event.pull_request.number || '0' , vars.PREVIEW_DOMAIN, vars.PREVIEW_DEFAULT_CONFIG) }}
+    if:  ${{ vars.DEPLOYMENT_PREVIEWS != '' }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install packages
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: |
+          yarn build
+        env:
+          MODE: demo
+          APP_GTM_TAG_ID: ${{ vars.APP_GTM_TAG_ID }}
+          APP_FOOTER_TEXT: ${{ vars.APP_FOOTER_TEXT }}
+          APP_BODY_FONT_FAMILY: ${{ vars.APP_BODY_FONT_FAMILY }}
+          APP_BODY_ALT_FONT_FAMILY: ${{ vars.APP_BODY_ALT_FONT_FAMILY }}
+          APP_DEFAULT_CONFIG_SOURCE: ${{ vars.APP_DEFAULT_CONFIG_SOURCE }}
+          APP_PLAYER_LICENSE_KEY: ${{ vars.APP_PLAYER_LICENSE_KEY }}
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ vars.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ vars.AWS_REGION }}
+      - name: Copy dist files to S3 Bucket
+        run: |
+          aws s3 sync build/public s3://$BUCKET/$DIR --cache-control max-age=60 --delete
+        env:
+          BUCKET: ${{ vars.BUCKET }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
+      - name: Set different cache control for index.html
+        run: |
+          aws s3 cp build/public/index.html s3://$BUCKET/$DIR/index.html --cache-control max-age=0,no-cache
+        env:
+          BUCKET: ${{ vars.BUCKET }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
+      - name: Set different cache control for files in assets folder
+        run: |
+          aws s3 cp build/public/assets s3://$BUCKET/$DIR/assets --cache-control max-age=31536000 --recursive
+        env:
+          BUCKET: ${{ vars.BUCKET }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
+      - name: Invalidate cloudfront distribution
+        if: ${{ vars.CLOUDFRONT_ID }}
+        run: aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_ID --paths "/$DIR/images/*" "/$DIR/*.*"
+        env:
+          CLOUDFRONT_ID: ${{ vars.CLOUDFRONT_ID }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
diff --git a/.syncpackrc.json b/.syncpackrc.json
@@ -1,37 +1,88 @@
 {
   "$schema": "https://unpkg.com/syncpack@11.2.1/dist/schema.json",
+  "sortFirst": [
+    "name",
+    "description",
+    "version",
+    "private",
+    "license",
+    "repository",
+    "author",
+    "main",
+    "exports",
+    "engines",
+    "workspaces",
+    "scripts"
+  ],
   "semverGroups": [
     {
-      "dependencies": ["codeceptjs", "codeceptjs**", "react-router", "react-router-dom"],
-      "packages": ["**"],
+      "dependencies": [
+        "codeceptjs",
+        "codeceptjs**",
+        "react-router",
+        "react-router-dom",
+        "typescript"
+      ],
+      "packages": [
+        "**"
+      ],
       "isIgnored": true
     },
     {
       "range": "^",
-      "dependencies": ["**"],
-      "packages": ["**"],
-      "dependencyTypes": ["prod", "dev", "peer", "resolutions"]
+      "dependencies": [
+        "**"
+      ],
+      "packages": [
+        "**"
+      ],
+      "dependencyTypes": [
+        "prod",
+        "dev",
+        "peer"
+      ]
     }
   ],
   "versionGroups": [
     {
       "label": "Ensure semver ranges for locally developed packages satisfy the local version",
-      "dependencies": ["@jwp/**", "**-config-jwp"],
-      "dependencyTypes": ["peer"],
-      "packages": ["**"],
+      "dependencies": [
+        "@jwp/**",
+        "**-config-jwp"
+      ],
+      "dependencyTypes": [
+        "peer"
+      ],
+      "packages": [
+        "**"
+      ],
       "pinVersion": "*"
     },
     {
       "label": "Ensure local packages are installed as peerDependency",
-      "dependencies": ["@jwp/**", "**-config-jwp"],
-      "dependencyTypes": ["dev", "prod"],
-      "packages": ["**"],
+      "dependencies": [
+        "@jwp/**",
+        "**-config-jwp"
+      ],
+      "dependencyTypes": [
+        "dev",
+        "prod"
+      ],
+      "packages": [
+        "**"
+      ],
       "isBanned": true
     },
     {
-      "dependencies": ["@types/**"],
-      "dependencyTypes": ["!dev"],
-      "packages": ["**"],
+      "dependencies": [
+        "@types/**"
+      ],
+      "dependencyTypes": [
+        "!dev"
+      ],
+      "packages": [
+        "**"
+      ],
       "isBanned": true,
       "label": "@types packages should only be under devDependencies"
     }

diff --git a/configs/eslint-config-jwp/package.json b/configs/eslint-config-jwp/package.json
@@ -7,8 +7,8 @@
     "test": "exit 0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "confusing-browser-globals": "^1.0.10",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-react": "^7.24.0",

diff --git a/configs/eslint-config-jwp/typescript.js b/configs/eslint-config-jwp/typescript.js
@@ -77,10 +77,6 @@ module.exports = {
     {
       files: ['*.ts', '*.tsx'],
       rules: {
-        // TypeScript 4.0 adds 'any' or 'unknown' type annotation on catch clause variables.
-        // We need to make sure error is of the type we are expecting
-        '@typescript-eslint/no-implicit-any-catch': 'error',
-
         // These are handled by TS
         '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
         '@typescript-eslint/explicit-module-boundary-types': 'off',

diff --git a/configs/postcss-config-jwp/package.json b/configs/postcss-config-jwp/package.json
@@ -8,10 +8,10 @@
     "test": "exit 0"
   },
   "devDependencies": {
-    "stylelint": "^15.11.0",
     "postcss": "^8.4.31",
     "postcss-import": "^14.0.2",
-    "postcss-scss": "^4.0.4"
+    "postcss-scss": "^4.0.4",
+    "stylelint": "^15.11.0"
   },
   "peerDependencies": {
     "stylelint-config-jwp": "*"

diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@jwp/ott",
   "version": "5.1.1",
+  "private": true,
   "license": "Apache-2.0",
-  "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "JW Player",
-  "private": true,
+  "main": "index.js",
   "engines": {
     "node": ">=18.13.0"
   },
@@ -21,16 +21,16 @@
     "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
     "format:prettier": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "format:stylelint": "stylelint --fix '**/*.{css,scss}'",
-    "pre-commit": "yarn depcheck && lint-staged",
-    "prepare": "husky install",
+    "i18next": "i18next 'platforms/*/src/**/*.{ts,tsx}' 'packages/*/src/**/*.{ts,tsx}' && node ./scripts/i18next/generate.js",
+    "i18next-diff": "npx ts-node ./scripts/i18next/diff-translations",
+    "i18next-update": "npx ts-node ./scripts/i18next/update-translations.ts && yarn i18next",
     "lint": "run-p -c lint:*",
     "lint:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "lint:prettier": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\"",
-    "lint:ts": "tsc --pretty --noEmit -p ./scripts && yarn workspaces run lint:ts",
     "lint:stylelint": "stylelint '**/*.{css,scss}'",
-    "i18next": "i18next 'platforms/*/src/**/*.{ts,tsx}' 'packages/*/src/**/*.{ts,tsx}' && node ./scripts/i18next/generate.js",
-    "i18next-diff": "npx ts-node ./scripts/i18next/diff-translations",
-    "i18next-update": "npx ts-node ./scripts/i18next/update-translations.ts && yarn i18next",
+    "lint:ts": "tsc --pretty --noEmit -p ./scripts && yarn workspaces run lint:ts",
+    "pre-commit": "yarn depcheck && lint-staged",
+    "prepare": "husky install",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
     "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
@@ -40,26 +40,25 @@
     "@types/node": "^18.15.3",
     "csv-parse": "^5.4.0",
     "depcheck": "^1.4.3",
-    "eslint": "^7.31.0",
+    "eslint": "^8.57.0",
     "husky": "^6.0.0",
     "i18next-parser": "^8.0.0",
     "lint-staged": "^15.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "read": "^2.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.3.4",
-    "vitest": "^0.34.6"
+    "typescript": "5.3.3",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "eslint-config-jwp": "*"
   },
   "resolutions": {
-    "glob-parent": "^5.1.2",
     "codeceptjs/**/ansi-regex": "^4.1.1",
     "codeceptjs/**/minimatch": "^3.0.5",
     "flat": "^5.0.1",
-    "json5": "^2.2.2",
-    "vite": "^4.4.8"
+    "glob-parent": "^5.1.2",
+    "json5": "^2.2.2"
   }
 }
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@jwp/ott-common",
   "version": "4.30.0",
-  "main": "./src",
   "private": true,
+  "main": "./src",
   "scripts": {
     "lint:ts": "tsc --pretty --noEmit -p ./",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
-    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest",
-    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update"
+    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update",
+    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
   "dependencies": {
     "@inplayer-org/inplayer.js": "^3.13.24",
@@ -30,7 +30,7 @@
     "jsdom": "^22.1.0",
     "timezone-mock": "^1.3.4",
     "vi-fetch": "^0.8.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "@jwp/ott-testing": "*",

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
@@ -208,6 +208,8 @@ export default class AccountController {
 
         if (errorMessage.includes('customer already exists') || errorMessage.includes('account already exists')) {
           throw new FormValidationError({ form: [i18next.t('account:registration.user_exists')] });
+        } else if (errorMessage.includes('please enter a valid e-mail address')) {
+          throw new FormValidationError({ email: [i18next.t('account:registration.field_is_not_valid_email')] });
         } else if (errorMessage.includes('invalid param password')) {
           throw new FormValidationError({ password: [i18next.t('account:registration.invalid_password')] });
         }
@@ -467,7 +469,17 @@ export default class AccountController {
     assertModuleMethod(this.accountService.deleteAccount, 'deleteAccount is not available in account service');
     assertFeature(canDeleteAccount, 'Delete account');
 
-    return this.accountService.deleteAccount({ password });
+    try {
+      await this.accountService.deleteAccount({ password });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message.toLowerCase() : '';
+
+      if (message.includes('invalid credentials')) {
+        throw new FormValidationError({ form: [i18next.t('user:account.delete_account.invalid_credentials')] });
+      }
+
+      throw new FormValidationError({ form: [i18next.t('user:account.delete_account.error')] });
+    }
   };
 
   getReceipt = async (transactionId: string) => {