Skip to content

Commit 43c5f53

Browse files
tleperougioboa
tleperou
and
gioboa
authored
feat(input): add input component (#257)
* docs: add Input in menu * docs: fix menu item for loop[ key * fix: remove deprecation & use useVisibleTask * feat: use input as main props & add wrapperProps * fix: import properly input phone in docs * feat: add aria-label to country code list * feat: update aria-labels and tabindex * feat: add Input * docs: add Input docs headless * feat: add Input a11y axe report * docs: remove Switch from example * fix: remove role presentation --------- Co-authored-by: Giorgio Boa <[email protected]>
1 parent 9076fd2 commit 43c5f53

File tree

9 files changed

+433
-86
lines changed

9 files changed

+433
-86
lines changed

‎apps/website/src/components/menu/menu.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
4949
label: 'Drawer',
5050
path: `/docs/${appState.theme.toLowerCase()}/drawer`,
5151
},
52+
{ label: 'Input', path: `/docs/${appState.theme.toLowerCase()}/input` },
5253
{ label: 'Input Phone', path: `/docs/headless/input-phone` },
5354
{
5455
label: 'Rating',

‎apps/website/src/routes/docs/headless/input-phone/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ import {
66
useStylesScoped$,
77
} from '@builder.io/qwik';
88
import { InputPhone } from '@qwik-ui/headless';
9-
import {
10-
InputPhoneCountry,
11-
InputPhoneValidity,
12-
} from 'packages/headless/src/components/input-phone/input-phone';
9+
import { InputPhoneCountry, InputPhoneValidity } from '@qwik-ui/headless';
1310
import styles from './input-phone.css?inline';
1411

1512
export default component$(() => {

‎apps/website/src/routes/docs/headless/input/index.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { component$, useStylesScoped$ } from '@builder.io/qwik';
2+
import { Input } from '@qwik-ui/headless';
3+
4+
const { Root, Label, Hint, Phone, Message } = Input;
5+
6+
export default component$(() => {
7+
const { scopeId } = useStylesScoped$(`
8+
h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
9+
h2 { margin-block: 1.15em 0.5em; font-size: xx-large; }
10+
h3 { margin-block: 0.85em 0.35em; font-size: x-large; }
11+
h4 { margin-block: 0.85em 0.35em; font-size: x-large; }
12+
13+
hr {
14+
margin-block: 2em;
15+
}
16+
`);
17+
18+
return (
19+
<>
20+
<p>This is the documentation for the Input</p>
21+
22+
<h2>Valid input</h2>
23+
24+
<Root class={[scopeId, 'form-item']}>
25+
<Label>
26+
<h3>Delivery phone number</h3>
27+
</Label>
28+
<Hint>
29+
Shipper will call at this phone number when your parcel is delivered.
30+
</Hint>
31+
<Phone />
32+
<Message status="resolved">Your phone number is valid</Message>
33+
</Root>
34+
35+
<hr />
36+
37+
<h2>Pending input</h2>
38+
39+
<Root class={[scopeId, 'form-item']}>
40+
<Label>
41+
<h3>Delivery phone number</h3>
42+
</Label>
43+
<Hint>
44+
Shipper will call at this phone number when your parcel is delivered.
45+
</Hint>
46+
<Phone />
47+
<Message status="pending">Your phone number is being verified</Message>
48+
</Root>
49+
50+
<hr />
51+
52+
<h2>Valid invalid</h2>
53+
54+
<Root class={[scopeId, 'form-item']}>
55+
<Label>
56+
<h3>Delivery phone number</h3>
57+
</Label>
58+
<Hint>
59+
Shipper will call at this phone number when your parcel is delivered.
60+
</Hint>
61+
<Phone />
62+
<Message status="rejected">Your phone number is valid</Message>
63+
</Root>
64+
65+
<hr />
66+
67+
<h3>Part</h3>
68+
69+
<ul>
70+
<li>Root</li>
71+
<li>Hint</li>
72+
<li>Message</li>
73+
<li>inputs - tbd</li>
74+
</ul>
75+
76+
<hr />
77+
78+
<h3>Outputs</h3>
79+
80+
<ul>
81+
<li>same as any inputs</li>
82+
</ul>
83+
</>
84+
);
85+
});

‎packages/headless/src/components/input-phone/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { InputPhone } from './input-phone';
1+
export * from './input-phone';

‎packages/headless/src/components/input-phone/input-phone.axe.json

Lines changed: 123 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,173 @@
11
{
2-
"url": "http://127.0.0.1:5173/docs/headless/input-phone/",
3-
"extensionVersion": "4.51.0",
2+
"url": "http://localhost:5173/docs/headless/input-phone/",
3+
"extensionVersion": "4.52.0",
44
"axeVersion": "4.6.3",
55
"standard": "WCAG 2.1 AA",
6-
"testingStartDate": "2023-03-18T11:26:34.819Z",
7-
"testingEndDate": "2023-03-18T11:48:12.451Z",
8-
"bestPracticesEnabled": false,
6+
"testingStartDate": "2023-03-25T01:32:42.404Z",
7+
"testingEndDate": "2023-03-25T01:48:43.415Z",
8+
"bestPracticesEnabled": true,
99
"issueSummary": {
10-
"critical": 0,
11-
"moderate": 0,
10+
"critical": 1,
11+
"moderate": 1,
1212
"minor": 0,
13-
"serious": 3,
14-
"bestPractices": 0,
13+
"serious": 1,
14+
"bestPractices": 1,
1515
"needsReview": 0
1616
},
17-
"remainingTestingSummary": { "run": false },
17+
"remainingTestingSummary": {
18+
"run": false
19+
},
1820
"igtSummary": [
19-
{ "tool": "Table", "skipped": false, "name": null, "run": false },
21+
{
22+
"tool": "Table",
23+
"skipped": false,
24+
"name": null,
25+
"run": false
26+
},
2027
{
2128
"tool": "Keyboard",
2229
"skipped": false,
23-
"name": "3/18/2023 at 10:42 PM",
30+
"name": "3/25/2023 at 12:47 PM",
2431
"run": true,
25-
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 0 },
26-
"duration": 157762
32+
"issues": {
33+
"critical": 0,
34+
"moderate": 0,
35+
"minor": 0,
36+
"serious": 0
37+
},
38+
"duration": 48646
39+
},
40+
{
41+
"tool": "Modal Dialog",
42+
"skipped": false,
43+
"name": null,
44+
"run": false
2745
},
28-
{ "tool": "Modal Dialog", "skipped": false, "name": null, "run": false },
2946
{
3047
"tool": "Interactive Elements",
3148
"skipped": false,
32-
"name": "3/18/2023 at 10:26 PM",
49+
"name": "3/25/2023 at 12:45 PM",
3350
"run": true,
34-
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 0 },
35-
"duration": 624995
51+
"issues": {
52+
"critical": 0,
53+
"moderate": 0,
54+
"minor": 0,
55+
"serious": 0
56+
},
57+
"duration": 50924
3658
},
3759
{
3860
"tool": "Structure",
3961
"skipped": false,
40-
"name": "3/18/2023 at 10:45 PM",
41-
"run": true,
42-
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 3 },
43-
"duration": 76867
62+
"name": null,
63+
"run": false
64+
},
65+
{
66+
"tool": "Images",
67+
"skipped": false,
68+
"name": null,
69+
"run": false
4470
},
45-
{ "tool": "Images", "skipped": false, "name": null, "run": false },
46-
{ "tool": "Forms", "skipped": false, "name": null, "run": false }
71+
{
72+
"tool": "Forms",
73+
"skipped": false,
74+
"name": null,
75+
"run": false
76+
}
4777
],
4878
"failedRules": [
49-
{ "name": "lang-change-not-marked", "count": 3, "mode": "manual" }
79+
{
80+
"name": "page-has-heading-one",
81+
"count": 1,
82+
"mode": "automated"
83+
},
84+
{
85+
"name": "image-alt",
86+
"count": 1,
87+
"mode": "automated"
88+
},
89+
{
90+
"name": "link-name",
91+
"count": 1,
92+
"mode": "automated"
93+
}
5094
],
5195
"needsReview": [],
5296
"allIssues": [
5397
{
54-
"ruleId": "lang-change-not-marked",
55-
"description": "The change in language for a portion of content is not coded.",
56-
"help": "Change in language is not marked",
57-
"helpUrl": "https://docs.deque.com/issue-help/1.0.0/en/lang-change-not-marked",
58-
"impact": "serious",
98+
"ruleId": "page-has-heading-one",
99+
"description": "Ensure that the page, or at least one of its frames contains a level-one heading",
100+
"help": "Page should contain a level-one heading",
101+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.6/page-has-heading-one?application=AxeChrome",
102+
"impact": "moderate",
59103
"needsReview": false,
60-
"isManual": true,
61-
"selector": ["body > form.\\00002b50\\0000fe0fdqh46j-1:nth-of-type(1)"],
62-
"summary": "The change in language for a portion of content is not coded.",
63-
"source": null,
64-
"tags": ["wcag2aa", "wcag312a"],
65-
"igt": "Structure",
66-
"testName": "QwikUI | Headless | Input-phone [interactivity]",
104+
"isManual": false,
105+
"selector": ["html"],
106+
"summary": "Fix all of the following:\n Page must have a level-one heading",
107+
"source": "<html lang=\"en-us\" q:container=\"resumed\" q:version=\"0.23.0\" q:render=\"ssr-dev\" q:base=\"/build/\" q:locale=\"\" class=\"dark\" data-theme=\"dark\">",
108+
"tags": ["cat.semantics", "best-practice"],
109+
"igt": "",
110+
"testName": "QwikUI | Headless | Input-phone",
67111
"shareURL": "",
68-
"createdAt": "2023-03-18T11:48:12.441Z",
69-
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
112+
"createdAt": "2023-03-25T01:32:42.965Z",
113+
"testUrl": "http://localhost:5173/docs/headless/input-phone/",
70114
"testPageTitle": "",
71115
"foundBy": "[email protected]",
72116
"axeVersion": "4.6.3"
73117
},
74118
{
75-
"ruleId": "lang-change-not-marked",
76-
"description": "The change in language for a portion of content is not coded.",
77-
"help": "Change in language is not marked",
78-
"helpUrl": "https://docs.deque.com/issue-help/1.0.0/en/lang-change-not-marked",
79-
"impact": "serious",
119+
"ruleId": "image-alt",
120+
"description": "Ensures <img> elements have alternate text or a role of none or presentation",
121+
"help": "Images must have alternate text",
122+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.6/image-alt?application=AxeChrome",
123+
"impact": "critical",
80124
"needsReview": false,
81-
"isManual": true,
82-
"selector": [
83-
"body > form.\\00002b50\\0000fe0fdqh46j-1:nth-of-type(1) > div.\\00002b50\\0000fe0fokr433-0:nth-of-type(1) > select.\\00002b50\\0000fe0fokr433-0:nth-of-type(1)"
125+
"isManual": false,
126+
"selector": ["img"],
127+
"summary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"",
128+
"source": "<img src=\"/qwik-ui.png\" class=\"w-32\" data-qwik-inspector=\"components/header/header.tsx:70:13\">",
129+
"tags": [
130+
"cat.text-alternatives",
131+
"wcag2a",
132+
"wcag111",
133+
"section508",
134+
"section508.22.a",
135+
"ACT"
84136
],
85-
"summary": "The change in language for a portion of content is not coded.",
86-
"source": null,
87-
"tags": ["wcag2aa", "wcag312a"],
88-
"igt": "Structure",
89-
"testName": "QwikUI | Headless | Input-phone [interactivity]",
137+
"igt": "",
138+
"testName": "QwikUI | Headless | Input-phone",
90139
"shareURL": "",
91-
"createdAt": "2023-03-18T11:48:12.441Z",
92-
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
140+
"createdAt": "2023-03-25T01:32:42.965Z",
141+
"testUrl": "http://localhost:5173/docs/headless/input-phone/",
93142
"testPageTitle": "",
94143
"foundBy": "[email protected]",
95144
"axeVersion": "4.6.3"
96145
},
97146
{
98-
"ruleId": "lang-change-not-marked",
99-
"description": "The change in language for a portion of content is not coded.",
100-
"help": "Change in language is not marked",
101-
"helpUrl": "https://docs.deque.com/issue-help/1.0.0/en/lang-change-not-marked",
147+
"ruleId": "link-name",
148+
"description": "Ensures links have discernible text",
149+
"help": "Links must have discernible text",
150+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.6/link-name?application=AxeChrome",
102151
"impact": "serious",
103152
"needsReview": false,
104-
"isManual": true,
105-
"selector": [
106-
"body > form.\\00002b50\\0000fe0fdqh46j-1:nth-of-type(1) > div.\\00002b50\\0000fe0fokr433-0:nth-of-type(1) > input.\\00002b50\\0000fe0fokr433-0:nth-of-type(1)"
153+
"isManual": false,
154+
"selector": ["a[href=\"/\"]"],
155+
"summary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute",
156+
"source": "<a href=\"/\" data-qwik-inspector=\"components/header/header.tsx:69:11\"><img src=\"/qwik-ui.png\" class=\"w-32\" data-qwik-inspector=\"components/header/header.tsx:70:13\"></a>",
157+
"tags": [
158+
"cat.name-role-value",
159+
"wcag2a",
160+
"wcag412",
161+
"wcag244",
162+
"section508",
163+
"section508.22.a",
164+
"ACT"
107165
],
108-
"summary": "The change in language for a portion of content is not coded.",
109-
"source": null,
110-
"tags": ["wcag2aa", "wcag312a"],
111-
"igt": "Structure",
112-
"testName": "QwikUI | Headless | Input-phone [interactivity]",
166+
"igt": "",
167+
"testName": "QwikUI | Headless | Input-phone",
113168
"shareURL": "",
114-
"createdAt": "2023-03-18T11:48:12.441Z",
115-
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
169+
"createdAt": "2023-03-25T01:32:42.965Z",
170+
"testUrl": "http://localhost:5173/docs/headless/input-phone/",
116171
"testPageTitle": "",
117172
"foundBy": "[email protected]",
118173
"axeVersion": "4.6.3"

0 commit comments

Comments
 (0)