Add iframe title to improve, add new test, bump version #38

Author: alekswebnet

README.md

@@ -85,6 +85,8 @@ import 'pdfjs-viewer-element'
 
 `viewer-path` - Path to PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/)
 
+`iframe-title` - The title of the `iframe` element, required for better accessibility
+
 `page` - Page number.
 
 `nameddest` -  Go to a named destination.
@@ -184,6 +186,10 @@ const viewerApp = await viewer.initialize()
 viewerApp.open({ data: pdfData })
 ```
 
+## Accessablity
+
+Use `iframe-title` to add a title to the `iframe` element and improve accessibility.
+
 ## Known issues
 
 ### The `.mjs` files support

index.html

@@ -15,6 +15,7 @@
     </pdfjs-viewer-element>
     <pdfjs-viewer-element 
       id="hideOpenFileViewer"
+      iframe-title="Custom title"
       src="/sample-pdf-with-images.pdf" 
       viewer-path="/pdfjs-5.3.93-dist"
       locale="de"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",

src/pdfjs-viewer-element.ts

@@ -1,10 +1,11 @@
-import { elementReady } from "./elementReady";
+import { elementReady } from './elementReady'
 import { debounce } from 'perfect-debounce'
 
 const DEFAULTS = {
   viewerPath: '/pdfjs',
   viewerEntry: '/web/viewer.html',
   src: '',
+  iframeTitle: 'PDF viewer window',
   page: '',
   search: '',
   phrase: '',
@@ -43,7 +44,7 @@ export class PdfjsViewerElement extends HTMLElement {
     const template = document.createElement('template')
     template.innerHTML = `
       <style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
-      <iframe frameborder="0" width="100%" loading="lazy"></iframe>
+      <iframe frameborder="0" width="100%" loading="lazy" title="${this.getAttribute('iframe-title') || DEFAULTS.iframeTitle}"></iframe>
     `
     shadowRoot.appendChild(template.content.cloneNode(true))
   }
@@ -54,12 +55,12 @@ export class PdfjsViewerElement extends HTMLElement {
     return [
       'src', 'viewer-path', 'page', 'search', 'phrase', 'zoom', 'pagemode', 
       'disable-worker', 'text-layer', 'disable-font-face', 'disable-range', 'disable-stream', 'disable-auto-fetch', 'verbosity', 'locale',
-      'viewer-css-theme', 'viewer-extra-styles', 'viewer-extra-styles-urls', 'nameddest'
+      'viewer-css-theme', 'viewer-extra-styles', 'viewer-extra-styles-urls', 'nameddest', 'iframe-title'
     ]
   }
 
   connectedCallback() {
-    this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
+    this.iframe = this.shadowRoot?.querySelector('iframe') as PdfjsViewerElementIframe
     document.addEventListener('webviewerloaded', async () => {
       this.setCssTheme(this.getCssThemeOption())
       this.injectExtraStylesLinks(this.getAttribute('viewer-extra-styles-urls') ?? DEFAULTS.viewerExtraStylesUrls)
@@ -68,7 +69,7 @@ export class PdfjsViewerElement extends HTMLElement {
       this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('disablePreferences', true)
       this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('pdfBugEnabled', true)
       this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('eventBusDispatchToDOM', true)
-    });
+    })
   }
 
   attributeChangedCallback(name: string) {
@@ -126,9 +127,10 @@ ${nameddest ? '&nameddest=' + nameddest : ''}`
 
   private mountViewer(src: string) {
     if (!src || !this.iframe) return
-    this.shadowRoot!.replaceChild(this.iframe.cloneNode(), this.iframe)
-    this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
+    this.shadowRoot?.replaceChild(this.iframe.cloneNode(), this.iframe)
+    this.iframe = this.shadowRoot?.querySelector('iframe') as PdfjsViewerElementIframe
     this.iframe.src = src
+    this.iframe.setAttribute('title', this.getAttribute('iframe-title') || DEFAULTS.iframeTitle)
   }
 
   private getFullPath(path: string) {
@@ -161,7 +163,7 @@ ${nameddest ? '&nameddest=' + nameddest : ''}`
     else {
       this.iframe.contentDocument?.head.querySelector('style[theme]')?.remove()
     }
-    this.iframe.contentWindow?.PDFViewerApplicationOptions.set('viewerCssTheme', theme)
+    this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('viewerCssTheme', theme)
   }
 
   private setViewerExtraStyles = (styles?: string | null, id = 'extra') => {
@@ -190,7 +192,7 @@ ${nameddest ? '&nameddest=' + nameddest : ''}`
   }
 
   public initialize = (): Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']> => new Promise(async (resolve) => {
-    await elementReady('iframe', this.shadowRoot!)
+    await elementReady('iframe', this.shadowRoot as ShadowRoot)
     this.iframe?.addEventListener('load', async () => {
       await this.iframe.contentWindow?.PDFViewerApplication?.initializedPromise
       resolve(this.iframe.contentWindow?.PDFViewerApplication)

tests/basic.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { getFileData, getViewerElement, mountViewer } from './utils'
+import { getFileData, getViewerElement, mountViewer, getIframe } from './utils'
 import '../src/pdfjs-viewer-element'
 
 describe('Basic tests', async () => {
@@ -80,4 +80,16 @@ describe('Basic tests', async () => {
     expect(getViewerElement()).exist
     expect(getComputedStyle(getViewerElement('#downloadButton')!).display).eq('none')
   })
+
+  it('should add a title attribute to the iframe', async () => {
+    const viewerApp = await mountViewer(`
+      <pdfjs-viewer-element 
+        src="/sample-pdf-10MB.pdf" 
+        viewer-path="/pdfjs-5.3.93-dist"
+        iframe-title="Custom title"
+      ></pdfjs-viewer-element>`
+    )
+    expect(getViewerElement()).exist
+    expect(getIframe().title).eq('Custom title')
+  })
 })

vite.config.ts

@@ -22,7 +22,7 @@ export default defineConfig({
       enabled: true,
       // at least one instance is required
       instances: [
-        { browser: 'chrome' }
+        { browser: 'firefox' }
       ]
     }
   },