Skip to content

Commit 666bb83

Browse files
Merge pull request #6884 from syncfusion-content/BLAZ-983104-ugtimepicker
Updated UG documentation for the Timepicker
2 parents b059d6e + 10f3dd8 commit 666bb83

37 files changed

+355
-375
lines changed

blazor/timepicker/accessibility.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,38 @@ documentation: ug
99

1010
# Accessibility in Blazor TimePicker Component
1111

12-
The web accessibility makes web applications and its content more accessible to people with disabilities without any barriers. It especially tracks the dynamic value changes and DOM changes.
12+
Web accessibility ensures that applications and their content are usable by people with disabilities. It includes support for dynamic value updates and DOM changes that assistive technologies can detect.
1313

14-
The [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) 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 TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) follows widely recognized accessibility standards and guidelines, including the Americans with Disabilities Act[ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
1515

16-
The accessibility compliance for the Blazor TimePicker component is outlined below.
16+
The accessibility compliance for the Blazor TimePicker is outlined below.
1717

1818
| Accessibility Criteria | Compatibility |
1919
| -- | -- |
20-
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
21-
| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22-
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
23-
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
24-
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
25-
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
26-
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
27-
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
20+
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
21+
| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
22+
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
23+
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
24+
| [Color Contrast](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
25+
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
26+
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
27+
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
2828

2929
<style>
3030
.post .post-content img {
3131
display: inline-block;
3232
margin: 0.5em 0;
3333
}
3434
</style>
35-
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
35+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> - All features of the component meet the requirement.</div>
3636

37-
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
37+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
3838

39-
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
39+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Does not meet requirement"> - The component does not meet the requirement.</div>
4040

4141
## WAI-ARIA attributes
4242

43-
The Blazor TimePicker component has covered the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications with the following list of WAI-ARIA attributes: `aria-haspopup`, `aria-selected`, `aria-disabled`, `aria-activedescendant`, `aria-expanded`, `aria-owns`, and `aria-autocomplete`.
43+
The Blazor TimePicker aligns with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) practices. The input is presented with a `role="combobox"` and the popup list with a `role="listbox"`. Depending on configuration, the component may include the following ARIA attributes: `aria-haspopup`, `aria-selected`, `aria-disabled`, `aria-activedescendant`, `aria-expanded`, `aria-owns`, and `aria-autocomplete`.
4444

4545
In the TimePicker, the `combobox` plays the role of input element, and the `listbox` plays the role of popup element.
4646

@@ -62,26 +62,26 @@ In the TimePicker, the `combobox` plays the role of input element, and the `list
6262

6363
## Keyboard interaction
6464

65-
Keyboard accessibility is one of the most important aspects of web accessibility. Disabled people like blind and those who have motor disabilities or birth defects use keyboard shortcuts more than the mouse.
65+
Keyboard accessibility enables efficient interaction without a mouse and is essential for users who rely on keyboards or assistive technologies.
6666

67-
The Blazor TimePicker component has built-in keyboard accessibility support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
67+
The Blazor TimePicker includes built-in keyboard support following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
6868

69-
N> It supports the following list of shortcut keys to interact with the TimePicker component:
69+
N> It supports the following shortcut keys to interact with the TimePicker:
7070

7171
| Windows | Mac | **Description** |
7272
| --- | --- | --- |
7373
| <kbd>↑</kbd> | <kbd>↑</kbd> | Navigates and selects the previous item. |
7474
| <kbd>↓</kbd> | <kbd>↓</kbd> | Navigates and selects the next item. |
75-
| <kbd>←</kbd> | <kbd>←</kbd> | Moves the cursor towards arrow key pressed direction. |
76-
| <kbd>→</kbd> | <kbd>→</kbd> | Moves the cursor towards arrow key pressed direction. |
75+
| <kbd>←</kbd> | <kbd>←</kbd> | Moves the cursor in the direction of the arrow key pressed. |
76+
| <kbd>→</kbd> | <kbd>→</kbd> | Moves the cursor in the direction of the arrow key pressed. |
7777
| <kbd>Home</kbd> | <kbd>Home</kbd> | Navigates and selects the first item. |
7878
| <kbd>End</kbd> | <kbd>End</kbd> | Navigates and selects the last item. |
79-
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the currently focused item and close the popup. |
79+
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the currently focused item and closes the popup. |
8080
| <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup. |
8181
| <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup. |
8282
| <kbd>Esc</kbd> | <kbd>Esc</kbd> | Closes the popup. |
8383

84-
N> To focusout the TimePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/timepicker/native-events) here.
84+
N> To move focus out of the TimePicker, press the `t` key. For additional information about handling native events, see the [native events documentation](https://blazor.syncfusion.com/documentation/timepicker/native-events).
8585

8686
```cshtml
8787
@using Syncfusion.Blazor.Calendars
@@ -102,9 +102,9 @@ N> To focusout the TimePicker component, use the `t` keys. For additional inform
102102

103103
## Ensuring accessibility
104104

105-
The Blazor TimePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
105+
The Blazor TimePickers accessibility is validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
106106

107-
The accessibility compliance of the TimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/timepicker) in a new window to evaluate the accessibility of the TimePicker component with accessibility tools.
107+
The accessibility compliance of the TimePicker is demonstrated in the following sample. Open the [TimePicker accessibility sample](https://blazor.syncfusion.com/accessibility/timepicker) in a new window to evaluate the component with accessibility tools.
108108

109109
## See also
110110

blazor/timepicker/data-binding.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Data Binding in Blazor TimePicker Component
1111

12-
This section briefly explains how to bind the value to the TimePicker component in the below different ways.
12+
This section explains how to bind a value to the TimePicker component in the following ways.
1313

1414
* One-Way Data Binding
1515
* Two-Way Data Binding
@@ -38,7 +38,7 @@ We can bind the value to the TimePicker component directly for `Value` property
3838

3939
## Two-Way Data Binding
4040

41-
Two-way binding can be achieved by using `bind-Value` attribute and its support string, int, Enum, DateTime, bool types. If component value has been changed, it will affect all the places where we bind the variable for the **bind-value** attribute.
41+
Two-way binding is achieved using the `bind-Value` attribute and its support string, int, Enum, DateTime, bool types. If component value has been changed, it will affect all the places where we bind the variable for the **bind-value** attribute.
4242

4343
```cshtml
4444
@using Syncfusion.Blazor.Calendars

blazor/timepicker/events.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Events in Blazor TimePicker Component
1111

12-
This section explains the list of events of the TimePicker component which will be triggered for appropriate TimePicker actions.
12+
This section describes the TimePicker events that are raised for user and programmatic interactions. The following table maps legacy event names to current event names.
1313

1414
| Event Name(`v17.1.*`) |Event Name(`v17.2.*`) |
1515
| ----- | ----- |
@@ -20,7 +20,7 @@ This section explains the list of events of the TimePicker component which will
2020

2121
## Blur
2222

23-
`Blur` event triggers when the input loses the focus.
23+
The `Blur` event triggered when the input loses the focus.
2424

2525
```cshtml
2626
@using Syncfusion.Blazor.Calendars
@@ -40,7 +40,7 @@ This section explains the list of events of the TimePicker component which will
4040

4141
## ValueChange
4242

43-
`ValueChange` event triggers when the Calendar value is changed.
43+
The `ValueChange` event triggered when the Calendar value is changed.
4444

4545
```cshtml
4646
@using Syncfusion.Blazor.Calendars
@@ -60,7 +60,7 @@ This section explains the list of events of the TimePicker component which will
6060

6161
## OnClose
6262

63-
`OnClose` event triggers when popup is closed.
63+
The `OnClose` event triggered when the popup is closed.
6464

6565
```cshtml
6666
@using Syncfusion.Blazor.Calendars
@@ -80,7 +80,7 @@ This section explains the list of events of the TimePicker component which will
8080

8181
## Created
8282

83-
`Created` event triggers when the component is created.
83+
The `Created` event triggered when the component is created.
8484

8585
```cshtml
8686
@using Syncfusion.Blazor.Calendars
@@ -100,7 +100,7 @@ This section explains the list of events of the TimePicker component which will
100100

101101
## Destroyed
102102

103-
`Destroyed` event triggers when the component is destroyed.
103+
The `Destroyed` event triggered when the component is destroyed.
104104

105105
```cshtml
106106
@using Syncfusion.Blazor.Calendars
@@ -119,7 +119,7 @@ This section explains the list of events of the TimePicker component which will
119119

120120
## Focus
121121

122-
`Focus` event triggers when the input gets focus.
122+
The `Focus` event triggered when the input gets focus.
123123

124124
```cshtml
125125
@using Syncfusion.Blazor.Calendars
@@ -140,7 +140,7 @@ This section explains the list of events of the TimePicker component which will
140140

141141
## OnItemRender
142142

143-
`OnItemRender` event triggers while rendering the each popup list item.
143+
The `OnItemRender` event triggered while rendering the each popup list item.
144144

145145
```cshtml
146146
@using Syncfusion.Blazor.Calendars
@@ -159,7 +159,7 @@ This section explains the list of events of the TimePicker component which will
159159

160160
## OnOpen
161161

162-
`OnOpen` event triggers when the popup is opened.
162+
The `OnOpen` event triggered when the popup is opened.
163163

164164
```cshtml
165165
@using Syncfusion.Blazor.Calendars
@@ -177,4 +177,4 @@ This section explains the list of events of the TimePicker component which will
177177
}
178178
```
179179

180-
N> TimePicker will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
180+
N> The TimePicker currently exposes the events listed above. Additional events may be introduced based on user feedback. If an event needed for a scenario is not available, submit a request in the [Syncfusion Blazor feedback portal](https://www.syncfusion.com/feedback/blazor-components).

0 commit comments

Comments
 (0)