Skip to content

1009185: Revamp the content for the Blazor PDF Viewer #2224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GokulprasathVenkatachalam merged 5 commits into from
Feb 12, 2026
Merged

1009185: Revamp the content for the Blazor PDF Viewer #2224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4472bce
1009185: Revamp the content for the Blazor PDF Viewer
Tamilselvan-Durairaj Feb 12, 2026
555b191
1009185: Resolved the CI failures
Tamilselvan-Durairaj Feb 12, 2026
64cb49a
1009185: Addressed the review changes
Tamilselvan-Durairaj Feb 12, 2026
4ac2f1f
1009185: Addressed the reviewed changes
Tamilselvan-Durairaj Feb 12, 2026
d8ffd1c
1009185: Removed the unwanted changes
Tamilselvan-Durairaj Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,29 +37,29 @@ The accessibility compliance for the Blazor SfPdfViewer component is outlined be

## WAI-ARIA attributes

[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance 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 Blazor SfPdfViewer component:
[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance 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 commonly applied in the SfPdfViewer component:

| Attributes | Purpose |
| --- | --- |
| `aria-disabled`| Indicates whether the Blazor SfPdfViewer component is in a disabled state or not.|
| `aria-expanded`| Indicates whether the suggestion list has expanded or not. |
| `aria-readonly` | Indicates the readonly state of the Blazor SfPdfViewer element. |
| `aria-haspopup` | Indicates whether the Blazor SfPdfViewer input element has a suggestion list or not. |
| `aria-label` | Indicates the breadcrumb item text. |
| `aria-labelledby` | Provides a label for the SfPdfViewer. Typically, the "aria-labelledby" attribute will contain the id of the element used as the Blazor SfPdfViewer's title. |
| `aria-describedby` | This attribute points to the Blazor SfPdfViewer element describing the one it's set on. |
| `aria-orientation` | Indicates whether the Blazor SfPdfViewer element is oriented horizontally or vertically. |
| `aria-valuetext` | Returns the current text of the SfPdfViewer. |
| `aria-valuemax` | Indicates the Maximum value of the SfPdfViewer. |
| `aria-valuemin` | Indicates the Minimum value of the SfPdfViewer. |
| `aria-valuenow` | Indicates the current value of the SfPdfViewer. |
| `aria-controls` | Attribute is set to the button and it points to the corresponding content. |
| `aria-disabled` | Indicates whether an interactive control (for example, a toolbar button) is disabled and not operable. |
| `aria-expanded` | Indicates whether an expandable element (for example, a panel or toolbar menu) is currently expanded. |
| `aria-readonly` | Indicates that the element is read-only and user input is not expected. |
| `aria-haspopup` | Identifies that the element opens a popup (menu, dialog, or toolbar). |
| `aria-label` | Provides an accessible name for controls or regions when a visible label is not available. |
| `aria-labelledby` | Identifies the element that labels this element by referencing that element's id. |
| `aria-describedby` | Identifies the element that provides a description for this element by referencing that element's id. |
| `aria-orientation` | Indicates the orientation (horizontal or vertical) of widgets such as sliders or splitters. |
| `aria-valuetext` | Provides a human-readable text alternative of the current value (for example, a zoom level). |
| `aria-valuemax` | Indicates the maximum value for range widgets (for example, maximum zoom). |
| `aria-valuemin` | Indicates the minimum value for range widgets (for example, minimum zoom). |
| `aria-valuenow` | Indicates the current numeric value for range widgets (for example, current zoom). |
| `aria-controls` | Identifies the element or region controlled by this element (for example, a button that opens a panel). |

## Keyboard interaction

The Blazor SfPdfViewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it accessible to users who rely on assistive technologies (AT) and keyboard navigation. The following keyboard shortcuts are supported by the SfPdfViewer component.

| Windows | Mac | Actions |
| Windows | Mac | Action |
| --- | --- | --- |
|||**Shortcuts for page navigation**|
| <kbd>Ctrl</kbd> + <kbd>←</kbd> / <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>←</kbd> / <kbd>⌘</kbd> + <kbd>↑</kbd> |Navigate to the first page |
Expand Down
4 changes: 2 additions & 2 deletions Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ This accessible PDF reading feature supports two approaches:
2. Windows Speech Synthesis API

The following demo illustrates both supported approaches:
- [Blazor PDF Viewer example -Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)
- [Blazor PDF Viewer example - Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)

## Microsoft Edge’s Screen Reader

Expand Down Expand Up @@ -917,7 +917,7 @@ function clearAllHighlights() {
{% endhighlight %}
{% endtabs %}

![Windows Speech Synthesis](./images/windows-speech-synthesis.png)
![Windows Speech Synthesis UI](./images/windows-speech-synthesis.png)

[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Accessible/WebSynthesis)

Expand Down
42 changes: 21 additions & 21 deletions Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,49 +9,49 @@ documentation: ug

# Annotations in mobile view

This article explains how to work with annotations in the mobile view of the Blazor SfPdfViewer. It covers opening the annotation toolbar, adding each annotation type, adjusting properties, deleting annotations, and using the comments panel.
This topic explains how to work with annotations in the mobile view of the Blazor `SfPdfViewer`. It covers opening the annotation toolbar, adding annotation types, adjusting properties, deleting annotations, and using the comments panel.

## To open the annotation toolbar
## Open the annotation toolbar

To open the annotation toolbar, tap the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer.
Open the annotation toolbar by tapping the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer.

![Mobile Annotation Toolbar in Blazor SfPdfViewer](../images/open-annotation-toolbar.gif)

## To add sticky notes annotation
## Add a sticky note annotation

Tap the **Sticky Note Annotation** icon, then tap anywhere in the viewer to place the note.

![Choose Sticky Note Annotation in Blazor SfPdfViewer](../images/click-stickynote-annotation.png)

The comments panel opens so the comment for the sticky note can be entered.
The comments panel opens to enter the comment associated with the sticky note.

![Sticky note annotation added in Blazor SfPdfViewer](../images/sticky-note-added.png)

## To add text markup annotation
## Add a text markup annotation

Long-press to select text in the PDF, then tap a **Text Markup Annotation** in the toolbar (for example, highlight, underline, strikethrough, or squiggly).
Long-press to select text in the PDF, then tap a **Text Markup Annotation** option in the toolbar (for example, highlight, underline, strikethrough, or squiggly).

![Select text for text markup in Blazor SfPdfViewer](../images/select-text-for-text-markup.png)

The toolbar then shows the available properties for the chosen annotation (such as color and opacity).
The toolbar then shows properties for the chosen annotation (such as color and opacity).

![Text markup applied to selected text in Blazor SfPdfViewer](../images/text-markup-added-for-selected-text.png)

## To add shape annotation
## Add a shape annotation

Tap the **Shape Annotation** icon in the toolbar to view the available shapes.
Tap the **Shape Annotation** icon in the toolbar to view available shapes.

![Open the shape annotations menu in Blazor SfPdfViewer](../images/click-shape-icon.png)

Choose a shape, then tap and drag in the viewer to draw it.

![Select a shape type in Blazor SfPdfViewer](../images/select-required-shape.png)

After placement, the toolbar switches to the properties toolbar for the added annotation, where options such as fill color, stroke color, thickness, and opacity can be adjusted.
After placement, the toolbar switches to the properties toolbar for the added annotation; adjust options such as fill color, stroke color, thickness, and opacity.

![Draw a selected shape annotation in Blazor SfPdfViewer](../images/add-selected-shape-annotation.png)

## To add measure annotation
## Add a measurement annotation

Tap the **Measure Annotation** icon in the toolbar to view supported measurement types.

Expand All @@ -65,7 +65,7 @@ After placement, the properties toolbar appears with options relevant to the mea

![Draw a selected measurement annotation in Blazor SfPdfViewer](../images/add-selected-measure-annotation.png)

## To add free text annotation
## Add a free text annotation

Tap the **Free Text Annotation** icon in the toolbar. The properties toolbar appears with options for text formatting (such as font size, color, and opacity).

Expand All @@ -75,7 +75,7 @@ Tap anywhere in the viewer to insert the free text annotation.

![Add free text in the viewer in Blazor SfPdfViewer](../images/add-free-text-viewer.png)

## To add stamp annotation
## Add a stamp annotation

Tap the **Stamp Annotation** icon, then choose a stamp from the available list.

Expand All @@ -85,7 +85,7 @@ Tap anywhere in the viewer to place the stamp. The properties toolbar then appea

![Place the selected stamp in Blazor SfPdfViewer](../images/add-selected-stamp.png)

## To add signature
## Add a signature

Tap the **Handwritten Signature** icon to open the signature dialog.

Expand All @@ -99,7 +99,7 @@ Tap anywhere in the viewer to place the signature. The properties toolbar then a

![Add the signature to the viewer in Blazor SfPdfViewer](../images/add-signature-to-viewer.png)

## To add ink annotation
## Add an ink annotation

Tap the **Ink Annotation** icon, then draw directly in the viewer.

Expand All @@ -111,25 +111,25 @@ When finished, tap the Ink Annotation icon again to exit drawing mode. The prope

## Change annotation properties before adding

Annotation properties can be configured before placement. For example, tap the rectangle shape to show its properties toolbar, adjust the settings, and then tap and drag to place the annotation. The annotation is added using the modified properties.
Annotation properties can be configured before placement. For example, tap a shape to show its properties toolbar, adjust the settings, then tap and drag to place the annotation. The annotation is added with the modified properties.

![Change properties before adding an annotation in Blazor SfPdfViewer](../images/property-change-before-adding.gif)

## Change annotation properties after adding

After placement, select the annotation to display its properties toolbar. Adjust the required properties; the changes are applied immediately to the selected annotation.
After placement, select the annotation to display its properties toolbar. Adjust required properties; the changes are applied immediately to the selected annotation.

![Change properties after adding an annotation in Blazor SfPdfViewer](../images/property-change-after-adding.gif)

## Delete Annotation
## Delete an annotation

Select the annotation to delete. In the properties toolbar, tap the Delete icon. The annotation is removed from the PDF, and any associated comment is also deleted.

![Delete the selected annotation in Blazor SfPdfViewer](../images/delete-selected-annotation.png)

## Open and Close Comment Panel
## Open and close the comments panel

Open the comments panel from the **more option** menu at the right end of the mobile primary toolbar.
Open the comments panel from the More options menu at the right end of the mobile primary toolbar.

![Open the comments panel from More options in Blazor SfPdfViewer](../images/select-comment-panel-icon.png)

Expand Down
Loading