Skip to content

Commit 9ea6365

Browse files
thejacksheltonthejackshelton
committed
adding aria
1 parent ddc682a commit 9ea6365

File tree

20 files changed

+147
-80
lines changed

20 files changed

+147
-80
lines changed

‎apps/website/src/routes/docs/headless/select/examples/add-users.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);

‎apps/website/src/routes/docs/headless/select/examples/change-value.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010
export default component$(() => {
1111
useStyles$(styles);
12-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13-
const counterSig = useSignal(0);
12+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
13+
const counter = useSignal(0);
1414

1515
const handleChange$ = $((): void => {
16-
counterSig.value++;
16+
counter.value++;
1717
});
1818

1919
return (
@@ -23,14 +23,14 @@ export default component$(() => {
2323
<SelectValue placeholder="Select an option" />
2424
</SelectTrigger>
2525
<SelectListbox class="select-listbox">
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>
3030
))}
3131
</SelectListbox>
3232
</Select>
33-
<p>You have changed {counterSig.value} times</p>
33+
<p>You have changed {counter.value} times</p>
3434
</>
3535
);
3636
});

‎apps/website/src/routes/docs/headless/select/examples/controlled.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010
export default component$(() => {
1111
useStyles$(styles);
12-
const usersSig = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
12+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
1313
const selected = useSignal<string>('Ryan');
1414

1515
return (
@@ -25,7 +25,7 @@ export default component$(() => {
2525
<SelectValue placeholder="Select an option" />
2626
</SelectTrigger>
2727
<SelectListbox class="select-listbox">
28-
{usersSig.map((user) => (
28+
{users.map((user) => (
2929
<SelectOption class="select-option" key={user}>
3030
{user}
3131
</SelectOption>

‎apps/website/src/routes/docs/headless/select/examples/disabled.tsx

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);
13-
const usersSig = useSignal<string[]>([
14-
'Tim',
15-
'Ryan',
16-
'Jim',
17-
'Bobbie',
18-
'Joan',
19-
'Jessie',
20-
'Abby',
21-
]);
13+
const users = ['Tim', 'Ryan', 'Jim', 'Bobbie', 'Joan', 'Jessie', 'Abby'];
2214

2315
return (
2416
<Select class="select">
@@ -27,14 +19,12 @@ export default component$(() => {
2719
<SelectValue placeholder="Select an option" />
2820
</SelectTrigger>
2921
<SelectListbox class="select-listbox">
30-
{usersSig.value.map((user, index) => (
22+
{users.map((user, index) => (
3123
<SelectOption
3224
class="select-option"
3325
key={user}
3426
disabled={
35-
index === 0 || index === 2 || index === usersSig.value.length - 1
36-
? true
37-
: false
27+
index === 0 || index === 2 || index === users.length - 1 ? true : false
3828
}
3929
>
4030
{user}

‎apps/website/src/routes/docs/headless/select/examples/group.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
4+
SelectGroup,
5+
SelectLabel,
56
SelectListbox,
67
SelectOption,
78
SelectTrigger,
89
SelectValue,
9-
SelectGroup,
10-
SelectLabel,
1110
} from '@qwik-ui/headless';
11+
import styles from './select.css?inline';
1212

1313
export default component$(() => {
1414
useStyles$(styles);
15-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Abby']);
16-
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird']);
15+
const users = ['Tim', 'Ryan', 'Jim', 'Abby'];
16+
const animals = ['Dog', 'Cat', 'Bird'];
1717

1818
return (
1919
<Select class="select">
@@ -23,15 +23,15 @@ export default component$(() => {
2323
<SelectListbox class="select-listbox">
2424
<SelectGroup>
2525
<SelectLabel class="select-label">People</SelectLabel>
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>
3030
))}
3131
</SelectGroup>
3232
<SelectGroup>
3333
<SelectLabel class="select-label">Animals</SelectLabel>
34-
{animalsSig.value.map((animal) => (
34+
{animals.map((animal) => (
3535
<SelectOption class="select-option" key={animal}>
3636
{animal}
3737
</SelectOption>

‎apps/website/src/routes/docs/headless/select/examples/hero.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);
13-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
1414

1515
return (
1616
<Select class="select">
1717
<SelectTrigger class="select-trigger">
1818
<SelectValue placeholder="Select an option" />
1919
</SelectTrigger>
2020
<SelectListbox class="select-listbox">
21-
{usersSig.value.map((user) => (
21+
{users.map((user) => (
2222
<SelectOption class="select-option" key={user}>
2323
{user}
2424
</SelectOption>

‎apps/website/src/routes/docs/headless/select/examples/loop.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010

1111
export default component$(() => {
1212
useStyles$(styles);
13-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
13+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
1414

1515
return (
1616
<Select loop={true} class="select">
1717
<SelectTrigger class="select-trigger">
1818
<SelectValue placeholder="Select an option" />
1919
</SelectTrigger>
2020
<SelectListbox class="select-listbox">
21-
{usersSig.value.map((user) => (
21+
{users.map((user) => (
2222
<SelectOption class="select-option" key={user}>
2323
{user}
2424
</SelectOption>

‎apps/website/src/routes/docs/headless/select/examples/normal-select.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { component$, useSignal } from '@builder.io/qwik';
1+
import { component$ } from '@builder.io/qwik';
22

33
export default component$(() => {
4-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
4+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
55

66
return (
77
<select multiple size={3}>
8-
{usersSig.value.map((user) => (
8+
{users.map((user) => (
99
<option key={user}>{user}</option>
1010
))}
1111
</select>

‎apps/website/src/routes/docs/headless/select/examples/open-change.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { component$, useSignal, $, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
54
SelectListbox,
65
SelectOption,
76
SelectTrigger,
87
SelectValue,
98
} from '@qwik-ui/headless';
9+
import styles from './select.css?inline';
1010
export default component$(() => {
1111
useStyles$(styles);
12-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
12+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
1313
const openChangeSig = useSignal(0);
1414

1515
const handleOpenChange$ = $((): void => {
@@ -23,7 +23,7 @@ export default component$(() => {
2323
<SelectValue placeholder="Select an option" />
2424
</SelectTrigger>
2525
<SelectListbox class="select-listbox">
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>

‎apps/website/src/routes/docs/headless/select/examples/scrollable.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import styles from './select.css?inline';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
32
import {
43
Select,
4+
SelectGroup,
5+
SelectLabel,
56
SelectListbox,
67
SelectOption,
78
SelectTrigger,
89
SelectValue,
9-
SelectGroup,
10-
SelectLabel,
1110
} from '@qwik-ui/headless';
11+
import styles from './select.css?inline';
1212

1313
export default component$(() => {
1414
useStyles$(styles);
15-
const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
16-
const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird', 'Fish', 'Snake']);
15+
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
16+
const animals = ['Dog', 'Cat', 'Bird', 'Fish', 'Snake'];
1717

1818
return (
1919
<Select class="select">
@@ -23,15 +23,15 @@ export default component$(() => {
2323
<SelectListbox class="select-listbox select-max-height">
2424
<SelectGroup>
2525
<SelectLabel class="select-label">People</SelectLabel>
26-
{usersSig.value.map((user) => (
26+
{users.map((user) => (
2727
<SelectOption class="select-option" key={user}>
2828
{user}
2929
</SelectOption>
3030
))}
3131
</SelectGroup>
3232
<SelectGroup>
3333
<SelectLabel class="select-label">Animals</SelectLabel>
34-
{animalsSig.value.map((animal) => (
34+
{animals.map((animal) => (
3535
<SelectOption class="select-option" key={animal}>
3636
{animal}
3737
</SelectOption>

0 commit comments

Comments
 (0)