svelte-pdf

svelte-pdf copied to clipboard

Background

The following warnings are output to console when building a project that uses this library, version 1.0.20.

It is not expected that plugins output build warnings.

Accessibility

The code should be refactored to be more accessible.

Eval

If it's possible to not use eval, that would be great. If not, this warning should be either suppressed or a config should be provided from the package to suppress it.

web:build: 244:         {#if showButtons.includes("navigation")}
web:build: 245:           <Tooltip>
web:build: 246:             <span
web:build:                  ^
web:build: 247:               slot="activator"
web:build: 248:               class="button-control {pageNum <= 1 ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:266:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 264:           </Tooltip>
web:build: 265:           <Tooltip>
web:build: 266:             <span
web:build:                  ^
web:build: 267:               slot="activator"
web:build: 268:               class="button-control {pageNum >= totalPage ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:288:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 286:           {#if showButtons.includes("zoom")}
web:build: 287:           <Tooltip>
web:build: 288:             <span
web:build:                  ^
web:build: 289:               slot="activator"
web:build: 290:               class="button-control {scale >= maxScale ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:310:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 308:           </Tooltip>
web:build: 309:           <Tooltip>
web:build: 310:             <span
web:build:                  ^
web:build: 311:               slot="activator"
web:build: 312:               class="button-control {scale <= minScale ? 'disabled' : null}"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:334:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 332:           {#if showButtons.includes("print")}
web:build: 333:           <Tooltip>
web:build: 334:             <span
web:build:                  ^
web:build: 335:               slot="activator"
web:build: 336:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:356:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 354:           {#if showButtons.includes("rotate")}
web:build: 355:           <Tooltip>
web:build: 356:             <span
web:build:                  ^
web:build: 357:               slot="activator"
web:build: 358:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:376:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 374:           </Tooltip>
web:build: 375:           <Tooltip>
web:build: 376:             <span
web:build:                  ^
web:build: 377:               slot="activator"
web:build: 378:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:398:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 396:           {#if showButtons.includes("download")}
web:build: 397:           <Tooltip>
web:build: 398:             <span
web:build:                  ^
web:build: 399:               slot="activator"
web:build: 400:               class="button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/PdfViewer.svelte:417:12 A11y: <span> with click, keydown handlers must have an ARIA role
web:build: 415:           {#if showButtons.includes("autoflip")}
web:build: 416:           <Tooltip>
web:build: 417:             <span
web:build:                  ^
web:build: 418:               slot="activator"
web:build: 419:               class="page-info button-control"
web:build: 13:11:47 [vite-plugin-svelte] D:/Coding/0 - Work/dragongc/dragongc/node_modules/svelte-pdf/utils/Tooltip.svelte:71:2 A11y: <div> with 
mouseenter, mouseleave, mouseenter, mouseleave handlers must have an ARIA role
web:build: 69: 
web:build: 70: <div class="activator">
web:build: 71:   <div
web:build:       ^
web:build: 72:     on:mouseenter={debounce(showTooltip, 100)}
web:build: 73:     on:mouseleave={debounce(hideTooltip, 500)}
web:build: ../../node_modules/pdfjs-dist/build/pdf.js (1982:23): Use of eval in "../../node_modules/pdfjs-dist/build/pdf.js" is strongly discouraged as it poses security risks and may cause issues with minification.

Change needed for accessibility:

<svelte:component
  this={PdfViewerModule}
  url={pdfUrl}
  showButtons={buttonOptions}
  showBorder={false}
/>

<!-- Example of updating a problematic <span> element -->
{#if showButtons.includes("navigation")}
  <Tooltip>
    <span
      slot="activator"
      role="button"
      tabindex="0"
      class="button-control {pageNum <= 1 ? 'disabled' : ''}"
      on:click={handleClick}
      on:keydown={handleKeydown}
    >
      <!-- Your content here -->
    </span>
  </Tooltip>
{/if}

<!-- Repeat similar updates for other <span> elements as needed -->