fix(vwc-carousel): white source report high severity for carousel

__snapshots__/carousel.md

@@ -10,36 +10,18 @@
  tabindex="0"
 >
  <div class="upper-pane">
- <div
- aria-disabled="true"
- aria-label="Previous slide"
- class="swiper-button-disabled swiper-button-prev swiper-nav"
- role="button"
- tabindex="-1"
- >
+ <div class="swiper-button-disabled swiper-button-prev swiper-nav">
  <vwc-icon
  size="medium"
  type="left"
  >
  </vwc-icon>
  </div>
- <div class="swiper-container swiper-container-horizontal swiper-container-initialized">
+ <div class="swiper-container swiper-container-horizontal swiper-container-initialized swiper-container-pointer-events">
  <div class="swiper-wrapper">
  </div>
- <span
- aria-atomic="true"
- aria-live="assertive"
- class="swiper-notification"
- >
- </span>
  </div>
- <div
- aria-disabled="true"
- aria-label="Next slide"
- class="swiper-button-disabled swiper-button-next swiper-nav"
- role="button"
- tabindex="-1"
- >
+ <div class="swiper-button-disabled swiper-button-next swiper-nav">
  <vwc-icon
  size="medium"
  type="right"

components/carousel/package.json

@@ -29,11 +29,10 @@
  "@vonage/vvd-core": "2.3.0",
  "@vonage/vwc-icon": "2.3.0",
  "lit-element": "^2.4.0",
- "swiper": "^5.4.5",
+ "swiper": "^6.5.7",
  "tslib": "^2.0.3"
  },
  "devDependencies": {
- "@types/swiper": "^5.4.0",
  "@vonage/vvd-design-tokens": "2.3.0",
  "@vonage/vvd-umbrella": "2.3.0",
  "typescript": "^4.1.3"

components/carousel/src/vwc-carousel-navigation.scss

@@ -28,4 +28,5 @@
 }
 .swiper-button-next {
  border-bottom-right-radius: 6px;
+ border-top-right-radius: 6px;
 }

components/carousel/src/vwc-carousel.scss

@@ -1,5 +1,10 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 
+@forward 'swiper/swiper';
+
+@forward 'vwc-carousel-navigation';
+@forward 'vwc-carousel-pagination';
+
 vwc-carousel {
  display: inline-flex;
  width: 300px;
@@ -42,25 +47,3 @@ vwc-casousel:active {
  overflow: hidden;
  contain: strict;
 }
-
-/* stylelint-disable-next-line scss/dollar-variable-pattern -- (used in swiper lib) */
-$themeColor: var(#{scheme-variables.$vvd-color-on-base}) !default;
-
-@import 'swiper/scss/functions';
-@import 'swiper/components/core/core';
-
-//IMPORT_COMPONENTS
-@import 'swiper/components/a11y/a11y';
-@import 'swiper/components/controller/controller';
-@import 'swiper/components/effect-coverflow/effect-coverflow';
-@import 'swiper/components/effect-cube/effect-cube';
-@import 'swiper/components/effect-fade/effect-fade';
-@import 'swiper/components/effect-flip/effect-flip';
-@import 'swiper/components/lazy/lazy';
-@import 'swiper/components/scrollbar/scrollbar';
-@import 'swiper/components/thumbs/thumbs';
-@import 'swiper/components/zoom/zoom';
-
-//IMPORT NAVIGATION/PAGINATION
-@import './vwc-carousel-navigation';
-@import './vwc-carousel-pagination';

components/carousel/src/vwc-carousel.ts

@@ -9,7 +9,9 @@ import {
  TemplateResult,
 } from 'lit-element';
 import { style } from './vwc-carousel.css';
-import Swiper, { SwiperOptions } from 'swiper';
+import SwiperCore, {
+ Swiper, SwiperOptions, Autoplay, Keyboard, Mousewheel, Navigation
+} from 'swiper/core';
 import '@vonage/vwc-icon';
 import './vwc-carousel-item.js';
 
@@ -21,6 +23,8 @@ declare global {
 
 const CAROUSEL_STYLE_ID = 'vwc-carousel-style-id';
 
+SwiperCore.use([Autoplay, Keyboard, Mousewheel, Navigation]);
+
 /**
  * This component is a carousel
  */
@@ -36,14 +40,10 @@ export class VWCCarousel extends LitElement {
  private swiperContainer?: HTMLElement;
  @query('.swiper-wrapper')
  private swiperWrapper?: HTMLElement;
- @query('.swiper-button-next')
- private swiperButtonNext?: HTMLElement;
- @query('.swiper-button-prev')
- private swiperButtonPrev?: HTMLElement;
  @query('.swiper-pagination')
  private swiperPagination?: HTMLElement;
  private swiper?: Swiper;
- private slideRefs: HTMLElement[] = [];
+ private slideRefs: Element[] = [];
 
  static get styles(): CSSResult[] {
  return [style];
@@ -54,17 +54,17 @@ export class VWCCarousel extends LitElement {
  loop: false,
  autoplay: this.autoplay
  ? {
- delay: 2500,
- disableOnInteraction: true,
- }
+ delay: 2500
+ }
  : false,
  cssMode: false,
+ keyboard: true,
+ mousewheel: true,
+ uniqueNavElements: true,
  navigation: {
- prevEl: this.swiperButtonPrev as HTMLElement,
- nextEl: this.swiperButtonNext as HTMLElement,
+ prevEl: '.swiper-button-prev',
+ nextEl: '.swiper-button-next',
  },
- mousewheel: true,
- keyboard: true,
  on: {
  slideNextTransitionEnd: this.moveFirstIfNeeded,
  slidePrevTransitionEnd: this.moveLastIfNeeded,
@@ -156,7 +156,7 @@ export class VWCCarousel extends LitElement {
  const s = swiper ?? ((this as unknown) as Swiper);
  const slides = s.slides;
  if (slides.length > 2 && s.isEnd) {
- const first = slides[0];
+ const first = slides[0] as HTMLElement;
  s.removeSlide(0);
  s.appendSlide(first);
  }
@@ -166,7 +166,7 @@ export class VWCCarousel extends LitElement {
  const s = swiper ?? ((this as unknown) as Swiper);
  const slides = s.slides;
  if (slides.length > 2 && s.isBeginning) {
- const last = slides[slides.length - 1];
+ const last = slides[slides.length - 1] as HTMLElement;
  s.removeSlide(slides.length - 1);
  s.prependSlide(last);
  }

yarn.lock

@@ -4850,11 +4850,6 @@
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@types/source-list-map/0.1.2/0d3836d982bc181a779327f6c0da46c9c32475e744c04c3b4e3bfa3d04a848c9#bc5f765df10572135c0bd4a956baf458c9996827"
  integrity sha1-vF92XfEFchNcC9SpVrr0WMmZaCc=
 
-"@types/swiper@^5.4.0":
- version "5.4.2"
- resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@types/swiper/5.4.2/39a23fb48f7aa5da47d06ca834a1d6d5bd4f1d40ebde7c7acc903e67abe652aa#ff206cf5aea787f580b5dd9b466b4bcb8e0442f3"
- integrity sha1-/yBs9a6nh/WAtd2bRmtLy44EQvM=
-
 "@types/tapable@*", "@types/tapable@^1.0.5":
  version "1.0.6"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@types/tapable/1.0.6/73adb44cd2ead4b333b1db97e94278c3c08d5e4c4254c274c82ac4725324115f#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
@@ -8153,12 +8148,12 @@ dom5@^3.0.1:
  clone "^2.1.0"
  parse5 "^4.0.0"
 
-dom7@^2.1.5:
- version "2.1.5"
- resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
- integrity sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=
+dom7@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/dom7/-/dom7-3.0.0.tgz#b861ce5d67a6becd7aaa3ad02942ff14b1240331"
+ integrity sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==
  dependencies:
- ssr-window "^2.0.0"
+ ssr-window "^3.0.0-alpha.1"
 
 domain-browser@^1.1.1:
  version "1.2.0"
@@ -16214,10 +16209,10 @@ sshpk@^1.7.0:
  safer-buffer "^2.0.2"
  tweetnacl "~0.14.0"
 
-ssr-window@^2.0.0:
- version "2.0.0"
- resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
- integrity sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q=
+ssr-window@^3.0.0, ssr-window@^3.0.0-alpha.1:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37"
+ integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
 
 ssri@^6.0.0, ssri@^6.0.1:
  version "6.0.1"
@@ -16762,13 +16757,13 @@ svg-tags@^1.0.0:
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-swiper@^5.4.5:
- version "5.4.5"
- resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f"
- integrity sha1-o1D2VL9oQm27ZReTgkklUS0iPA8=
+swiper@^6.5.7:
+ version "6.5.7"
+ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/swiper/-/swiper-6.5.7.tgz#c66a95f70a49253e7bfcaea805a82379959cd8b7"
+ integrity sha1-xmqV9wpJJT57/K6oBagjeZWc2Lc=
  dependencies:
- dom7 "^2.1.5"
- ssr-window "^2.0.0"
+ dom7 "^3.0.0"
+ ssr-window "^3.0.0"
 
 symbol-observable@^1.0.4:
  version "1.2.0"