Skip to content

Commit c38389e

Browse files
shairezshairez
committed
Merge branch 'main' into pr-add-cypress-tests
2 parents e074a5e + 91af379 commit c38389e

File tree

15 files changed

+1083
-4
lines changed

15 files changed

+1083
-4
lines changed

‎.all-contributorsrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,16 @@
223223
"contributions": [
224224
"code"
225225
]
226+
},
227+
{
228+
"login": "tleperou",
229+
"name": "Thomas Lepérou",
230+
"avatar_url": "https://avatars.githubusercontent.com/u/8383972?v=4",
231+
"profile": "https://github.com/tleperou",
232+
"contributions": [
233+
"doc",
234+
"code"
235+
]
226236
}
227237
],
228238
"contributorsPerLine": 7,

‎CODING_STANDARDS.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,23 @@ export const Button = component$(
125125
}
126126
);
127127
```
128+
129+
# A11y test coverage
130+
131+
Use [Axe](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) Chrome extension in order to test components against the a11y standards.
132+
133+
Choose the suitable tests to perform among the different available categories:
134+
135+
- table
136+
- keyboard
137+
- modal dialog
138+
- interactive elements
139+
- structure
140+
- images
141+
- forms
142+
143+
Note: test only the component by choosing the parts of the page that have to be tested.
144+
145+
The extension is pretty talkative and provides all the insights to perform the tests with ease. Once tests' results are available, do your best to solve any issues found.
146+
147+
Share the tests results on the related Discord channel or Github PR.

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
111111
<td align="center" valign="top" width="14.28%"><a href="https://yishay-hazan.netlify.app"><img src="https://avatars.githubusercontent.com/u/50710472?v=4?s=100" width="100px;" alt="Yishay Hazan"/><br /><sub><b>Yishay Hazan</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=yishayhaz" title="Code">💻</a></td>
112112
<td align="center" valign="top" width="14.28%"><a href="https://github.com/rossellamascia"><img src="https://avatars.githubusercontent.com/u/42215075?v=4?s=100" width="100px;" alt="Rossella Mascia"/><br /><sub><b>Rossella Mascia</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=rossellamascia" title="Code">💻</a></td>
113113
<td align="center" valign="top" width="14.28%"><a href="https://ssd7.vercel.app"><img src="https://avatars.githubusercontent.com/u/80447788?v=4?s=100" width="100px;" alt="Sai Srikar Dumpeti"/><br /><sub><b>Sai Srikar Dumpeti</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=the-r3aper7" title="Code">💻</a></td>
114+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/tleperou"><img src="https://avatars.githubusercontent.com/u/8383972?v=4?s=100" width="100px;" alt="Thomas Lepérou"/><br /><sub><b>Thomas Lepérou</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=tleperou" title="Documentation">📖</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=tleperou" title="Code">💻</a></td>
114115
</tr>
115116
</tbody>
116117
</table>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
4242
path: `/docs/${appState.theme.toLowerCase()}/navigation-bar`,
4343
},
4444
{ label: 'Drawer', path: `/docs/${appState.theme.toLowerCase()}/drawer` },
45+
{ label: 'Input Phone', path: `/docs/headless/input-phone` },
4546
{ label: 'Rating', path: `/docs/${appState.theme.toLowerCase()}/rating` },
4647
{ label: 'Radio', path: `/docs/${appState.theme.toLowerCase()}/radio` },
4748
{ label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import {
2+
$,
3+
component$,
4+
useSignal,
5+
useStyles$,
6+
useStylesScoped$,
7+
} from '@builder.io/qwik';
8+
import { InputPhone } from '@qwik-ui/headless';
9+
import {
10+
InputPhoneCountry,
11+
InputPhoneValidity,
12+
} from 'packages/headless/src/components/input-phone/input-phone';
13+
import styles from './input-phone.css?inline';
14+
15+
export default component$(() => {
16+
useStyles$(styles);
17+
18+
useStylesScoped$(`
19+
h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
20+
.form-item, hr { width: 35em; }
21+
h2 { margin-block: 1.15em 0.5em; font-size: xx-large; }
22+
h3 { margin-block: 0.85em 0.35em; font-size: x-large; }
23+
`);
24+
25+
const country = useSignal<InputPhoneCountry>();
26+
const number = useSignal<string>();
27+
const valid = useSignal<InputPhoneValidity>();
28+
29+
return (
30+
<>
31+
<p>This is the documentation for the Input Phone</p>
32+
33+
<h2>Input Phone Example</h2>
34+
35+
<h3>countryCode set to FR</h3>
36+
37+
<div class="form-item">
38+
<InputPhone
39+
countryCode="FR"
40+
value="0645678990"
41+
placeholder="Type your phone number"
42+
/>
43+
</div>
44+
45+
<hr />
46+
47+
<h3>countryCode unset</h3>
48+
49+
<div class="form-item">
50+
<InputPhone value="0645678990" placeholder="Type your phone number" />
51+
</div>
52+
53+
<hr />
54+
55+
<h3>countryCode set to auto</h3>
56+
57+
<div class="form-item">
58+
<InputPhone
59+
countryCode="auto"
60+
value="0481163"
61+
placeholder="Type your phone number"
62+
onCountryChange$={$((value?: InputPhoneCountry) => {
63+
country.value = value;
64+
})}
65+
onNumberChange$={$((value: string) => {
66+
number.value = value;
67+
})}
68+
onValidChange$={$((value: InputPhoneValidity) => {
69+
valid.value = value;
70+
})}
71+
/>
72+
</div>
73+
74+
<hr />
75+
76+
<h3>Inputs</h3>
77+
78+
<ul>
79+
<li>
80+
<pre>countryCode</pre> type CountryCode | default undefined
81+
</li>
82+
<li>
83+
<pre>placeholder</pre> type string | default "Phone number"
84+
</li>
85+
<li>
86+
<pre>value</pre> type string | default <em>empty</em>
87+
</li>
88+
</ul>
89+
90+
<hr />
91+
92+
<h3>Outputs</h3>
93+
94+
<ul>
95+
<li>
96+
<pre>onCountryChange$</pre>:{' '}
97+
<pre>{JSON.stringify(country.value) || '–'}</pre>
98+
</li>
99+
<li>
100+
<pre>onNumberChange$</pre>: {number.value || '–'}
101+
</li>
102+
<li>
103+
<pre>onValidChange$</pre>: {valid.value || '–'}
104+
</li>
105+
</ul>
106+
</>
107+
);
108+
});

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
hr {
2+
margin-block: 2em;
3+
}
4+
5+
pre {
6+
display: inline;
7+
}

‎cla-signs/v1/cla.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,14 @@
199199
"created_at": "2023-03-13T14:56:57Z",
200200
"repoId": 545159943,
201201
"pullRequestNo": 240
202+
},
203+
{
204+
"name": "tleperou",
205+
"id": 8383972,
206+
"comment_id": 1475013253,
207+
"created_at": "2023-03-18T22:18:00Z",
208+
"repoId": 545159943,
209+
"pullRequestNo": 243
202210
}
203211
]
204212
}

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"autoprefixer": "^10.4.13",
4949
"commitizen": "^4.3.0",
5050
"commitlint": "^17.4.3",
51+
"country-list-json": "1.1.0",
5152
"cypress": "^12.6.0",
5253
"cypress-ct-qwik": "0.0.5",
5354
"cz-conventional-changelog": "^3.3.0",
@@ -60,6 +61,7 @@
6061
"html-webpack-plugin": "^5.5.0",
6162
"husky": "^8.0.3",
6263
"jsdom": "~20.0.3",
64+
"libphonenumber-js": "1.10.24",
6365
"lodash.includes": "4.3.0",
6466
"ngx-deploy-npm": "^5.0.0",
6567
"node-fetch": "3.3.0",

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

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

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
{
2+
"url": "http://127.0.0.1:5173/docs/headless/input-phone/",
3+
"extensionVersion": "4.51.0",
4+
"axeVersion": "4.6.3",
5+
"standard": "WCAG 2.1 AA",
6+
"testingStartDate": "2023-03-18T11:26:34.819Z",
7+
"testingEndDate": "2023-03-18T11:48:12.451Z",
8+
"bestPracticesEnabled": false,
9+
"issueSummary": {
10+
"critical": 0,
11+
"moderate": 0,
12+
"minor": 0,
13+
"serious": 3,
14+
"bestPractices": 0,
15+
"needsReview": 0
16+
},
17+
"remainingTestingSummary": { "run": false },
18+
"igtSummary": [
19+
{ "tool": "Table", "skipped": false, "name": null, "run": false },
20+
{
21+
"tool": "Keyboard",
22+
"skipped": false,
23+
"name": "3/18/2023 at 10:42 PM",
24+
"run": true,
25+
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 0 },
26+
"duration": 157762
27+
},
28+
{ "tool": "Modal Dialog", "skipped": false, "name": null, "run": false },
29+
{
30+
"tool": "Interactive Elements",
31+
"skipped": false,
32+
"name": "3/18/2023 at 10:26 PM",
33+
"run": true,
34+
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 0 },
35+
"duration": 624995
36+
},
37+
{
38+
"tool": "Structure",
39+
"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
44+
},
45+
{ "tool": "Images", "skipped": false, "name": null, "run": false },
46+
{ "tool": "Forms", "skipped": false, "name": null, "run": false }
47+
],
48+
"failedRules": [
49+
{ "name": "lang-change-not-marked", "count": 3, "mode": "manual" }
50+
],
51+
"needsReview": [],
52+
"allIssues": [
53+
{
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",
59+
"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]",
67+
"shareURL": "",
68+
"createdAt": "2023-03-18T11:48:12.441Z",
69+
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
70+
"testPageTitle": "",
71+
"foundBy": "[email protected]",
72+
"axeVersion": "4.6.3"
73+
},
74+
{
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",
80+
"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)"
84+
],
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]",
90+
"shareURL": "",
91+
"createdAt": "2023-03-18T11:48:12.441Z",
92+
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
93+
"testPageTitle": "",
94+
"foundBy": "[email protected]",
95+
"axeVersion": "4.6.3"
96+
},
97+
{
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",
102+
"impact": "serious",
103+
"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)"
107+
],
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]",
113+
"shareURL": "",
114+
"createdAt": "2023-03-18T11:48:12.441Z",
115+
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
116+
"testPageTitle": "",
117+
"foundBy": "[email protected]",
118+
"axeVersion": "4.6.3"
119+
}
120+
]
121+
}

0 commit comments

Comments
 (0)