Skip to content

Commit 7d30cea

Browse files
SivaSelvan-SFSivaSelvan-SF
committed
Merge branch 'EJ2-986770-RevampDoc' of https://github.com/syncfusion-content/document-processing-docs into EJ2-986770-RevampDoc
2 parents 697d38b + 2dc6667 commit 7d30cea

File tree

582 files changed

+32703
-8142
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

582 files changed

+32703
-8142
lines changed

‎Document-Processing-toc.html‎

Lines changed: 180 additions & 14 deletions
Large diffs are not rendered by default.

‎Document-Processing/Excel/Spreadsheet/Blazor/rows-and-columns.md‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,10 @@ You can insert rows or columns anywhere in a spreadsheet.
2020

2121
### Row
2222

23-
The rows can be inserted in the following ways:
23+
The rows can be inserted in the following ways,
2424

25-
**Using the context menu**
26-
27-
Insert rows in the desired position by right-clicking on a row header.
28-
29-
**Using `InsertRowAsync` method**
30-
31-
Using [`InsertRowAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertRowAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_RowPosition_) method, you can insert the rows once the component is loaded.
25+
* Using [`InsertRowAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertRowAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_RowPosition_) method, you can insert the rows once the component is loaded.
26+
* Using context menu, insert the rows in the desired position.
3227

3328
The following code example shows the options for inserting rows in the spreadsheet.
3429

@@ -74,15 +69,10 @@ The following code example shows the options for inserting rows in the spreadshe
7469

7570
### Column
7671

77-
The columns can be inserted in the following ways:
78-
79-
**Using the context menu**
80-
81-
Insert columns in the desired position by right-clicking on a column header.
82-
83-
**Using `InsertColumnAsync` method**
72+
The columns can be inserted in the following ways,
8473

85-
Using [`InsertColumnAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertColumnAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_ColumnPosition_) method, you can insert the columns once the component is loaded.
74+
* Using [`InsertColumnAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertColumnAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_ColumnPosition_) method, you can insert the columns once the component is loaded.
75+
* Using context menu, insert the columns in the desired position.
8676

8777
The following code example shows the options for inserting columns in the spreadsheet.
8878

@@ -133,16 +123,16 @@ The Blazor Spreadsheet component enables you to define the initial number of row
133123
* The default `RowCount` is **1000**.
134124
* The default `ColumnCount` is **200**.
135125

136-
**Rendering Behavior**
126+
### Rendering Behavior
137127

138128
- **Without Data Source:**
139129

140-
- When no data is bound to the spreadsheet, the sheet renders empty cells up to RowCount × ColCount.
130+
- When no data is bound to the spreadsheet, the sheet renders empty cells up to the specified row and column counts.
141131

142132
- **With Data Source (e.g., byte array or imported file):**
143133

144-
- If the data source has fewer rows/columns than RowCount/ColCount, the spreadsheet renders additional empty rows/columns to meet the specified counts.
145-
- If the data source has more rows/columns than RowCount/ColCount, the spreadsheet renders enough rows/columns to display all data from the source (i.e., it extends beyond the specified counts to fit the data). Your data is never truncated by these properties.
134+
- If the data source contains fewer rows and columns than the specified row and column counts, the spreadsheet renders additional empty rows and columns to meet those counts.
135+
- If the data source contains more rows and columns than the specified row and column counts, the spreadsheet renders enough rows and columns to display all the data (i.e., it extends beyond those counts to fit the data). Your data is never truncated by these properties.
146136

147137

148138
You can set these properties as follows:

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

Lines changed: 67 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
11
---
22
layout: post
33
title: Accessibility with EJ2 ASP.NET Core PDF Viewer | Syncfusion
4-
description: Learn here all about accessibility in ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more.
4+
description: Learn here all about accessibility in ASP.NET Core PDF Viewer component of Syncfusion Essential JS 2 and more.
55
platform: document-processing
66
control: PDF Viewer
7-
publishingplatform: ASP.NET Core
87
documentation: ug
98
---
10-
# Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer components
9+
# Accessibility in Syncfusion PDF Viewer component
1110

12-
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.
11+
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.
1312

14-
The accessibility compliance for the PDF Viewer component is outlined below.
13+
Below is an outline of the accessibility compliance for the PDF Viewer component:
1514

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

2827
<style>
2928
.post .post-content img {
@@ -39,71 +38,70 @@ The accessibility compliance for the PDF Viewer component is outlined below.
3938

4039
## WAI-ARIA attributes
4140

42-
[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:
41+
[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:
4342

4443
| Attributes | Purpose |
4544
| --- | --- |
46-
| `aria-disabled`| Indicates whether the PDF Viewer component is in a disabled state or not.|
47-
| `aria-expanded`| Indicates whether the suggestion list has expanded or not. |
48-
| `aria-readonly` | Indicates the readonly state of the PDF Viewer element. |
49-
| `aria-haspopup` | Indicates whether the PDF Viewer input element has a suggestion list or not. |
50-
| `aria-label` | Indicates the breadcrumb item text. |
51-
| `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. |
52-
| `aria-describedby` | This attribute points to the PDF Viewer element describing the one it's set on. |
45+
| `aria-disabled` | Indicates whether the PDF Viewer component is in a disabled state. |
46+
| `aria-expanded` | Indicates whether the suggestion list has expanded. |
47+
| `aria-readonly` | Indicates the read-only state of the PDF Viewer element. |
48+
| `aria-haspopup` | Indicates whether the PDF Viewer input element has a suggestion list. |
49+
| `aria-label` | Provides a label for the breadcrumb item. |
50+
| `aria-labelledby` | Provides a label for the PDF Viewer, typically pointing to the ID of the element used as the viewer's title. |
51+
| `aria-describedby` | This attribute points to an element describing the PDF Viewer component. |
5352
| `aria-orientation` | Indicates whether the PDF Viewer element is oriented horizontally or vertically. |
54-
| `aria-valuetext` | Returns the current text 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. |
53+
| `aria-valuetext` | Returns the current text value of the PDF Viewer. |
54+
| `aria-valuemax` | Indicates the maximum value of the PDF Viewer. |
55+
| `aria-valuemin` | Indicates the minimum value of the PDF Viewer. |
5756
| `aria-valuenow` | Indicates the current value of the PDF Viewer. |
58-
| `aria-controls` | Attribute is set to the button and it points to the corresponding content. |
57+
| `aria-controls` | Attribute set on a button, pointing to its corresponding content. |
5958

6059
## Keyboard interaction
6160

62-
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.
61+
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:
6362

64-
| **Press (Windows)** |**Press (Macintosh)** | **To do this** |
63+
| **Press (Windows)** | **Press (Macintosh)** | **To do this** |
6564
| --- | --- | --- |
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|
65+
| | | **Shortcuts for page navigation** |
66+
| <kbd>CONTROL + Left Arrow (or) CONTROL + Up Arrow</kbd> | <kbd>COMMAND + Left Arrow (or) COMMAND + Up Arrow</kbd> | Navigate to the first page |
67+
| <kbd>CONTROL + Right Arrow (or) CONTROL + Down Arrow</kbd> | <kbd>COMMAND + Right Arrow (or) COMMAND + Down Arrow</kbd> | Navigate to the last page |
68+
| <kbd>Left Arrow</kbd> | <kbd>Left Arrow (or) Shift + Space</kbd> | Navigate to the previous page |
7069
| <kbd>Right Arrow</kbd> | <kbd>Right Arrow (or) Space</kbd> | Navigate to the next page |
71-
| <kbd>CONTROL + G</kbd> | <kbd>COMMAND + G</kbd> | Go To The 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 |
70+
| <kbd>CONTROL + G</kbd> | <kbd>COMMAND + G</kbd> | Go to a specific page |
71+
| <kbd>Up Arrow</kbd> | <kbd>Up Arrow</kbd> | Scroll up |
72+
| <kbd>Down Arrow</kbd> | <kbd>Down Arrow</kbd> | Scroll down |
73+
| | | **Shortcuts for zooming** |
74+
| <kbd>CONTROL + =</kbd> | <kbd>COMMAND + =</kbd> | Perform zoom-in operation |
7675
| <kbd>CONTROL + -</kbd> | <kbd>COMMAND + -</kbd> | Perform zoom-out operation |
77-
|<kbd>CONTROL + 0</kbd> |<kbd>COMMAND + 0</kbd> | Retain the zoom level to 1 |
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 the selected text or annotation or form field |
82-
| <kbd>CONTROL + X</kbd> | <kbd>CONTROL + X</kbd> |Cut the selected text or annotation of the form field|
83-
|<kbd>CONTROL + Y</kbd> |<kbd>CONTROL + Y</kbd> |Paste the selected text or annotation or form field|
84-
|||**Shortcuts for the general operation**|
85-
| <kbd>CONTROL + Z</kbd> | <kbd>CONTROL + Z</kbd> |Undo the action|
86-
|<kbd>CONTROL + Y</kbd> |<kbd>CONTROL + 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 the 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|
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 various functions like scrolling, zooming, text search, printing, and annotation deletion.
98-
99-
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.
100-
101-
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.
102-
103-
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`.
104-
105-
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.
106-
76+
| <kbd>CONTROL + 0</kbd> | <kbd>COMMAND + 0</kbd> | Reset zoom level to 100% |
77+
| | | **Shortcut for text search** |
78+
| <kbd>CONTROL + F</kbd> | <kbd>COMMAND + F</kbd> | Open the search toolbar |
79+
| | | **Shortcut for text selection** |
80+
| <kbd>CONTROL + C</kbd> | <kbd>CONTROL + C</kbd> | Copy selected text, annotation, or form field |
81+
| <kbd>CONTROL + X</kbd> | <kbd>CONTROL + X</kbd> | Cut selected text, annotation, or form field |
82+
| <kbd>CONTROL + V</kbd> | <kbd>COMMAND + V</kbd> | Paste selected text, annotation, or form field |
83+
| | | **Shortcuts for general operations** |
84+
| <kbd>CONTROL + Z</kbd> | <kbd>COMMAND + Z</kbd> | Undo the action |
85+
| <kbd>CONTROL + Y</kbd> | <kbd>COMMAND + Y</kbd> | Redo the action |
86+
| <kbd>CONTROL + P</kbd> | <kbd>COMMAND + P</kbd> | Print the document |
87+
| <kbd>Delete</kbd> | <kbd>Delete</kbd> | Delete selected annotations and form fields |
88+
| <kbd>CONTROL + Shift + A</kbd> | <kbd>COMMAND + Shift + A</kbd> | Toggle Annotation Toolbar |
89+
| <kbd>CONTROL + Alt + 0</kbd> | <kbd>COMMAND + Option + 0</kbd> | Show Command panel |
90+
| <kbd>CONTROL + Alt + 2</kbd> | <kbd>COMMAND + Option + 2</kbd> | Show Bookmarks |
91+
| <kbd>CONTROL + Alt + 1</kbd> | <kbd>COMMAND + Option + 1</kbd> | Show Thumbnails |
92+
| <kbd>CONTROL + S</kbd> | <kbd>COMMAND + S</kbd> | Download the document |
93+
| <kbd>Shift + H</kbd> | <kbd>Shift + H</kbd> | Enable pan mode |
94+
| <kbd>Shift + V</kbd> | <kbd>Shift + V</kbd> | Enable text selection mode |
95+
96+
The current implementation of our PDF Viewer includes keyboard shortcuts for functions such as scrolling, zooming, text search, printing, and annotation deletion.
97+
98+
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).
99+
100+
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.
101+
102+
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).
103+
104+
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.
107105

108106
{% tabs %}
109107
{% highlight cshtml tabtitle="Standalone" %}
@@ -198,7 +196,6 @@ Additionally, we're introducing the **keyboardCustomCommands** parameter for the
198196
{% endhighlight %}
199197
{% endtabs %}
200198

201-
202199
Each `keyboardCommand` object consists of a name property, specifying the `name` of the `custom command`, and a `gesture property`, defining the key gesture associated with the command.
203200

204201
For example, the first command named `customCopy` is associated with the **G** key and requires both the **Shift** and **Alt** modifier keys to be pressed simultaneously.
@@ -216,4 +213,4 @@ This setup allows users to perform custom actions within the PDF viewer by press
216213

217214
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.
218215

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

0 commit comments

Comments
 (0)