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 add focus management for toolbar #30

Merged
merged 28 commits into from
Apr 2, 2020
Merged
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
4516834
test: add a focussable link ahead of markdown-toolbar in example
keithamus Mar 17, 2020
a19ded0
feat: add focus management for toolbar
keithamus Mar 17, 2020
987b5a2
test: change example link to button
keithamus Mar 18, 2020
72c0c73
feat: use `data-md-button` to select for focus management
keithamus Mar 18, 2020
fc01316
feat: use delegated event listener for keyboard focus
keithamus Mar 18, 2020
bf0fde1
fix: remove MarkDownButtonElement instance check
keithamus Mar 18, 2020
fa869bd
fix: check currentTarget is closest to button invoking keypress
keithamus Mar 18, 2020
95b19a5
refactor: drop unecessary binding on focusKeydown
keithamus Mar 18, 2020
538ff34
refactor: use md-* selectors where possible
keithamus Mar 19, 2020
311e8c6
refactor: move tabIndex assigment to markdown-toolbar
keithamus Mar 19, 2020
054b4c3
test: add test for generic data-md-button elements
keithamus Mar 19, 2020
98ed87f
refactor: DRY up indexOf calls
keithamus Mar 19, 2020
abafcb6
style: drop erroneous console.log
keithamus Mar 19, 2020
f1bfaba
refactor: DRY up buttons.length
keithamus Mar 19, 2020
7fef62f
refactor: move needless if condition out of loop
keithamus Mar 19, 2020
014e98f
style: add return type annotation for getButtons function
keithamus Mar 24, 2020
e6e2ae0
style: add type guard to buttons
keithamus Mar 24, 2020
33a7ceb
refactor: move element selectors to assignment
keithamus Mar 26, 2020
baa5138
fix: filter out hidden elements
keithamus Mar 26, 2020
715efc8
fix: do not focus on buttons that are hidden via CSS
keithamus Mar 27, 2020
85206b2
fix: make focus management lazy, on focus of toolbar.
keithamus Mar 31, 2020
ee95e9d
fix: Home/End shortcuts should preventDefault
keithamus Mar 31, 2020
4d6dbc8
test: add hidden toolbar to examples
keithamus Mar 31, 2020
44edfbc
test: fixup example & test html
keithamus Apr 1, 2020
d91d2f0
fix: apply focus event listener only once
keithamus Apr 1, 2020
434e68c
style: move let binding closer to first use
keithamus Apr 1, 2020
b8777de
docs: add README note about data-md-button
keithamus Apr 1, 2020
dcfdbd7
docs: clarify focus management in readme
keithamus Apr 2, 2020
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
Prev Previous commit
docs: clarify focus management in readme
Co-Authored-By: Mu-An 慕安 <me@muanchiou.com>
  • Loading branch information
keithamus and muan authored Apr 2, 2020
commit dcfdbd7845ef97db641f7e624762fa5f73805dbc
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import '@github/markdown-toolbar-element'
<textarea id="textarea_id"></textarea>
```

Focus management for buttons inside of the toolbar is automatically managed by the toolbar itself. The `md-*` buttons that ship with this package are automatically managed, but custom buttons needs a `data-md-button` attribute added to them, which enrolls them into focus management.
`<markdown-toolbar>` comes with focus management as advised in [WAI-ARIA Authoring Practices 1.1: Toolbar Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/examples/toolbar/toolbar.html). The `md-*` buttons that ship with this package are automatically managed. Add a `data-md-button` attribute to any custom toolbar items to enroll them into focus management.

## Browser support

Expand Down