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/datepicker/accessibility.md
+19-21Lines changed: 19 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor DatePicker Component
11
11
12
-
The web accessibility defines a way to make web content and web applications more accessible to disabled people. It especially helps the dynamic content change and advanced user interface components developed with Ajax, HTML, JavaScript, and related technologies.
12
+
Web accessibility ensures that web content and applications are usable by people with disabilities. This is especially important for dynamic content and advanced UI components built with Ajax, HTML, and JavaScript.
13
13
14
-
The [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) 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
+
The [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component follows 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/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility.
15
15
16
16
The accessibility compliance for the Blazor DatePicker component is outlined below.
17
17
@@ -20,7 +20,7 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel
@@ -40,27 +40,25 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel
40
40
41
41
## WAI-ARIA attributes
42
42
43
-
The Blazor DatePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. WAI-ARIA supports can be achieved through the attributes like `aria-expanded`, `aria-disabled`, and `aria-activedescendant` applied to the input element.
43
+
The Blazor DatePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. Compliance is achieved through ARIA attributes such as `aria-expanded`, `aria-disabled`, and `aria-activedescendant` applied to the input, toggle button, and popup elements to convey state and relationships to assistive technologies.
44
44
45
-
To learn more about the accessibility of Calendar, refer to the Calendar's[Accessibility](../calendar/accessibility) section.
45
+
To learn more about the accessibility of the Calendar component, refer to the Calendar [Accessibility](../calendar/accessibility) section.
46
46
47
-
It provides information about the widget for assistive technology to the disabled person in screen reader.
47
+
These attributes expose the component’s state and behavior to assistive technologies used by people who rely on screen readers.
48
48
49
-
***aria-expanded**: Attribute indicates the state of a collapsible element.
50
-
51
-
***aria-disabled**: Attribute indicates the disabled state of this DatePicker component.
52
-
53
-
***aria-activedescendent**: Attribute helps in managing the current active child of the DatePicker component.
49
+
***aria-expanded**: Indicates the expanded or collapsed state of the popup element.
50
+
***aria-disabled**: Indicates the disabled state of the DatePicker component.
51
+
***aria-activedescendant**: Identifies the currently active child element within the DatePicker popup.
54
52
55
53
## Keyboard interaction
56
54
57
-
You can use the following keys to interact with the Blazor DatePicker. The component implements the keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
55
+
Use the following keys to interact with the Blazor DatePicker. The component implements keyboard navigation support in line with the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
58
56
59
57
It supports the following list of shortcut keys:
60
58
61
59
### Input navigation
62
60
63
-
Before opening the pop-up, use the following list of keys to control the pop-up element:
61
+
Before opening the popup, use the following keys to control the popup element:
64
62
65
63
| Windows | Mac | Description |
66
64
| --- | --- | --- |
@@ -70,7 +68,7 @@ Before opening the pop-up, use the following list of keys to control the pop-up
70
68
71
69
### Calendar navigation
72
70
73
-
Use the following list of keys to navigate the Calendar after the pop-up has been opened:
71
+
Use the following keys to navigate the calendar after the popup has been opened:
74
72
75
73
| Windows | Mac | Description |
76
74
| --- | --- | --- |
@@ -84,13 +82,13 @@ Use the following list of keys to navigate the Calendar after the pop-up has bee
84
82
| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Focuses the same date in the next month. |
85
83
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the currently focused date. |
86
84
| <kbd>Shift</kbd> + <kbd>Page Up</kbd> | <kbd>⇧</kbd> + <kbd>Page Up</kbd> | Focuses the same date in the previous year. |
87
-
| <kbd>Shift</kbd> + <kbd>Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the previous year. |
88
-
| <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves into the inner level of view like month-year and year-decade |
89
-
| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves out from the depth level view like decade-year and year-month |
90
-
| <kbd>Control</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> | Focuses the starting date in the current year. |
85
+
| <kbd>Shift</kbd> + <kbd>Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the next year. |
86
+
| <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves to a higher-level view (month to year, year to decade).|
87
+
| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves to a lower-level view (decade to year, year to month).|
88
+
| <kbd>Ctrl</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> + <kbd>Home</kbd> | Focuses the starting date in the current year. |
91
89
| <kbd>Ctrl</kbd> + <kbd>End</kbd> | <kbd>⌘</kbd> + <kbd>End</kbd> | Focuses the ending date in the current year. |
92
90
93
-
N> To focus out the DatePicker component, use the `t`keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/datepicker/native-events) here.
91
+
N> To move focus out of the DatePicker component, press the `t`key. For details about handling native events in DatePicker, see [Native events in DatePicker](https://blazor.syncfusion.com/documentation/datepicker/native-events).
94
92
95
93
```cshtml
96
94
@using Syncfusion.Blazor.Calendars
@@ -110,9 +108,9 @@ N> To focus out the DatePicker component, use the `t` keys. For additional infor
110
108
```
111
109
## Ensuring accessibility
112
110
113
-
The Blazor DatePicker component's accessibility levels are ensured through an[axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
111
+
The Blazor DatePicker component's accessibility levels are validated using the[axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
114
112
115
-
The accessibility compliance of the DatePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datepicker) in a new window to evaluate the accessibility of the DatePicker component with accessibility tools.
113
+
The accessibility compliance of the DatePicker component is demonstrated in the following sample. Open the [DatePicker accessibility sample](https://blazor.syncfusion.com/accessibility/datepicker) in a new window to evaluate the component with accessibility tools.
title: Data Binding in Blazor DatePicker Component | Syncfusion
4
-
description: Checkout and learn here all about Data Binding in Syncfusion Blazor DatePicker component and much more.
4
+
description: Learn how to bind values to the Syncfusion Blazor DatePicker using one-way binding, two-way binding with @bind-Value, and dynamic value updates.
5
5
platform: Blazor
6
6
control: DatePicker
7
7
documentation: ug
8
8
---
9
9
10
10
# Data Binding in Blazor DatePicker Component
11
11
12
-
This section briefly explains how to bind the value to the DatePicker component in the below different ways.
12
+
This section explains how to bind values to the DatePicker component in the following ways.
13
13
14
14
* One-Way Data Binding
15
15
* Two-Way Data Binding
16
16
* Dynamic Value Binding
17
17
18
18
## One-way binding
19
19
20
-
You can bind the value to the DatePicker component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue").
20
+
Bind a value to the DatePicker component using the `Value` property as shown in the following example. In one-way binding, pass the property or variable name prefixed with `@` (for example, `@DateValue`). Changes to the source update the UI, but edits in the UI do not update the source automatically.
21
+
22
+
- API reference: [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Value)
21
23
22
24
```cshtml
23
25
@using Syncfusion.Blazor.Calendars
@@ -27,7 +29,7 @@ You can bind the value to the DatePicker component directly for `Value` property
public DateTime? DateValue {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
32
+
public DateTime? DateValue {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
31
33
32
34
public void UpdateValue()
33
35
{
@@ -36,9 +38,17 @@ You can bind the value to the DatePicker component directly for `Value` property
36
38
}
37
39
```
38
40
41
+
Preview:
42
+
- The DatePicker initially shows the 28th of the current month. Selecting the “Update Value” button sets the input to today’s date. Typing or selecting a date in the UI does not change the underlying DateValue field.
43
+
39
44
## Two-way data binding
40
45
41
-
Two-way binding can be achieved by using `bind-Value` attribute, which supports string, int, Enum, DateTime, bool types. If the component value has been changed, it will affect all places where the variable is bound for the **bind-value** attribute.
46
+
Two-way binding is achieved with the `@bind-Value` attribute. This binds the component’s value to the specified field and updates both the UI and the source when changes occur. Use a type that matches the component’s `TValue` (for example, `DateTime` or `DateTime?`). Clearing the input sets the value to `null` when using a nullable type. The `@bind-Value` syntax is shorthand for using the `Value`, `ValueChanged`, and `ValueExpression` parameters.
public DateTime? DateValue { get; set; } = DateTime.Now;
61
+
public DateTime? DateValue { get; set; } = DateTime.Now;
52
62
}
53
63
```
54
64
65
+
Preview:
66
+
- The paragraph renders the current value from the bound field. Selecting a new date in the DatePicker updates the paragraph text immediately. Clearing the input results in a blank (null) display when using a nullable type.
67
+
55
68
## Dynamic value binding
56
69
57
-
You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor DatePicker component** only. This method notifies the component that its state has changed and queues a re-render.
70
+
The value can be updated programmatically in response to component events (such as the DatePicker’s `ValueChange`) or from external logic. When updating state within component event callbacks, the UI re-renders automatically.
58
71
59
-
There is no need to call this method for native events since it’s called after any lifecycle method has been called and can also be invoked manually to trigger a re-render. Refer the below mentioned code example.
0 commit comments