Merge pull request #6908 from syncfusion-content/BLAZ-983104-otp-input

Updated the UG Documentation for otpinput

Author: UdhayaKumarDuraisamy

blazor/otp-input/accessibility.md

@@ -9,40 +9,40 @@ documentation: ug
 
 # Accessibility in Blazor OTP Input component
 
-The Blazor OTP Input 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.
+The Blazor OTP Input component follows established 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 [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor OTP Input component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
 
 <style>
     .post .post-content img {
         display: inline-block;
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Partially supported"> - Some features of the component do not fully meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
 The following ARIA attributes are used in the OTP Input component:
 
 | Attributes | Purpose |
 | ------------ | ----------------------- |
-| `role=group` | Attributes used to form a collection of items.|
-| `aria-label` | Attributes provides the text label for the OTP Inputs. |
+| `role=group` | Applied to the container to group the OTP input fields. |
+| `aria-label` | Provides a text label for the OTP input fields for assistive technologies. |
 
 ## Keyboard interaction
 
@@ -51,7 +51,7 @@ The following keyboard shortcuts are supported by the OTP Input component.
 | Windows | Mac | Actions |
 | --- | --- | --- |
 | <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous input in the OTP. |
-| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next input in OTP |
+| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next input in the OTP. |
 | <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the initial focus and shifts focus to the next input of the OTP. |
 | <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous input of the OTP. |
 
@@ -61,7 +61,7 @@ The following keyboard shortcuts are supported by the OTP Input component.
 
 ## HtmlAttributes
 
-HtmlAttributes allow you to specify additional HTML attributes to be applied to the OTP input component.
+HtmlAttributes allow specifying additional HTML attributes to be applied to the OTP input component for improved semantics and accessibility.
 
 You can pass HTML attributes as key-value pairs to the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_HtmlAttributes) property.
 
@@ -82,8 +82,9 @@ You can pass HTML attributes as key-value pairs to the [HtmlAttributes](https://
 
 ## AriaLabels
 
-AriaLabels define the ARIA-label attribute for each input field in the OTP input component. ARIA-labels enhance accessibility by providing descriptive labels for screen reader users, improving the user experience for individuals with disabilities.
-You can provide an array of strings as ARIA-labels to the [AriaLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_AriaLabels) property. Each string corresponds to the ARIA-label attribute for the respective input field in the OTP input component.
+AriaLabels define the aria-label attribute for each input field in the OTP input component. aria-label values enhance accessibility by providing descriptive labels for screen reader users.
+
+You can provide an array of strings as aria-label values to the [AriaLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_AriaLabels) property. Each string corresponds to the aria-label attribute for the respective input field in the OTP input component.
 
 ```cshtml
 

blazor/otp-input/appearance.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Appearance in Blazor OTP Input component
 
-You can also customize the appearance of OTP Input component.
+Customize the appearance of the OTP input component, including input length, disabled state, and visual styles.
 
 ## Setting input length
 
-You can specify the length of OTP by using the [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Length) property. The default value is `4`.
+Specify the length of the OTP by using the [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Length) property. The default value is `4`. This value determines the number of input fields rendered for the OTP.
 
 ```cshtml
 
@@ -27,7 +27,7 @@ You can specify the length of OTP by using the [Length](https://help.syncfusion.
 
 ## Disable inputs
 
-You can disable the OTP Input component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Disabled) property. By default the value is `false`.
+Disable the OTP Input component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Disabled) property. By default, the value is `false`. When disabled, the input fields are non-interactive and display the disabled visual style.
 
 ```cshtml
 
@@ -41,9 +41,9 @@ You can disable the OTP Input component by using the [Disabled](https://help.syn
 
 ## CssClass
 
-You can customize the appearance of the OTP Input component, such as by changing its colors, fonts, sizes or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass) property.
+Customize the appearance of the OTP Input component by changing colors, fonts, sizes, and other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass) property.
 
-The OTP input component supports the following predefined styles that can be defined using the `CssClass` property. You can customize by replacing the `CssClass` property with the below defined class names.
+The OTP input component supports the following predefined styles that can be applied using the `CssClass` property. Replace the `CssClass` value with one of the following class names to apply the corresponding style.
 
 | cssClass | Description |
 | -------- | -------- |
@@ -59,4 +59,4 @@ The OTP input component supports the following predefined styles that can be def
 
 ```
 
-![Blazor OTP Input Component with CssClass](images/blazor-otp-success.png)
+![Blazor OTP Input Component with CssClass](images/blazor-otp-success.png)

blazor/otp-input/events.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor OTP Input component
 
-This section describes the OTP Input events that will be triggered when appropriate actions are performed. The following events are available in the OTP Input component.
+This section describes the OTP Input events triggered by user interaction and component lifecycle. The following events are available in the OTP Input component.
 
 ## Created
 
-The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Created) event when the component rendering is completed.
+The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Created) event when component rendering is completed.
 
 ```cshtml
 
@@ -30,9 +30,9 @@ The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/bl
 
 ```
 
-## OnFocus 
+## OnFocus
 
-The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnFocus) event when the OTP Input is focused. The [OtpFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusInEventArgs.html) passed as an event argument provides the details of the focus event.
+The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnFocus) event when an OTP input field receives focus. The [OtpFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusInEventArgs.html) event argument provides details about the focus-in action, such as the focused input.
 
 ```cshtml
 
@@ -51,7 +51,7 @@ The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/bl
 
 ## OnBlur
 
-The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnBlur) event when the OTP Input is focused out. The [OtpFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusOutEventArgs.html) passed as an event argument provides the details of the blur event.
+The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnBlur) event when focus leaves an OTP input field or the component. The [OtpFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusOutEventArgs.html) event argument provides details about the blur action, such as the input that lost focus.
 
 ```cshtml
 
@@ -70,7 +70,7 @@ The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/bla
 
 ## OnInput
 
-The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnInput) event when the value of each OTP Input is changed. The [OtpInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputEventArgs.html) passed as an event argument provides the details of the each value is changed.
+The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnInput) event when the value of an individual OTP input field changes. The [OtpInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputEventArgs.html) event argument provides details about the change, such as the input index and the current value.
 
 ```cshtml
 
@@ -85,4 +85,4 @@ The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/bl
     }
 }
 
-```
+```