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.

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

feat(dropdown): apply w3c WAI-ARIA (a11y) "combobox" pattern #1143

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
7 changes: 5 additions & 2 deletions packages/docs/.vitepress/theme/components/ExampleViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -182,9 +182,12 @@ function copy(val: string) {
margin-top: 1rem;
}

.odocs-example .odocs-spaced > * {
.odocs-example .odocs-spaced p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-right: 0.5rem;
> *:not(:last-child) {
margin-right: 0.5rem;
}
}

.odocs-panel {
Expand Down
2 changes: 2 additions & 0 deletions packages/docs/.vitepress/theme/components/ThemeSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ function onThemeChange(theme: unknown): void {
<o-dropdown
:model-value="selectedTheme"
root-class="theme-selector"
selectable
aria-label="theme selection"
@change="onThemeChange">
<template #trigger="{ active }">
<span role="button">
Expand Down
94 changes: 47 additions & 47 deletions packages/docs/components/Autocomplete.md

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/docs/components/Datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
| creator | Date creator function, default is `new Date()` | (() =&gt; Date) | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;creator: undefined<br>}</code> |
| customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: Date \| [] \| Date[] \| [Date, Date] \| null , state: ValidityState) =&gt; string) \| undefined | - | <code style='white-space: nowrap; padding: 0;'>""</code> |
| dayNames | Set custom day names, else use names based on locale | string[] | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;dayNames: undefined<br>}</code> |
| desktopModal | Dropdown content is shown into a modal on desktop | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;desktopModal: false<br>}</code> |
| disabled | Same as native disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| events | Events to display on picker | DatepickerEvent[] | - | |
| expanded | Makes input full width when inside a grouped or addon field | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
Expand All @@ -61,7 +62,7 @@
| maxDate | Max date to select | Date | - | |
| minDate | Min date to select | Date | - | |
| mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileBreakpoint: undefined<br>}</code> |
| mobileModal | Enable dropdown mobile modal | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileModal: true<br>}</code> |
| mobileModal | Dropdown content is shown into a modal on mobile | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileModal: true<br>}</code> |
| mobileNative | Enable mobile native input if mobile agent | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;mobileNative: false<br>}</code> |
| v-model | The input value state, use v-model to make it two-way binding | [] \| [Date, Date] \| Date \| Date[] | - | |
| monthNames | Set custom month names, else use names based on locale | string[] | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;monthNames: undefined<br>}</code> |
Expand All @@ -81,7 +82,6 @@
| showWeekNumber | Show week numbers | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;showWeekNumber: false<br>}</code> |
| size | Size of the control input | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
| teleport | Append the component to another part of the DOM.<br/>Set `true` to append the component to the body.<br/>In addition, any CSS selector string or an actual DOM node can be used. | boolean \| object \| string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;teleport: false<br>}</code> |
| trapFocus | Trap dropdown on focus | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;trapFocus: true<br>}</code> |
| type | Define picker mode | "date" \| "month" | `date`, `month` | <code style='white-space: nowrap; padding: 0;'>"date"</code> |
| unselectableDates | Define a list of dates which can not be selected | Date[] \| ((date: Date) =&gt; boolean) | - | |
| unselectableDaysOfWeek | Define a list of weeks which can not be selected | number[] | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>datepicker: {<br>&nbsp;&nbsp;unselectableDaysOfWeek: undefined<br>}</code> |
Expand Down
Loading
Loading