Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility/time picker #121

Merged
merged 11 commits into from
Dec 15, 2021
Merged

Accessibility/time picker #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a109c56
feat(time-picker): add accessibility support
goremikins Dec 8, 2021
958791a
feat(phrasebook): change time-picker wording
goremikins Dec 9, 2021
8f5d47a
Merge remote-tracking branch 'origin/develop' into accessibility/time…
goremikins Dec 13, 2021
c400116
Merge remote-tracking branch 'origin/develop' into accessibility/time…
goremikins Dec 13, 2021
21211b7
feat(time-picker): value keeps selected while stepping
goremikins Dec 13, 2021
efc2920
docs: update and format jsdocs
phetw Dec 15, 2021
3da8fe9
Merge branch 'develop' into accessibility/time-picker
wsuwt Dec 15, 2021
a1ea338
Merge branch 'develop' into accessibility/time-picker
wsuwt Dec 15, 2021
dbbd03e
Merge branch 'develop' into accessibility/time-picker
goremikins Dec 15, 2021
6bb0678
refactor(time-picker): split templates
goremikins Dec 15, 2021
5995505
Merge branch 'develop' into accessibility/time-picker
wsuwt Dec 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/elements/src/datetime-picker/__snapshots__/DOMStructure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,7 @@
<ef-time-picker
id="timepicker"
part="time-picker"
role="group"
tabindex="0"
>
</ef-time-picker>
Expand Down Expand Up @@ -348,6 +349,7 @@
<ef-time-picker
id="timepicker"
part="time-picker"
role="group"
tabindex="0"
>
</ef-time-picker>
Expand Down Expand Up @@ -428,6 +430,7 @@
<ef-time-picker
id="timepicker"
part="time-picker"
role="group"
tabindex="0"
>
</ef-time-picker>
Expand All @@ -436,6 +439,7 @@
<ef-time-picker
id="timepicker-to"
part="time-picker"
role="group"
tabindex="0"
>
</ef-time-picker>
Expand Down
104 changes: 86 additions & 18 deletions packages/elements/src/time-picker/__snapshots__/TimePicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@

```html
<ef-number-field
aria-label="0 hours"
aria-readonly="true"
id="hours"
max="23"
min="0"
no-spinner=""
part="input"
placeholder="00"
readonly=""
tabindex="0"
transparent=""
Expand All @@ -21,13 +21,13 @@
<span part="divider">
</span>
<ef-number-field
aria-label="0 minutes"
aria-readonly="true"
id="minutes"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="00"
readonly=""
tabindex="0"
transparent=""
Expand All @@ -36,33 +36,38 @@
<span part="divider">
</span>
<ef-number-field
aria-label="0 seconds"
aria-readonly="true"
id="seconds"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="00"
readonly=""
tabindex="0"
transparent=""
>
</ef-number-field>

<div
aria-label="Selected time is: 00:00:00"
aria-live="polite"
part="aria-selection"
>
</div>
```

#### `DOM structure: disabled`

```html
<ef-number-field
aria-disabled="true"
aria-label="0 hours"
disabled=""
id="hours"
max="23"
min="0"
no-spinner=""
part="input"
placeholder="00"
style="pointer-events: none;"
tabindex="-1"
transparent=""
Expand All @@ -72,13 +77,13 @@
</span>
<ef-number-field
aria-disabled="true"
aria-label="0 minutes"
disabled=""
id="minutes"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="00"
style="pointer-events: none;"
tabindex="-1"
transparent=""
Expand All @@ -88,136 +93,199 @@
</span>
<ef-number-field
aria-disabled="true"
aria-label="0 seconds"
disabled=""
id="seconds"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="00"
style="pointer-events: none;"
tabindex="-1"
transparent=""
>
</ef-number-field>

<div
aria-label="Selected time is: 00:00:00"
aria-live="polite"
part="aria-selection"
>
</div>
```

#### `DOM structure: value, no seconds`

```html
<ef-number-field
aria-label="8 hours"
id="hours"
max="23"
min="0"
no-spinner=""
part="input"
placeholder="08"
tabindex="0"
transparent=""
>
</ef-number-field>
<span part="divider">
</span>
<ef-number-field
aria-label="16 minutes"
id="minutes"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="16"
tabindex="0"
transparent=""
>
</ef-number-field>

<div
aria-label="Selected time is: 08:16"
aria-live="polite"
part="aria-selection"
>
</div>
```

#### `DOM structure: value, with seconds`

```html
<ef-number-field
aria-label="8 hours"
id="hours"
max="23"
min="0"
no-spinner=""
part="input"
placeholder="08"
tabindex="0"
transparent=""
>
</ef-number-field>
<span part="divider">
</span>
<ef-number-field
aria-label="16 minutes"
id="minutes"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="16"
tabindex="0"
transparent=""
>
</ef-number-field>
<span part="divider">
</span>
<ef-number-field
aria-label="32 seconds"
id="seconds"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="32"
tabindex="0"
transparent=""
>
</ef-number-field>

<div
aria-label="Selected time is: 08:16:32"
aria-live="polite"
part="aria-selection"
>
</div>
```

#### `DOM structure: value, am/pm no seconds`

```html
<ef-number-field
aria-label="1 hour"
id="hours"
max="12"
min="1"
no-spinner=""
part="input"
placeholder="01"
tabindex="0"
transparent=""
>
</ef-number-field>
<span part="divider">
</span>
<ef-number-field
aria-label="30 minutes"
id="minutes"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="30"
tabindex="0"
transparent=""
>
</ef-number-field>
<div
aria-activedescendant="toggle-pm"
aria-label="Toggle Time Period"
id="toggle"
part="toggle"
role="listbox"
tabindex="0"
>
<div part="toggle-item">
<div
aria-label="Before Midday"
id="toggle-am"
part="toggle-item"
role="option"
>
AM
</div>
<div
active=""
aria-label="After Midday"
id="toggle-pm"
part="toggle-item"
role="option"
>
PM
</div>
</div>
<div
aria-label="Selected time is: 1:30 PM"
aria-live="polite"
part="aria-selection"
>
</div>
```

#### `DOM structure: role=none`

```html
<ef-number-field
aria-label="Select hours"
id="hours"
max="23"
min="0"
no-spinner=""
part="input"
placeholder="--"
tabindex="0"
transparent=""
>
</ef-number-field>
<span part="divider">
</span>
<ef-number-field
aria-label="Select minutes"
id="minutes"
max="59"
min="0"
no-spinner=""
part="input"
placeholder="--"
tabindex="0"
transparent=""
>
</ef-number-field>

```

Loading