Keyboard accessibility in React Pdfviewer component

16 May 20235 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 {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 */}

          ref={(scope) => { pdfviewer = scope; }}
          style={{ 'height': '640px' }}>

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