Svelte accessibility warnings present within plugin
thebrianbug opened this issue · 1 comments
thebrianbug commented
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.
thebrianbug commented
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 -->