You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/pager/accessibility.md
+41-26Lines changed: 41 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,24 @@
1
1
---
2
2
layout: post
3
-
title: Accessibility in Blazor Pager Component | Syncfusion
4
-
description: Checkout here and learn about accessibility in Syncfusion Blazor Pager component and much more details.
3
+
title: Accessibility Support in the Blazor Pager Component | Syncfusion
4
+
description: Learn about accessibility features and compliance in the Syncfusion Blazor Pager component, including WAI-ARIA roles and keyboard navigation.
5
5
platform: Blazor
6
6
control: Pager
7
7
documentation: ug
8
8
---
9
9
10
10
# Accessibility in Blazor Pager Component
11
11
12
-
The Blazor Pager 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.
12
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component is designed to meet widely recognized accessibility standards, ensuring compatibility with assistive technologies and delivering an inclusive experience. It adheres to the following guidelines:
13
13
14
-
The accessibility compliance for the Blazor Pager component is outlined below.
14
+
-[ADA](https://www.ada.gov/) – Americans with Disabilities Act compliance for accessible digital content.
15
+
-[Section 508](https://www.section508.gov/) – U.S. federal accessibility requirements for software applications.
16
+
-[WCAG 2.2](https://www.w3.org/TR/WCAG22/) – Web Content Accessibility Guidelines for perceivable, operable, and understandable content.
17
+
-[WAI-ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) – Accessible Rich Internet Applications specifications for improved interaction with assistive technologies.
18
+
19
+
## Accessibility Compliance
20
+
21
+
The table below lists the accessibility features supported by the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component:
15
22
16
23
| Accessibility Criteria | Compatibility |
17
24
| -- | -- |
@@ -31,42 +38,50 @@ The accessibility compliance for the Blazor Pager component is outlined below.
31
38
}
32
39
</style>
33
40
34
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
41
+
**Legend:**
42
+
43
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - Fully meets the requirement.</div>
35
44
36
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
45
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Partially meets the requirement.</div>
37
46
38
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
47
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - Does not meet the requirement.</div>
39
48
40
49
## WAI-ARIA
41
50
42
-
The Blazor Pager component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Pager component:
51
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component applies Accessible Rich Internet Applications ([WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/)) roles and attributes to improve interoperability with assistive technologies.
52
+
53
+
|**Element**|**Purpose**|**Applied Role / Attribute**|
| Pager root container | Identifies the region as page navigation |`role="navigation"`|
56
+
| Pager wrapper | Groups the collection of page selectors |`role="pager"`|
57
+
| Page selector | Represents an interactive control for page selection |`role="button"`|
58
+
| Navigation region | Provides an accessible name for the navigation area |`aria-label="<descriptive text>"`|
43
59
44
-
* pager (role)
45
-
* button (role)
46
-
* navigation(role)
47
-
* aria-label (Attribute)
48
60
49
61
## Keyboard navigation
50
62
51
-
The Blazor Pager 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 Blazor Pager component.
63
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component supports keyboard interactions to ensure accessibility for individuals relying on assistive technologies or keyboard navigation. The available shortcuts are:
| <kbd>Page Down</kbd> / <kbd>→</kbd> | <kbd>Page Down</kbd> / <kbd>→</kbd> | Navigate to the next page |
68
+
| <kbd>Page Up</kbd> / <kbd>←</kbd> | <kbd>Page Up</kbd> / <kbd>←</kbd> | Navigate to the previous page |
69
+
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Select the currently focused page |
70
+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Move focus to the next pager item |
71
+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus to the previous pager item |
72
+
| <kbd>Home</kbd> | <kbd>Home</kbd> | Navigate to the first page |
73
+
| <kbd>End</kbd> | <kbd>End</kbd> | Navigate to the last page |
74
+
| <kbd>Alt</kbd> + <kbd>Page Up</kbd> | <kbd>⌥</kbd> + <kbd>Page Up</kbd> | Navigate to the previous pager group |
75
+
| <kbd>Alt</kbd> + <kbd>Page Down</kbd>| <kbd>⌥</kbd> + <kbd>Page Down</kbd> | Navigate to the next pager group |
52
76
53
-
|Windows | Mac |Description|
54
-
|-----|-----| --- |
55
-
|<kbd>Page down</kbd> / <kbd>→</kbd> | <kbd>Page down</kbd> / <kbd>→</kbd> |Navigates to the next page.|
56
-
|<kbd>Page up</kbd> / <kbd>←</kbd> | <kbd>Page up</kbd> / <kbd>←</kbd> | Navigates to the previous page.|
57
-
|<kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Select the currently focused page.|
58
-
|<kbd>Tab</kbd> | <kbd>Tab</kbd> | Focus on the next pager item.|
59
-
|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focus on the previous pager item.|
60
-
|<kbd>Home</kbd> | <kbd>Home</kbd> | Navigates to the first page.|
61
-
|<kbd>End</kbd> | <kbd>End</kbd> | Navigates to the last page.|
62
-
|<kbd>Alt</kbd> + <kbd>Page up</kbd> | <kbd>⌥</kbd> + <kbd>Page up</kbd> | Navigates to the previous pager.|
63
-
|<kbd>Alt</kbd> + <kbd>Page down</kbd> | <kbd>⌥</kbd> + <kbd>Page down</kbd> | Navigates to the next pager.|
64
77
65
78
## Ensuring accessibility
66
79
67
-
The Blazor Pager component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
80
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component’s accessibility compliance is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) integrated with Playwright tests. This automated testing ensures adherence to accessibility standards and identifies potential issues.
81
+
82
+
An interactive sample is available to evaluate the component’s accessibility using standard tools:
68
83
69
-
The accessibility compliance of the Blazor Pager component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/pager) in a new window to evaluate the accessibility of the Blazor Pager component with accessibility tools.
Copy file name to clipboardExpand all lines: blazor/pager/behavior-settings.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,9 +7,9 @@ control: Pager
7
7
documentation: ug
8
8
---
9
9
10
-
# Behaviour Settings in Pager Component
10
+
# Behavior Settings in Pager Component
11
11
12
-
This section briefly explains how the Pager APIS are helped to render the elements (numeric items and navigation buttons) of the Pager component. The total pages of the Pager component is calculated based on the defined [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) and [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount) property.
12
+
This section briefly explains how the Pager API's are helped to render the elements (numeric items and navigation buttons) of the Pager component. The total pages of the Pager component is calculated based on the defined [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) and [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount) property.
13
13
14
14
## Page size
15
15
@@ -61,7 +61,7 @@ Blazor Pager component support to define which page to be displayed currently in
61
61
62
62
## Show pager message
63
63
64
-
ThePagercomponentprovidesanoptiontoshoworhidethePagerinformationinthePagercontainer. Thiscanbeachievedbyusingthe [ShowPagerMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ShowPagerMessage) property. The default value of the `ShowPagerMessage` is "true". If you set the `ShowPagerMessage` to false, then the Pager information will be hidden.
64
+
ThePagercomponentprovidesanoptiontoshoworhidethePagerinformationinthePagercontainer. Thiscanbeachievedbyusingthe [ShowPagerMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ShowPagerMessage) property. The default value of the `ShowPagerMessage` is **true**. Setting `ShowPagerMessage` to **false** hides the Pager information.
Copy file name to clipboardExpand all lines: blazor/pager/customization.md
+10-7Lines changed: 10 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,34 +1,37 @@
1
1
---
2
2
layout: post
3
3
title: Customization in Blazor Pager Component | Syncfusion
4
-
description: Checkout here and learn about how to customize the elements of Syncfusion Blazor Pager componentand much more.
4
+
description: Learn how to customize the Syncfusion Blazor Pager component, including custom text and styling options.
5
5
platform: Blazor
6
6
control: Pager
7
7
documentation: ug
8
8
---
9
9
10
10
# Customization in Pager Component
11
11
12
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component provides options to customize its appearance and behavior. Customization can include modifying numeric item text and applying custom styles through CSS classes.
13
+
12
14
## Custom text for numeric items
13
15
14
-
The Pager component provides an option to define custom text and it is added as a prefix for numeric items. This can be achieved by using the [NumericItemPrefix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemPrefix) property.
16
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component allows adding a custom prefix to numeric itemsusing the [NumericItemPrefix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemPrefix) property. This property accepts a string value that appears before each numeric item in the pager.
TomodifythePager's appearance, you need to override the default CSS of the Pager. This can be achieved by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_CssClass) property.
32
+
## Apply custom CSS
30
33
31
-
Inthefollowingsample, thevalueforthe `CssClass` property is set as custom CSS, and this root class is used to customize the Pager appearance.
34
+
TheSyncfusion<supstyle="font-size:70%">®</sup>BlazorPagercomponentsupportscustomizingitsappearancebyapplyingcustomCSSclasses. Thiscustomizationisenabledthroughthe[CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_CssClass) property. Assign a class name to this property and define the required styles in the CSS file.
Copy file name to clipboardExpand all lines: blazor/pager/data-binding.md
+12-9Lines changed: 12 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,24 @@
1
1
---
2
2
layout: post
3
3
title: Data Binding in Blazor Pager Component | Syncfusion
4
-
description: Checkout and learn here all about working Syncfusion Blazor Pager component with both local or remote data collection and how it splits into sectioned pages.
4
+
description: Learn how the Syncfusion Blazor Pager component segments local or remote data collections into paged views.
5
5
platform: Blazor
6
6
control: Pager
7
7
documentation: ug
8
8
---
9
9
10
10
# Data Binding in Blazor Pager Component
11
11
12
-
## Local Data
12
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component divides **local** or **remote** data collections into paged views. It provides navigation controls to manage large datasets efficiently.
13
13
14
-
The Blazor Pager component has an option to split the collection of data sets (local data) into sectioned pages.
14
+
**When to Use:**
15
15
16
-
In the following sample, initially list view items are displayed per page based on the Pager's PageSize property. While navigating the numeric items in the Pager, the `ItemClick` event will be triggered. In the `ItemClick` event of the Pager, we have calculated the number of items displayed per page in the ListView component. Here, items in the ListView component are loaded from local data collection.
16
+
- Use **Local Data** for **small**, **static** collections that can be loaded in memory.
17
+
- Use **Remote Data** for **large** or **dynamic** datasets that require server-side operations.
18
+
19
+
## Local Data Binding
20
+
21
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component can segment an in-memory data collection into multiple pages. The [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property defines the number of items displayed per page. The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event updates the displayed subset when navigating between pages.
17
22
18
23
```csharp
19
24
@usingSyncfusion.Blazor.Data
@@ -82,7 +87,7 @@ In the following sample, initially list view items are displayed per page based
82
87
83
88
<style>
84
89
.listview-container {
85
-
margin:0auto2em;
90
+
margin:0auto2em;
86
91
max-width:460px;
87
92
}
88
93
.pager-container {
@@ -92,11 +97,9 @@ In the following sample, initially list view items are displayed per page based
TheSyncfusion<supstyle="font-size:70%">®</sup> Blazor Pager component supports paging for data retrieved from remote services. The [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component manages remote operations such as **querying**, **filtering**, and **paging**. The [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property specifies the number of items displayed per page. The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event updates query parameters to fetch the correct subset of data.
0 commit comments