Keyboard accessibility in React Pdfviewer component

5 Jan 20247 minutes to read

The react PDF Viewer supports the following keyboard interactions.

Action Windows Macintosh
Shortcuts for page navigation    
Navigate to the first page Home Function + Left arrow
Navigate to the last page End Function + Right arrow
Navigate to the previous page Up Arrow Up Arrow
Navigate to the next page Down Arrow Down Arrow
Shortcuts for Zooming    
Perform zoom-in operation CONTROL + = COMMAND + =
Perform zoom-out operation CONTROL + - COMMAND + -
Retain the zoom level to 1 CONTROL + 0 COMMAND + 0
Shortcut for Text Search    
Open the search toolbar CONTROL + F COMMAND + F
Shortcut for Text Selection    
Copy the selected text or annotation or form field CONTROL + C COMMAND + C
Cut the selected text or annotation of the form field CONTROL + X COMMAND + X
Paste the selected text or annotation or form field CONTROL + Y COMMAND + Y
Shortcuts for the general operation    
Undo the action CONTROL + Z COMMAND + Z
Redo the action CONTROL + Y COMMAND + Y
Print the document CONTROL + P COMMAND + P
Delete the annotations and form fields Delete Delete 
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
       ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
let pdfviewer;

function App() {
  return (<div>
    <div className='control-section'>
      {/* Render the PDF Viewer */}
        <PdfViewerComponent

          ref={(scope) => { pdfviewer = scope; }}
          id="container"
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
          resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
          style={{ 'height': '640px' }}>

                <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
                                    ThumbnailView, Print,TextSelection, TextSearch]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
       ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
let pdfviewer;

function App() {
  return (<div>
    <div className='control-section'>
      {/* Render the PDF Viewer */}
        <PdfViewerComponent

          ref={(scope) => { pdfviewer = scope; }}
          id="container"
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
          serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
          style={{ 'height': '640px' }}>

                <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
                                    ThumbnailView, Print,TextSelection, TextSearch]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);