Skip to content

Commit afc05d9

Browse files
P1l3T0P1l3T0
authored
docs(otpinput): add documentation (#697)
1 parent 5f23460 commit afc05d9

23 files changed

+1073
-187
lines changed

‎controls/badge/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ position: 0
99
CTAControlName: WebForms Badge
1010
---
1111

12-
# Badge Overview
12+
# WebForms Badge Overview
1313

1414
The Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when the visual notification is needed.
1515
It also provides customizing its content through templates, setting different shapes and layouts.

‎controls/otpinput/accessibility-and-internationalization/keyboard-navigation.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: OTPInput Keyboard Navigation
4+
description: "Get started with the WebForms OTPInput and learn about the accessibility support it provides through its keyboard navigation functionality"
5+
slug: otpinput/accessibility/keyobard-navigation
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the OTPInput is always available, and the control supports the following keyboard shortcuts:
12+
13+
| SHORTCUT | DESCRIPTION |
14+
| :------------------ | :-------------------------------------------------------------------------------- |
15+
| `Tab` | Focuses the next input in the component. |
16+
| `Shift`+`Tab` | Focuses the previous input in the component. |
17+
| `Up/Down Arrows` | Navigates to the next/previous item when a panel is focused. |
18+
| `Right/Left Arrows` | Highlights the next/previous focusable input in the component. |
19+
| `Backspace` | Deletes the value of the focused input and moves the focus on the previous input. |
20+
| `Delete` | Deletes the value of the focused input. |
21+
22+
For a complete example, refer to the [OTPInput Keyboard Navigation demo](https://demos.telerik.com/aspnet-ajax/otpinput/accessibility-and-internationalization/keyboardsupport/defaultcs.aspx).

‎controls/otpinput/accessibility-and-internationalization/overview.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: Overview
3+
page_title: OTPInput Accessibility
4+
description: Get started with the WebForms OTPInput and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2.
5+
slug: otpinput/accessibility/overview
6+
position: 1
7+
---
8+
9+
# OTPInput Accessibility
10+
11+
The OTPInput is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. For more information, refer to [Accessibility](https://www.telerik.com/kendo-jquery-ui/documentation/accessibility/accessibility-overview).
12+
13+
Out of the box, the WebForms OTPInput provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
14+
15+
The OTPInput is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
16+
17+
## WAI-ARIA
18+
19+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any. No role attribute is implemented as the `html input type="text"` element is sufficient for defining the purpose of the component.
20+
21+
| Selector | Attribute | Usage |
22+
| ------------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
23+
| `.k-otp` | `role=group` | Sets the proper role for the OTP. |
24+
| `.k-otp > input` | `type=hidden` | The hidden input holding the OTP inputs value. |
25+
| | `aria-hidden=true` | Hides the hidden input from assistive technologies. |
26+
| `.k-otp-input .k-input-inner` | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
27+
| | `aria-required=true` | The attribute is rendered only when the OTP is in a `form` HTML element and announces the required state of the component. |
28+
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
29+
| | `autocomplete=off` | Sets the default autocomplete for the input. |
30+
| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | The attribute is rendered only when the OTP is in a form and announces the valid state of the component. |
31+
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the OTP is disabled. |
32+
33+
## Resources
34+
35+
[WAI-ARIA Specification for the TextBox](https://www.w3.org/TR/wai-aria-1.2/#textbox)
36+
37+
## Section 508
38+
39+
The OTP is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
40+
41+
## Testing
42+
43+
The OTP has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
44+
45+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
46+
47+
### Screen Readers
48+
49+
The OTP has been tested with the following screen readers and browsers combinations:
50+
51+
| Environment | Tool |
52+
| -------------- | ---- |
53+
| Firefox | NVDA |
54+
| Chrome | JAWS |
55+
| Microsoft Edge | JAWS |
56+
57+
### Automated Testing
58+
59+
The OTPInput has been tested with [axe-core](https://github.com/dequelabs/axe-core).
60+
61+
### Test Example
62+
63+
A live test example of the OTPInput component could be found in the following [OTPInput Example page](https://demos.telerik.com/kendo-ui/accessibility/otpinput).

‎controls/otpinput/adaptiveness.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Adaptviness
3+
page_title: Separator
4+
description: Learn how to configure the input mode of the WebForms OTPInput component.
5+
slug: otpinput/adaptiveness
6+
tags: otpinput,adaptiveness
7+
published: True
8+
position: 4
9+
---
10+
11+
# Adaptiveness
12+
13+
The WebForms OTPInput does not require specific adaptive rendering but enables you to configure a suitable input-specific keyboard that appears on touchscreen devices upon interaction.
14+
15+
## On-Screen Keyboard
16+
17+
To enhance the mobile user experience of your application, you can configure the type of the on-screen keyboard for the OTPInput component.
18+
19+
To configure an on-screen keyboard for the OTPInput, use the `InputMode` property to a supported value. Based on the defined setting, the browser will display the most appropriate virtual keyboard on the screen.
20+
21+
The following example demonstrates how to configure an on-screen keyboard for the OTPInput.
22+
23+
````ASP.NET
24+
<telerik:RadOTPInput ID="RadOTPInput1" runat="server" InputMode="Numeric">
25+
<ItemsCollection>
26+
<telerik:OTPInputItem GroupLength="3" />
27+
</ItemsCollection>
28+
</telerik:RadOTPInput>
29+
````
30+
31+
## Next Steps
32+
33+
- [Accessibility]({% slug otpinput/accessibility/overview%})
34+
- [Client-side Programming]({%slug otpinput/client-side-programming/overview%})
35+
- [Server-side Programming]({%slug otpinput/server-side-programming/overview%})

‎controls/otpinput/appearance.md

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
---
2+
title: Appearance
3+
page_title: OTPInput Appearance
4+
description: "Learn how to apply different styling options to the OTPInput control."
5+
slug: otpinput/appearance
6+
tags: otpInput,appearance
7+
published: True
8+
position: 2
9+
---
10+
11+
# Appearance
12+
13+
In this article, you will find information about the styling options and rendering of the WebForms OTPInput.
14+
15+
For a live example, visit the [Appearance Demo of the OTPInput](https://demos.telerik.com/aspnet-ajax/otpinput/appearance/defaultcs.aspx).
16+
17+
## Options
18+
19+
The WebForms OTPInput supports the following styling options:
20+
21+
- [`Size`](#size) - configures the overall size of the component.
22+
- [`FillMode`](#fillmode) - configures how the color is applied to the component.
23+
- [`Rounded`](#rounded) - configures the border radius of the component.
24+
25+
### Size
26+
27+
The `Size` option controls how big or small the items of the OTPInput look.
28+
29+
!["OTPInput Size"](images/otpinput-size.png "OTPInput Size")
30+
31+
The following values are available for the [Size]({%slug otpinput/server-side-programming/enums#otpinputsize%}) option:
32+
33+
- `Small`
34+
- `Medium` (Default)
35+
- `Large`
36+
- `None`
37+
38+
Example
39+
40+
````ASP.NET
41+
<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Size="Small" Separator="-">
42+
<ItemsCollection>
43+
<telerik:OTPInputItem GroupLength="3" />
44+
<telerik:OTPInputItem GroupLength="3" />
45+
</ItemsCollection>
46+
</telerik:RadOTPInput>
47+
48+
<telerik:RadOTPInput ID="RadOTPInput2" runat="server" Size="Medium" Separator="-">
49+
<ItemsCollection>
50+
<telerik:OTPInputItem GroupLength="3" />
51+
<telerik:OTPInputItem GroupLength="3" />
52+
</ItemsCollection>
53+
</telerik:RadOTPInput>
54+
55+
<telerik:RadOTPInput ID="RadOTPInput3" runat="server" Size="Large" Separator="-">
56+
<ItemsCollection>
57+
<telerik:OTPInputItem GroupLength="3" />
58+
<telerik:OTPInputItem GroupLength="3" />
59+
</ItemsCollection>
60+
</telerik:RadOTPInput>
61+
62+
<telerik:RadOTPInput ID="RadOTPInput4" runat="server" Size="None" Separator="-">
63+
<ItemsCollection>
64+
<telerik:OTPInputItem GroupLength="3" />
65+
<telerik:OTPInputItem GroupLength="3" />
66+
</ItemsCollection>
67+
</telerik:RadOTPInput>
68+
````
69+
70+
### Rounded
71+
72+
The `Rounded` option controls the border radius of the rendered `input` elements.
73+
74+
!["OTPInput Rounded"](images/otpinput-rounded.png "OTPInput Rounded")
75+
76+
The following values are available for the [Rounded]({%slug otpinput/server-side-programming/enums#otpinputrounded%}) option:
77+
78+
- `Small`
79+
- `Mediun` (Default)
80+
- `Large`
81+
- `Full`
82+
- `None`
83+
84+
````ASP.NET
85+
<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Rounded="Small" Separator="-">
86+
<ItemsCollection>
87+
<telerik:OTPInputItem GroupLength="3" />
88+
<telerik:OTPInputItem GroupLength="3" />
89+
</ItemsCollection>
90+
</telerik:RadOTPInput>
91+
92+
<telerik:RadOTPInput ID="RadOTPInput2" runat="server" Rounded="Medium" Separator="-">
93+
<ItemsCollection>
94+
<telerik:OTPInputItem GroupLength="3" />
95+
<telerik:OTPInputItem GroupLength="3" />
96+
</ItemsCollection>
97+
</telerik:RadOTPInput>
98+
99+
<telerik:RadOTPInput ID="RadOTPInput3" runat="server" Rounded="Large" Separator="-">
100+
<ItemsCollection>
101+
<telerik:OTPInputItem GroupLength="3" />
102+
<telerik:OTPInputItem GroupLength="3" />
103+
</ItemsCollection>
104+
</telerik:RadOTPInput>
105+
106+
<telerik:RadOTPInput ID="RadOTPInput4" runat="server" Rounded="Full" Separator="-">
107+
<ItemsCollection>
108+
<telerik:OTPInputItem GroupLength="3" />
109+
<telerik:OTPInputItem GroupLength="3" />
110+
</ItemsCollection>
111+
</telerik:RadOTPInput>
112+
113+
<telerik:RadOTPInput ID="RadOTPInput5" runat="server" Rounded="None" Separator="-">
114+
<ItemsCollection>
115+
<telerik:OTPInputItem GroupLength="3" />
116+
<telerik:OTPInputItem GroupLength="3" />
117+
</ItemsCollection>
118+
</telerik:RadOTPInput>
119+
````
120+
121+
### FillMode
122+
123+
The `FillMode` option controls the way the color is applied to the rendered `input` elements.
124+
125+
!["OTPInput FillMode"](images/otpinput-fillmode.png "OTPInput FillMode")
126+
127+
The following values are available for the [FillMode]({%slug otpinput/server-side-programming/enums#otpinputfillmode%}) option:
128+
129+
- `Solid` (Default)
130+
- `Flat`
131+
- `Outline`
132+
- `None`
133+
134+
````ASP.NET
135+
<telerik:RadOTPInput ID="RadOTPInput1" runat="server" FillMode="Solid" Separator="-">
136+
<ItemsCollection>
137+
<telerik:OTPInputItem GroupLength="3" />
138+
<telerik:OTPInputItem GroupLength="3" />
139+
</ItemsCollection>
140+
</telerik:RadOTPInput>
141+
142+
<telerik:RadOTPInput ID="RadOTPInput2" runat="server" FillMode="Flat" Separator="-">
143+
<ItemsCollection>
144+
<telerik:OTPInputItem GroupLength="3" />
145+
<telerik:OTPInputItem GroupLength="3" />
146+
</ItemsCollection>
147+
</telerik:RadOTPInput>
148+
149+
<telerik:RadOTPInput ID="RadOTPInput3" runat="server" FillMode="Outline" Separator="-">
150+
<ItemsCollection>
151+
<telerik:OTPInputItem GroupLength="3" />
152+
<telerik:OTPInputItem GroupLength="3" />
153+
</ItemsCollection>
154+
</telerik:RadOTPInput>
155+
156+
<telerik:RadOTPInput ID="RadOTPInput4" runat="server" FillMode="None" Separator="-">
157+
<ItemsCollection>
158+
<telerik:OTPInputItem GroupLength="3" />
159+
<telerik:OTPInputItem GroupLength="3" />
160+
</ItemsCollection>
161+
</telerik:RadOTPInput>
162+
````
163+
164+
### Type
165+
166+
The `Type` option controls the type of the `input` elements.
167+
168+
!["OTPInput Type"](images/otpinput-type.png "OTPInput Type")
169+
170+
The following values are available for the [Type]({%slug otpinput/server-side-programming/enums#otpinputtype%}) option:
171+
172+
- `Text` (Default)
173+
- `Number`
174+
- `Password`
175+
176+
````ASP.NET
177+
<telerik:RadOTPInput ID="RadOTPInput1" runat="server" Type="Text" Separator="-">
178+
<ItemsCollection>
179+
<telerik:OTPInputItem GroupLength="3" />
180+
<telerik:OTPInputItem GroupLength="3" />
181+
</ItemsCollection>
182+
</telerik:RadOTPInput>
183+
184+
<telerik:RadOTPInput ID="RadOTPInput2" runat="server" Type="Number" Separator="-">
185+
<ItemsCollection>
186+
<telerik:OTPInputItem GroupLength="3" />
187+
<telerik:OTPInputItem GroupLength="3" />
188+
</ItemsCollection>
189+
</telerik:RadOTPInput>
190+
191+
<telerik:RadOTPInput ID="RadOTPInput3" runat="server" Type="Password" Separator="-">
192+
<ItemsCollection>
193+
<telerik:OTPInputItem GroupLength="3" />
194+
<telerik:OTPInputItem GroupLength="3" />
195+
</ItemsCollection>
196+
</telerik:RadOTPInput>
197+
````
198+
199+
## Next Steps
200+
201+
- [Separator]({%slug otpinput/separator%})
202+
- [Adaptiveness]({%slug otpinput/adaptiveness%})
203+
- [Accessibility]({% slug otpinput/accessibility/overview%})
204+
- [Client-side Programming]({%slug otpinput/client-side-programming/overview%})
205+
- [Server-side Programming]({%slug otpinput/server-side-programming/overview%})

‎controls/otpinput/client-side-programming/enums.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Enums
3+
page_title: OTPInput Client-side Enums
4+
description: Client-side Enums of the Telerik WebForms OTPInput component
5+
slug: otpinput/client-side-programming/enums
6+
tags: otpinput,javascript,enums
7+
published: True
8+
position: 3
9+
---
10+
11+
# Enums
12+
13+
Telerik WebForms OTPInput specific Client-side Enums.
14+
15+
## Type
16+
17+
The enum type: `Telerik.Web.UI.RadOTPInputType`
18+
19+
| Enum member | Value |
20+
| ----------------------------------------- | ----- |
21+
| `Telerik.Web.UI.RadOTPInputType.Text` | `0` |
22+
| `Telerik.Web.UI.RadOTPInputType.Number` | `1` |
23+
| `Telerik.Web.UI.RadOTPInputType.Password` | `2` |
24+
25+
## Size
26+
27+
The enum type: `Telerik.Web.UI.RadOTPInputSize`
28+
29+
| Enum member | Value |
30+
| --------------------------------------- | ----- |
31+
| `Telerik.Web.UI.RadOTPInputSize.None` | `0` |
32+
| `Telerik.Web.UI.RadOTPInputSize.Small` | `1` |
33+
| `Telerik.Web.UI.RadOTPInputSize.Medium` | `2` |
34+
| `Telerik.Web.UI.RadOTPInputSize.Large` | `3` |
35+
36+
## FillMode
37+
38+
The enum type: `Telerik.Web.UI.RadOTPInputFillMode`
39+
40+
| Enum member | Value |
41+
| -------------------------------------------- | ----- |
42+
| `Telerik.Web.UI.RadOTPInputFillMode.None` | `0` |
43+
| `Telerik.Web.UI.RadOTPInputFillMode.Solid` | `1` |
44+
| `Telerik.Web.UI.RadOTPInputFillMode.Outline` | `2` |
45+
| `Telerik.Web.UI.RadOTPInputFillMode.Flat` | `3` |
46+
47+
## Rounded
48+
49+
The enum type: `Telerik.Web.UI.RadOTPInputRounded`
50+
51+
| Enum member | Value |
52+
| ------------------------------------------ | ----- |
53+
| `Telerik.Web.UI.RadOTPInputRounded.None` | `0` |
54+
| `Telerik.Web.UI.RadOTPInputRounded.Small` | `1` |
55+
| `Telerik.Web.UI.RadOTPInputRounded.Medium` | `2` |
56+
| `Telerik.Web.UI.RadOTPInputRounded.Large` | `3` |
57+
| `Telerik.Web.UI.RadOTPInputRounded.Full` | `4` |

0 commit comments

Comments
 (0)