Skip to content

Commit 163a292

Browse files
Merge pull request #6914 from syncfusion-content/BLAZ-983104-input-mask
Updated the UG Documentation for input mask
2 parents 1b1c5b6 + 869357f commit 163a292

10 files changed

+113
-122
lines changed

blazor/input-mask/accessibility.md

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,41 +15,42 @@ The accessibility compliance for the Blazor MaskedTextBox component is outlined
1515

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

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

35-
<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>
35+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially supported"> - Some features of the component do not meet the requirement.</div>
3636

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

3939
## WAI-ARIA attributes
4040

41-
The Blazor MaskedTextBox is characterized with complete ARIA Accessibility support that helps to access using on-screen readers and other assistive technology devices. This component is designed with the reference of the guidelines document given in [WAI ARAI Accessibility practices](https://www.w3.org/WAI/ARIA/apg/).
41+
The Blazor MaskedTextBox includes comprehensive WAI-ARIA support to ensure compatibility with screen readers and other assistive technologies. This component is designed with reference to the WAI-ARIA Authoring Practices.
4242

43-
The MaskedTextBox uses the `textbox` role and following ARIA properties for its element based on its state.
43+
The MaskedTextBox uses the textbox role and the following ARIA properties, based on state and configuration:
4444

4545
| **Property** | **Functionality** |
4646
| --- | --- |
47-
| aria-live | Indicates the priority of updates to a live region. |
48-
| aria-disabled | Indicates the disabled state of the MaskedTextBox. |
49-
| aria-valuenow | Specifies the current value of the MaskedTextBox. |
50-
| aria-invalid | Indicates that the user input is incorrect or not within the acceptable ranges. |
51-
| aria-placeholder | It is a short hint to help the users with data entry when the MaskedTextBox has no value. |
52-
| aria-labelledby | Indicates the floating label element of the MaskedTextBox. |
47+
| aria-label / aria-labelledby | Provides an accessible name for the MaskedTextBox. |
48+
| aria-describedby | Associates helper or error text with the MaskedTextBox for screen reader announcement. |
49+
| aria-invalid | Indicates that the current value fails validation. |
50+
| aria-required | Indicates that input is required. |
51+
| aria-disabled | Indicates that the MaskedTextBox is disabled. |
52+
| aria-readonly | Indicates that the value cannot be changed by the user. |
53+
| aria-multiline | Indicates whether the textbox supports multiple lines (typically false for MaskedTextBox). |
5354

5455
## Ensuring accessibility
5556

blazor/input-mask/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 Input Mask Component
1111

12-
Data binding can be achieved by using the `bind-Value` attribute and it supports string type. If the component value is changed, it will affect all the places where you bind the variable for the **bind-Value** attribute.
12+
Use the @bind-Value attribute to enable two-way data binding with the MaskedTextBox. The Value parameter is of type string. When the user edits the input, the bound field is updated; when the bound field changes in code, the component reflects the new value. For reference, see SfMaskedTextBox, Value, and Mask in the API, and the Blazor data binding guidance.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Inputs
@@ -25,7 +25,7 @@ Data binding can be achieved by using the `bind-Value` attribute and it supports
2525

2626
## Dynamic value binding
2727

28-
You can bind the value to the MaskedTextBox component dynamically for `bind-Value` attribute as mentioned in the following code.
28+
The value can also be updated programmatically at runtime. Updating the bound field triggers the component to display the new value, as shown in the following example.
2929

3030
```cshtml
3131
@using Syncfusion.Blazor.Inputs

blazor/input-mask/events.md

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

1010
# Events in Blazor Input Mask Component
1111

12-
This section explains the list of events of the Input Mask component which will be triggered for appropriate Input Mask actions.
12+
This section lists the events available in the Blazor Input Mask (MaskedTextBox) component and when they are raised. Use these events to react to focus changes, value updates, and lifecycle moments. For reference, see the SfMaskedTextBox API.
1313

1414
## Blur
1515

16-
`Blur` event triggers when the Input Mask component has focus-out.
16+
`Blur` is raised when the component loses focus. See Blur event and MaskBlurEventArgs in the API for details.
1717

1818
```cshtml
1919
@using Syncfusion.Blazor.Inputs
@@ -30,7 +30,7 @@ This section explains the list of events of the Input Mask component which will
3030

3131
## Created
3232

33-
`Created` event triggers when the Input Mask component is created.
33+
`Created` is raised after the component has been initialized and rendered for the first time.
3434

3535
```cshtml
3636
@using Syncfusion.Blazor.Inputs
@@ -47,7 +47,7 @@ This section explains the list of events of the Input Mask component which will
4747

4848
## Destroyed
4949

50-
`Destroyed` event triggers when the Input Mask component is destroyed.
50+
`Destroyed` is raised when the component is disposed.
5151

5252
```cshtml
5353
@using Syncfusion.Blazor.Inputs
@@ -64,7 +64,7 @@ This section explains the list of events of the Input Mask component which will
6464

6565
## Focus
6666

67-
`Focus` event triggers when the Input Mask gets focus.
67+
`Focus` is raised when the component receives focus. See Focus event and MaskFocusEventArgs in the API.
6868

6969
```cshtml
7070
@using Syncfusion.Blazor.Inputs
@@ -81,7 +81,7 @@ This section explains the list of events of the Input Mask component which will
8181

8282
## ValueChange
8383

84-
`ValueChange` event triggers when the content of Input Mask has changed and gets focus-out.
84+
`ValueChange` is raised when the input value changes and the component then loses focus (or commits the change). This is typically used to react to completed edits; for two-way binding, see `ValueChanged`.
8585

8686
```cshtml
8787
@using Syncfusion.Blazor.Inputs
@@ -98,8 +98,7 @@ This section explains the list of events of the Input Mask component which will
9898

9999
## ValueChanged
100100

101-
`ValueChanged` event Specifies the callback to trigger when the value changes.
102-
101+
`ValueChanged` is raised whenever the value changes.
103102
```cshtml
104103
@using Syncfusion.Blazor.Inputs
105104
@@ -113,4 +112,4 @@ This section explains the list of events of the Input Mask component which will
113112
}
114113
```
115114

116-
N> Input Mask is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
115+
N> Input Mask currently includes these events. Additional events may be added based on user requests. If a required event is not listed, submit a feature request in the Syncfusion Blazor feedback portal: https://www.syncfusion.com/feedback/blazor-components

0 commit comments

Comments
 (0)