Skip to content

Commit f36999c

Browse files
sathiyaseelanksf3503sathiyaseelanksf3503
committed
987332: Revamped common files
1 parent 878e19e commit f36999c

19 files changed

+1014
-728
lines changed

‎Document-Processing/PDF/PDF-Viewer/asp-net-mvc/accessibility.md‎

Lines changed: 67 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
---
22
layout: post
33
title: Accessibility with EJ2 ASP.NET MVC PDF Viewer | Syncfusion
4-
description: Learn here all about accessibility in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
4+
description: Learn here all about accessibility in ASP.NET MVC Pdfviewer component of Syncfusion Essential JS 2 and more.
55
platform: document-processing
66
control: PDF Viewer
77
publishingplatform: ASP.NET MVC
88
documentation: ug
99
---
10+
# Accessibility in Syncfusion PDF Viewer component
1011

11-
# Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer components
12+
The PDF Viewer component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also integrates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used for accessibility evaluation.
1213

13-
The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
14-
15-
The accessibility compliance for the PDF Viewer component is outlined below.
14+
Below is an outline of the accessibility compliance for the PDF Viewer component:
1615

1716
| Accessibility Criteria | Compatibility |
18-
| -- | -- |
19-
| [WCAG 2.2 Support]| <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
20-
| [Section 508 Support] | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
21-
| [Screen Reader Support]| <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22-
| [Right-To-Left Support]| <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
23-
| [Color Contrast] | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
24-
| [Mobile Device Support]| <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
25-
| [Keyboard Navigation Support]| <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
26-
| [Accessibility Checker Validation] | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
27-
| [Axe-core Accessibility Validation]| <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
17+
| --- | --- |
18+
| WCAG 2.2 Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
19+
| Section 508 Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
20+
| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
21+
| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22+
| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
23+
| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
24+
| Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
25+
| Accessibility Checker Validation | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
26+
| Axe-core Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
2827

2928
<style>
3029
.post .post-content img {
@@ -40,70 +39,70 @@ The accessibility compliance for the PDF Viewer component is outlined below.
4039

4140
## WAI-ARIA attributes
4241

43-
[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the PDF Viewer component:
42+
[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Web Accessibility Initiative – Accessible Rich Internet Applications) defines a way to make web content and web applications more accessible. It provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the PDF Viewer component:
4443

4544
| Attributes | Purpose |
4645
| --- | --- |
47-
| `aria-disabled`| Indicates whether the PDF Viewer component is in a disabled state or not.|
48-
| `aria-expanded`| Indicates whether the suggestion list has expanded or not. |
49-
| `aria-readonly` | Indicates the readonly state of the PDF Viewer element. |
50-
| `aria-haspopup` | Indicates whether the PDF Viewer input element has a suggestion list or not. |
51-
| `aria-label` | Indicates the breadcrumb item text. |
52-
| `aria-labelledby` | Provides a label for the PDF Viewer. Typically, the "aria-labelledby" attribute will contain the id of the element used as the PDF Viewer's title. |
53-
| `aria-describedby` | This attribute points to the PDF Viewer element describing the one it's set on. |
46+
| `aria-disabled` | Indicates whether the PDF Viewer component is in a disabled state. |
47+
| `aria-expanded` | Indicates whether the suggestion list has expanded. |
48+
| `aria-readonly` | Indicates the read-only state of the PDF Viewer element. |
49+
| `aria-haspopup` | Indicates whether the PDF Viewer input element has a suggestion list. |
50+
| `aria-label` | Provides a label for the breadcrumb item. |
51+
| `aria-labelledby` | Provides a label for the PDF Viewer, typically pointing to the ID of the element used as the viewer's title. |
52+
| `aria-describedby` | This attribute points to an element describing the PDF Viewer component. |
5453
| `aria-orientation` | Indicates whether the PDF Viewer element is oriented horizontally or vertically. |
55-
| `aria-valuetext` | Returns the current text of the PDF Viewer. |
56-
| `aria-valuemax` | Indicates the Maximum value of the PDF Viewer. |
57-
| `aria-valuemin` | Indicates the Minimum value of the PDF Viewer. |
54+
| `aria-valuetext` | Returns the current text value of the PDF Viewer. |
55+
| `aria-valuemax` | Indicates the maximum value of the PDF Viewer. |
56+
| `aria-valuemin` | Indicates the minimum value of the PDF Viewer. |
5857
| `aria-valuenow` | Indicates the current value of the PDF Viewer. |
59-
| `aria-controls` | Attribute is set to the button and it points to the corresponding content. |
58+
| `aria-controls` | Attribute set on a button, pointing to its corresponding content. |
6059

6160
## Keyboard interaction
6261

63-
The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Message component.
62+
The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it easy for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component:
6463

65-
| **Press (Windows)** |**Press (Macintosh)** | **To do this** |
64+
| **Press (Windows)** | **Press (Macintosh)** | **To do this** |
6665
| --- | --- | --- |
67-
|||**Shortcuts for page navigation**|
68-
| <kbd>CONTROL + Left Arrow (or) CONTROL + Up Arrow</kbd> | <kbd>COMMAND + Left Arrow (or) COMMAND + Up Arrow </kbd> |Navigate to the first page |
69-
| <kbd>CONTROL + Right Arrow (or) CONTROL + Down Arrow</kbd> |<kbd>COMMAND + Right Arrow (or) COMMAND + Down Arrow</kbd> |Navigate to the last page |
70-
|<kbd>Left Arrow</kbd> |<kbd> Left Arrow (or) Shift + Space </kbd> |Navigate to the previous page|
66+
| | | **Shortcuts for page navigation** |
67+
| <kbd>CONTROL + Left Arrow (or) CONTROL + Up Arrow</kbd> | <kbd>COMMAND + Left Arrow (or) COMMAND + Up Arrow</kbd> | Navigate to the first page |
68+
| <kbd>CONTROL + Right Arrow (or) CONTROL + Down Arrow</kbd> | <kbd>COMMAND + Right Arrow (or) COMMAND + Down Arrow</kbd> | Navigate to the last page |
69+
| <kbd>Left Arrow</kbd> | <kbd>Left Arrow (or) Shift + Space</kbd> | Navigate to the previous page |
7170
| <kbd>Right Arrow</kbd> | <kbd>Right Arrow (or) Space</kbd> | Navigate to the next page |
72-
| <kbd>CONTROL + G</kbd> | <kbd>COMMAND + G</kbd> | Go To The Page|
73-
|<kbd>Up Arrow</kbd> |<kbd>Up Arrow </kbd> |Scroll up|
74-
| <kbd>Down Arrow</kbd> | <kbd>Down Arrow</kbd> | Scroll down|
75-
|||**Shortcuts for Zooming**|
76-
|<kbd>CONTROL + =</kbd> |<kbd>COMMAND + =</kbd> | Perform zoom-in operation |
71+
| <kbd>CONTROL + G</kbd> | <kbd>COMMAND + G</kbd> | Go to a specific page |
72+
| <kbd>Up Arrow</kbd> | <kbd>Up Arrow</kbd> | Scroll up |
73+
| <kbd>Down Arrow</kbd> | <kbd>Down Arrow</kbd> | Scroll down |
74+
| | | **Shortcuts for zooming** |
75+
| <kbd>CONTROL + =</kbd> | <kbd>COMMAND + =</kbd> | Perform zoom-in operation |
7776
| <kbd>CONTROL + -</kbd> | <kbd>COMMAND + -</kbd> | Perform zoom-out operation |
78-
|<kbd>CONTROL + 0</kbd> |<kbd>COMMAND + 0</kbd> | Retain the zoom level to 1 |
79-
|||**Shortcut for Text Search**|
80-
| <kbd>CONTROL + F</kbd> | <kbd>COMMAND + F</kbd> |Open the search toolbar|
81-
|||**Shortcut for Text Selection**|
82-
|<kbd>CONTROL + C</kbd> |<kbd>CONTROL + C</kbd> | Copy the selected text or annotation or form field |
83-
| <kbd>CONTROL + X</kbd> | <kbd>CONTROL + X</kbd> |Cut the selected text or annotation of the form field|
84-
|<kbd>CONTROL + Y</kbd> |<kbd>CONTROL + Y</kbd> |Paste the selected text or annotation or form field|
85-
|||**Shortcuts for the general operation**|
86-
| <kbd>CONTROL + Z</kbd> | <kbd>CONTROL + Z</kbd> |Undo the action|
87-
|<kbd>CONTROL + Y</kbd> |<kbd>CONTROL + Y</kbd> |Redo the action|
88-
| <kbd>CONTROL + P</kbd> | <kbd>COMMAND + P</kbd> |Print the document|
89-
|<kbd>Delete</kbd> |<kbd>Delete</kbd> |Delete the annotations and form fields|
90-
|<kbd>CONTROL + Shift + A</kbd> |<kbd>COMMAND + Shift + A</kbd> |Toggle Annotation Toolbar|
91-
|<kbd>CONTROL + Alt + 0</kbd> |<kbd>COMMAND + Option + 0</kbd> |Show Command panel|
92-
|<kbd>CONTROL + Alt + 2</kbd> |<kbd>COMMAND + Option + 2</kbd> |Show Bookmarks|
93-
|<kbd>CONTROL + Alt + 1</kbd> |<kbd>COMMAND + Option + 1</kbd> |Show Thumbnails|
94-
|<kbd>CONTROL + S</kbd> |<kbd>COMMAND + S</kbd> |Download|
95-
|<kbd>Shift + H</kbd> |<kbd>Shift + H</kbd> |Enable pan mode|
96-
|<kbd>Shift + V</kbd> |<kbd>Shift + V</kbd> |Enable text selection mode|
97-
98-
The current implementation of our PDF Viewer includes keyboard shortcuts for various functions like scrolling, zooming, text search, printing, and annotation deletion.
99-
100-
To enhance user experience, we're adding additional keyboard shortcuts for actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements like outlines, annotations, bookmarks, and thumbnails.
101-
102-
To support this, we're introducing a new class called **commandManager**, which handles custom commands triggered by specific key gestures. These custom commands will be defined by users and executed accordingly.
103-
104-
The **commandManager** will have a parameter called Commands, which will hold the collection of custom keyboard commands specified by users. Each custom command will be represented by a KeyboardCommand class, containing the `command name` and associated `keyboard combination`.
105-
106-
Additionally, we're introducing the **keyboardCustomCommands** parameter for the CommandManager, which will utilize the EventCallback to handle keyboard events and trigger appropriate methods when specific key combinations are pressed.
77+
| <kbd>CONTROL + 0</kbd> | <kbd>COMMAND + 0</kbd> | Reset zoom level to 100% |
78+
| | | **Shortcut for text search** |
79+
| <kbd>CONTROL + F</kbd> | <kbd>COMMAND + F</kbd> | Open the search toolbar |
80+
| | | **Shortcut for text selection** |
81+
| <kbd>CONTROL + C</kbd> | <kbd>CONTROL + C</kbd> | Copy selected text, annotation, or form field |
82+
| <kbd>CONTROL + X</kbd> | <kbd>CONTROL + X</kbd> | Cut selected text, annotation, or form field |
83+
| <kbd>CONTROL + V</kbd> | <kbd>COMMAND + V</kbd> | Paste selected text, annotation, or form field |
84+
| | | **Shortcuts for general operations** |
85+
| <kbd>CONTROL + Z</kbd> | <kbd>COMMAND + Z</kbd> | Undo the action |
86+
| <kbd>CONTROL + Y</kbd> | <kbd>COMMAND + Y</kbd> | Redo the action |
87+
| <kbd>CONTROL + P</kbd> | <kbd>COMMAND + P</kbd> | Print the document |
88+
| <kbd>Delete</kbd> | <kbd>Delete</kbd> | Delete selected annotations and form fields |
89+
| <kbd>CONTROL + Shift + A</kbd> | <kbd>COMMAND + Shift + A</kbd> | Toggle Annotation Toolbar |
90+
| <kbd>CONTROL + Alt + 0</kbd> | <kbd>COMMAND + Option + 0</kbd> | Show Command panel |
91+
| <kbd>CONTROL + Alt + 2</kbd> | <kbd>COMMAND + Option + 2</kbd> | Show Bookmarks |
92+
| <kbd>CONTROL + Alt + 1</kbd> | <kbd>COMMAND + Option + 1</kbd> | Show Thumbnails |
93+
| <kbd>CONTROL + S</kbd> | <kbd>COMMAND + S</kbd> | Download the document |
94+
| <kbd>Shift + H</kbd> | <kbd>Shift + H</kbd> | Enable pan mode |
95+
| <kbd>Shift + V</kbd> | <kbd>Shift + V</kbd> | Enable text selection mode |
96+
97+
The current implementation of our PDF Viewer includes keyboard shortcuts for functions such as scrolling, zooming, text search, printing, and annotation deletion.
98+
99+
To enhance user experience, we are adding additional keyboard shortcuts for actions like navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements (outlines, annotations, bookmarks, and thumbnails).
100+
101+
To support these enhancements, we are introducing a new class called **commandManager**. This class handles custom commands triggered by specific key gestures, which are defined by users and executed accordingly.
102+
103+
The **commandManager** includes a parameter called `keyboardCommand` (which replaces `Commands`). This parameter holds a collection of custom keyboard commands specified by users. Each custom command is represented by a `KeyboardCommand` class, containing the `name` of the command and its associated `gesture` (keyboard combination).
104+
105+
Additionally, we are introducing an `EventCallback` to the `keyboardCustomCommands` parameter for the `CommandManager`. This will handle keyboard events and trigger appropriate methods when specific key combinations are pressed.
107106

108107
{% tabs %}
109108
{% highlight html tabtitle="Standalone" %}
@@ -207,5 +206,4 @@ This setup allows users to perform custom actions within the PDF viewer by press
207206

208207
The PDF Viewer component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
209208

210-
211-
N> Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started/) to create a simple PDF Viewer sample.
209+
N> Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started) to create a simple PDF Viewer sample.

‎Document-Processing/PDF/PDF-Viewer/asp-net-mvc/download.md‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,36 @@
11
---
22
layout: post
3-
title: Download in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
3+
title: Download in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
44
description: Learn here all about Download in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
55
platform: document-processing
66
control: Download
7-
publishingplatform: document-processing
87
documentation: ug
98
---
109

11-
# Download a PDF document in PDF Viewer component
10+
# Download PDF document in PDF Viewer component
1211

13-
The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet.
12+
The PDF Viewer supports downloading the loaded PDF file. You can enable or disable the download using the following example.
13+
14+
{% tabs %}
15+
{% highlight cshtml tabtitle="Standalone" %}
16+
17+
<div id="e-pv-e-sign-pdfViewer-div">
18+
@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableDownload(true).Render()
19+
</div>
20+
21+
{% endhighlight %}
22+
{% highlight cshtml tabtitle="Server-Backed" %}
23+
24+
<div id="e-pv-e-sign-pdfViewer-div">
25+
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableDownload(true).Render()
26+
</div>
27+
28+
{% endhighlight %}
29+
{% endtabs %}
30+
31+
![Alt text](./images/download.png)
32+
33+
You can also programmatically invoke the download action using the `download()` method, as shown below:
1434

1535
{% tabs %}
1636
{% highlight html tabtitle="Standalone" %}
@@ -43,7 +63,9 @@ The PDF Viewer supports downloading the loaded PDF file. You can enable/disable
4363
{% endhighlight %}
4464
{% endtabs %}
4565

46-
![Alt text](../images/download.png)
66+
## Get the base64 string while downloading the PDF document
67+
68+
You can use the [downloadEnd](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DownloadEnd) event of the PDF Viewer to retrieve the downloaded document as a base64 string.
4769

4870
## See also
4971

0 commit comments

Comments
 (0)