forked from quasarframework/quasar
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(a11y/QMenu/QDialog/QTabs): Add KeyGroupNavigation directive; Wra…
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
- Loading branch information
Showing
41 changed files
with
1,417 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| <template> | ||
| <div class="q-pa-md column no-wrap q-gutter-y-md" style="max-width: 500px"> | ||
| <q-btn color="black" label="First focusable element" /> | ||
|
|
||
| <q-bar v-key-group-navigation> | ||
| <q-btn flat dense color="black" no-caps label="File" class="q-px-sm"> | ||
| <q-menu> | ||
| <q-list dense style="min-width: 100px" v-key-group-navigation> | ||
| <q-item clickable v-close-popup> | ||
| <q-item-section>Open...</q-item-section> | ||
| </q-item> | ||
| <q-item clickable v-close-popup> | ||
| <q-item-section>New</q-item-section> | ||
| </q-item> | ||
|
|
||
| <q-separator /> | ||
|
|
||
| <q-item clickable> | ||
| <q-item-section>Preferences</q-item-section> | ||
| <q-item-section side> | ||
| <q-icon name="keyboard_arrow_right" /> | ||
| </q-item-section> | ||
|
|
||
| <q-menu anchor="top right" self="top left"> | ||
| <q-list v-key-group-navigation> | ||
| <q-item | ||
| v-for="n in 3" | ||
| :key="n" | ||
| dense | ||
| clickable | ||
| > | ||
| <q-item-section>Submenu Label</q-item-section> | ||
| <q-item-section side> | ||
| <q-icon name="keyboard_arrow_right" /> | ||
| </q-item-section> | ||
| <q-menu auto-close anchor="top right" self="top left"> | ||
| <q-list v-key-group-navigation> | ||
| <q-item | ||
| v-for="n in 3" | ||
| :key="n" | ||
| dense | ||
| clickable | ||
| > | ||
| <q-item-section>3rd level Label</q-item-section> | ||
| </q-item> | ||
| </q-list> | ||
| </q-menu> | ||
| </q-item> | ||
| </q-list> | ||
| </q-menu> | ||
| </q-item> | ||
|
|
||
| <q-separator /> | ||
|
|
||
| <q-item clickable v-close-popup> | ||
| <q-item-section>Quit</q-item-section> | ||
| </q-item> | ||
| </q-list> | ||
| </q-menu> | ||
| </q-btn> | ||
|
|
||
| <q-btn flat dense color="black" no-caps label="Edit" class="q-px-sm q-ml-md"> | ||
| <q-menu auto-close> | ||
| <q-list dense style="min-width: 100px" v-key-group-navigation> | ||
| <q-item clickable> | ||
| <q-item-section>Cut</q-item-section> | ||
| </q-item> | ||
| <q-item clickable> | ||
| <q-item-section>Copy</q-item-section> | ||
| </q-item> | ||
| <q-item clickable> | ||
| <q-item-section>Paste</q-item-section> | ||
| </q-item> | ||
| <q-separator /> | ||
| <q-item clickable> | ||
| <q-item-section>Select All</q-item-section> | ||
| </q-item> | ||
| </q-list> | ||
| </q-menu> | ||
| </q-btn> | ||
|
|
||
| <q-space /> | ||
|
|
||
| <q-btn dense flat icon="minimize" /> | ||
| <q-btn dense flat icon="crop_square" /> | ||
| <q-btn dense flat icon="close" /> | ||
| </q-bar> | ||
|
|
||
| <q-btn color="black" label="Last focusable element" /> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <template> | ||
| <div class="q-pa-md column no-wrap q-gutter-y-md" style="max-width: 500px"> | ||
| <q-btn color="black" label="First focusable element" /> | ||
|
|
||
| <!-- QEditor already uses the keyboard navigation inside --> | ||
| <q-editor v-model="editor" min-height="5rem" /> | ||
|
|
||
| <!-- QDate already uses the keyboard navigation inside --> | ||
| <q-date v-model="date" /> | ||
|
|
||
| <q-btn color="black" label="Last focusable element" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data () { | ||
| return { | ||
| editor: 'What you see is <b>what</b> you get.', | ||
| date: '2019/02/01' | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <template> | ||
| <div class="q-pa-md column no-wrap q-gutter-y-md" style="max-width: 500px"> | ||
| <q-btn color="black" label="First focusable element" /> | ||
|
|
||
| <q-list bordered padding v-key-group-navigation.vertical> | ||
| <q-item-label header>List with controls</q-item-label> | ||
|
|
||
| <q-item clickable v-ripple> | ||
| <q-item-section> | ||
| <q-item-label>Vertical navigation</q-item-label> | ||
| <q-item-label caption> | ||
| Navigate using <kbd>PG_UP</kbd>, <kbd>ARROW_UP</kbd>, <kbd>ARROW_DOWN</kbd>, <kbd>PG_DOWN</kbd> | ||
| </q-item-label> | ||
| </q-item-section> | ||
| </q-item> | ||
|
|
||
| <q-item clickable v-ripple> | ||
| <q-item-section> | ||
| <q-item-label>Horizontal navigation</q-item-label> | ||
| <q-item-label caption> | ||
| Navigate using <kbd>HOME</kbd>, <kbd>ARROW_LEFT</kbd>, <kbd>ARROW_RIGHT</kbd>, <kbd>END</kbd> | ||
| </q-item-label> | ||
| </q-item-section> | ||
| </q-item> | ||
|
|
||
| <q-item clickable v-ripple> | ||
| <q-item-section> | ||
| <q-item-label>Default</q-item-label> | ||
| <q-item-label caption> | ||
| Navigate using any of the above keys | ||
| </q-item-label> | ||
| </q-item-section> | ||
| </q-item> | ||
|
|
||
| <q-item tag="label" v-ripple> | ||
| <q-item-section side top> | ||
| <q-checkbox v-model="check" /> | ||
| </q-item-section> | ||
|
|
||
| <q-item-section> | ||
| <q-item-label>Notifications</q-item-label> | ||
| <q-item-label caption> | ||
| Notify me about updates to apps or games that I downloaded | ||
| </q-item-label> | ||
| </q-item-section> | ||
| </q-item> | ||
|
|
||
| <q-item tag="label" v-ripple> | ||
| <q-item-section> | ||
| <q-item-label>Battery too low</q-item-label> | ||
| </q-item-section> | ||
| <q-item-section side > | ||
| <q-toggle color="blue" v-model="notif" val="battery" /> | ||
| </q-item-section> | ||
| </q-item> | ||
| </q-list> | ||
|
|
||
| <q-btn color="black" label="Last focusable element" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data () { | ||
| return { | ||
| check: true, | ||
| notif: true | ||
| } | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.