From 04c81bf78f1a1166ad758ed74838e06a57fbb6ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Sun, 19 Jun 2022 16:25:14 +0300 Subject: [PATCH 1/2] Accessibility for InputText --- src/views/inputtext/InputTextDoc.vue | 35 ++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue index 30bab91f1..56d615b50 100755 --- a/src/views/inputtext/InputTextDoc.vue +++ b/src/views/inputtext/InputTextDoc.vue @@ -143,6 +143,41 @@ import InputText from 'primevue/inputtext'; +
Accessibility
+ +
Screen Reader
+

InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

+ +

+<label for="firstname">Firstname</label>
+<InputText id="firstname" />
+
+<span id="lastname">Lastname</span>
+<InputText id="firstname" aria-labelledby="lastname" />
+
+<InputText aria-label="Age"/>
+
+
+ +
Keyboard Support
+
+ + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the input.
+
+ +
Dependencies

None.

From 6bb81891e706809c39705b6d0e57d1a494441bc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Mon, 27 Jun 2022 14:52:49 +0300 Subject: [PATCH 2/2] refactor --- src/views/inputtext/InputTextDoc.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue index 56d615b50..13640eb78 100755 --- a/src/views/inputtext/InputTextDoc.vue +++ b/src/views/inputtext/InputTextDoc.vue @@ -153,7 +153,7 @@ import InputText from 'primevue/inputtext'; <InputText id="firstname" /> <span id="lastname">Lastname</span> -<InputText id="firstname" aria-labelledby="lastname" /> +<InputText aria-labelledby="lastname" /> <InputText aria-label="Age"/>