Improve tooltip accessibility #1749
Merged
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
KonnorRogers
approved these changes
Nov 30, 2023
| if (this.open && !this.disabled && event.key === 'Escape') { | ||
| private handleDocumentKeyDown = (event: KeyboardEvent) => { | ||
| // Pressing escape when a tooltip is open should dismiss it | ||
| if (event.key === 'Escape') { | ||
| event.stopPropagation(); |
There was a problem hiding this comment.
Not related to the PR, but any reason we stopPropagation() here?
There was a problem hiding this comment.
We call this because it's listening on the document, and if you have a tooltip inside of a dialog (or similar) then the event will trigger the ancestor(s) listeners, causing them to close as well.
CrookedGrin
added a commit
to teamshares/shoelace
that referenced
this pull request
Mar 11, 2024
* move emphasis * don't hijack key presses in text fields; fixes shoelace-style#1492 (shoelace-style#1504) * Fix missing comma in linear-gradient (shoelace-style#1506) * React import paths (shoelace-style#1507) * fix react imports in examples * move types to definition files * update changelog * update changelog * update changelog * 2.7.0 * JetBrains IDE Integration (shoelace-style#1512) * upgrade vs code integration package * add references * add web-types plugin * update reference * run prettier * update documentation * run prettier * remove test script * fix arg name * Add docs on setting multiple values in select (shoelace-style#1508) * update docs * fix broken tests for shoelace-element (shoelace-style#1516) * add stub code prior to test * fix broken test * prettier * prettier * prettier * Fix NPMDIR config (shoelace-style#1518) * Fix NPMDIR config * Add missing semi * Radio button fix (shoelace-style#1524) * fix formatting * fix radio button spacing; fixes shoelace-style#1523 * ignore package.json * fix(docs): Inline Form Validation Docs throw error on top level await (shoelace-style#1522) * Update for path changes see 3a61d20 * Fix lint warnings * SlTree: separate expand/collapse and selection behaviour in 'single' mode (shoelace-style#1521) * Never select tree items when clicking the chevron This changes the behaviour of sl-tree so that clicking on the expand/collapse icon will not select/deselect the item, only toggle it's expanded state. * Refactor: inline SlTree.syncTreeItems This was only called from 2 places, and they each had different behaviour anyways. * SlTree: separate expand/collapse from selection This makes 'multi' and 'single' mode consistent with each other, and with native file managers. * prettier * Add HTMLElement to the getTag() return type * fix tree tests; shoelace-style#1521 * update docs * Update React Wrappers with Refs that work (shoelace-style#1526) * fix react types for refs * fix displayName * fix displayName] * attempt to fix typings for React refs * fix bad type * prettier * add changelog entry * prettier * Submenus (shoelace-style#1527) * [RFC] Proof-of-concept commit for submenu support This is a Request For Comments to seek directional guidance towards implementing the submenu slot of menu-item. Includes: - SubmenuController to manage event listeners on menu-item. - Example usage in menu-item documentation. - Trivial tests to check rendering. Outstanding questions include: - Accessibility concerns. E.g. where to handle 'ArrowRight', 'ArrowLeft'? - Should selection of menu-item denoting submenu be possible or customizable? - How to parameterize contained popup? - Implementation concerns: - Use of ref / id - delegation of some rendering to the controller - What to test Related to [shoelace-style#620](shoelace-style#620). * Update submenu-controller.ts Removed extraneous `console.log()`. * PoC working of ArrowRight to focus on submenu. * Revert "PoC working of ArrowRight to focus on submenu." (Didn't mean to publish this.) This reverts commit be04e9a. * [WIP] Submenu WIP continues. - Submenus now close on change-of-focus, not a timeout. - Keyboard navigation support added. - Skidding fix for better alignment. - Submenu documentation moved to Menu page. - Tests for accessibility, right and left arrow keys. * Cleanup: Removed dead code and dead code comments. * style: Eslint warnings and errors fixed. npm run verify now passes. * fix: 2 changes to menu / submenu on-click behavior: 1. Close submenu on click explicitly, so this occurs even if the menu is not inside of an sl-dropdown. 2. In menu, ignore clicks that do not explicitly target a menu-item. Clicks that were on (e.g. a menu-border) were emitting select events. * fix: Prevent menu's extraneous Enter / space key propagation. Menu's handleKeyDown calls item.click (to emit the selection). Propagating the keyboard event on Enter / space would the cause re-entry into a submenu, so prevent the needless propagation. * Submenu tweaks ... - 100 ms delay when opening submenus on mouseover - Shadows added - Distance added to popup to have submenus overlap menu slightly. * polish up submenu stuff * stay highlighted when submenu is open * update changelog * resolve feedback --------- Co-authored-by: Bryce Moore <bryce.moore@gmail.com> * remove baseUrl from tsconfig for better dev experience (shoelace-style#1530) * remove extra react component wrapper, upgrade to v2 of @lit-labs/react (shoelace-style#1531) * remove extra react wrapper, upgrade to v2 of @lit-labs/react, call define in module. * add changelog entry * prettier * fix empty attributes in properties table (shoelace-style#1536) * use <sl-copy-button> (shoelace-style#1535) * fix copy button focus * fix plop template * fix component links; closes shoelace-style#1538 * fix: use verbatimModuleSyntax and isolatedModules (shoelace-style#1534) * feat: use verbatimModuleSyntax and isolatedModules * prettier * remove newline * prettier * fix: check `<slot>` elements for assignedElements to allow wrapping focus-trapped elements (shoelace-style#1537) * fix: internal logic for tabbable checks slotted elements * prettier * add better note for generators * prettier * fix tests * prettier * prettier * fix tabbable test for safari * prettier * Update src/internal/tabbable.ts Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * Update src/internal/modal.ts Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * Update src/internal/tabbable.ts Co-authored-by: Cory LaViska <cory@abeautifulsite.net> --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * remove unused code path (shoelace-style#1539) * update version * 2.8.0 * reformat by CEM plugin * fix stuck search * log stderr in builds (shoelace-style#1543) * fix spacing; shoelace-style#1540 (shoelace-style#1544) * update ctrl/tinycolor; fixes shoelace-style#1542 (shoelace-style#1545) * show errors in dev server (shoelace-style#1547) * show errors in dev server * fix build * prettier * fix web-types reference * clean up messaging * simplify implementation * fix: make German translation more consistent + neutral (shoelace-style#1558) In German you can say "Du" (=informal) or "Sie" (= formal). Before this commit both versions were used at the same time. It is preferred to make interfaces neutral, as some systems use "Du" (iOS, macOS) and some "Sie" (MS, Android). In addition all other translations were neutral, too, so this makes it more consistent. * remove webtypes * update bootstrap icons * fix(autoloader): only attempt to register root element if it's shoelace element (shoelace-style#1563) * update changelog * updated react wrapper (shoelace-style#1565) - updated @lit-labs/react to latest version with improved type compatibility - added small preact section to the react docs with link to preact/compat typescript config guide * fix: add missing super.disconnectCallback() calls (shoelace-style#1564) * fixes shoelace-style#1548 * ONLY-USE: Fix bug: svg url treated as sprite * Fixed typo (Alert doc): "take affect" -> "take effect" (shoelace-style#1578) One of the examples given in the documentation for Alerts says "Settings will take **affect** on next login". Which is a typo since affect is a verb, not a noun. * fix words; shoelace-style#1578 * fixes shoelace-style#1576 * add support for external modals; fixes shoelace-style#1571 (shoelace-style#1575) * rename private var; shoelace-style#1572 * update changelog * update version * 2.9.0 * update changelog * ignore package.json * fix localize bug * comma separate exportparts (shoelace-style#1586) Fixes shoelace-style#1585. * update changelog * add PR * fix focus trapping to respect the currently focused element (shoelace-style#1583) * fix focus trapping to respect the currently focused element * prettier * remove index.html * fix activeElements * prettier * update changelog * prettier * add docs for web-types (shoelace-style#1608) * add docs for web-types * add missing word * Create zh-cn.ts (shoelace-style#1604) * update changelog * Add safe triangle for submenu selection (shoelace-style#1600) * add safe triangle; fixes shoelace-style#1550 * make z-index relative to submenu * refactor submenu properties * Fire `sl-select` when clicking an element inside a menu-item (shoelace-style#1599) * Fire sl-select when clicking an element inside a menu-item * changelog + remove unused code * prettier * prettier --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * update deps (all but majors) * typescript + esbuild updates * lit 3, eslint, lint-stages updates * update prettier * update plop, ora, sinon * Updated @lit-labs/react to @lit/react now as this is stable * Updated @lit-labs/react to @lit/react now as this is stable * remove whitespace * use discussions for features * Fix `tabbable` performance issues in Chrome / Edge (shoelace-style#1614) * fix: improve tabbable performance * add note about composed-offset-position * update package.json * prettier * prettier * prettier * update changelog * Update carousel.md to document the default aspect ratio of 16/9. (shoelace-style#1617) * remove unused dep * update default * update comments * oh, safari (shoelace-style#1655) * update version * prettier * 2.10.0 * Create hr.ts (shoelace-style#1656) * update changelog * don't block escape; fixes shoelace-style#1607 (shoelace-style#1661) * Fix placeholder color in sl-select (shoelace-style#1667) * fix placeholder color in sl-select * add issue number * fix details example * fix empty react index; closes shoelace-style#1659 (shoelace-style#1663) * Update angular.md (shoelace-style#1670) Added more instructions for clearity about what to do * prettier * update version * prettier * 2.11.0 * fix script in docs; closes shoelace-style#1670 * Update angular.md (shoelace-style#1671) removed the < brackets Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * fix: multiple slides per page navigation (shoelace-style#1605) * fix(carousel): change navigation logic * chore: update tests * chore: create polyfill for scrollend * chore: add unit tests and clean up * chore: leftover * chore: minor fix * chore: avoid initialization for clones * fix(carousel): update page navigation logic * chore(carousel): revert change * chore(carousel): minor changes * chore: update pagination logic * fix: enforce slidesPerMove value * update changelog * remove ts-check * fix cspell and ts * fix slotted image dimensions * update version * 2.11.1 * fix(carousel): add instance check to isCarouselItem (shoelace-style#1684) * update changelog * 2.11.2 * fix issues with no translation errors for bundled components (shoelace-style#1696) * only emit sl-change when you stop dragging (shoelace-style#1689) * only emit sl-change when you stop dragging * only emit sl-change when you stop dragging * prettier * add changelog entry * update changelog * update changelog * update changelog * upgrade jet brains plugin and stop writing to package.json * Add loading attribute to menu-item * Updates copy button with Bootstrap Icons 1.11 (shoelace-style#1702) * update changelog * Keep text shown * fix form controls to read from property instead of attribute (shoelace-style#1707) * fix form controls to read from properties and attributes * update changelog * prettier * update changelog * prettier * small comment fix * Fix form controls entering / leaving a form (shoelace-style#1708) * fix dynamic form controls * update comment * add form.checkValidity() * prettier * Fix React .d.ts files to import from valid path; fixes shoelace-style#1713 (shoelace-style#1714) * Fix nested dialogs (shoelace-style#1711) * fix nested dialog focus * fix nested dialog focus * fix nested dialog focus * prettier * remove index.html * fix tests * prettier * add two-way binding info back * removes duplicative style declaration in the skeleton component (shoelace-style#1722) * Add italian translations (shoelace-style#1727) Co-authored-by: Andrea Folini <andrea.folini@skillbill.it> * update changelog * prettier * update WTR * temp disable webkit * re-enable webkit tests * update playwright version for webkit * update playwright install cmd * fix * update deprecated properties * skip because firefox * skip because ff * skip ff * 2.12.0 * Small typo (shoelace-style#1728) * Fix 'controlled' typo (shoelace-style#1735) * more ff test skips * restore ff tests * try node 20 * revert * fix a11y error * temporarily disable FF in Web Test Runner * prettier * Run web test runner with production modules (shoelace-style#1736) * Run web test runner with production modules * prettier * Reduce size * Improve tooltip accessibility (shoelace-style#1749) * always close on escape, even when not focused; shoelace-style#1734 * use fallbacks instead of defaults * add words * add safe trapezoids / hover bridge; fixes shoelace-style#1734 * oh, webkit * remove unused import * cleanup just in case * Fixes `setRangeText()` in `<sl-input>` and `<sl-textarea>` (shoelace-style#1752) * fix setSelectionRange(); fixes shoelace-style#1746 * remove comment * remove console.log * remove unused style * Further improve tabbable performance (shoelace-style#1750) * improve tabbable performance * improve tabbable performance * add PR # * prettier * change to getSlottedChildrenOutsideRootElement * prettier * Make sure `<sl-select>` closes when focusing out (shoelace-style#1764) * fixes shoelace-style#1763 * fix comment * 🤷🏻♂️ * whatever wtr * Add .d.ts files to theme style.js files (shoelace-style#1767) * prettier * moar prettier * No more pipes (shoelace-style#1771) * a little whitespace never hurt nobody * remove pipes from docs * fix trimPipes * update; shoelace-style#1700 * Account for elements with tabbable controls (shoelace-style#1755) * account for elements with tabbable controls * prettier * add changelog entry * prettier * Add missing extensions (shoelace-style#1770) * fix(typescript): add missing extension to imports in typescript This is required for the types to work with the new `--module-resolution=node16`. The list of places to fix was obtained by a crude script: ```sh rg -g'**/*.ts' -g'!**/*.test.ts' ' from\s+.\.' | rg -v '\.js' ``` References shoelace-style#1765 * add missing extensions * revert tsconfig * prettier * fix test files for NodeNext * prettier * changelog entry * prettier * prettier * prettier --------- Co-authored-by: Andrey Lushnikov <aslushnikov@gmail.com> * fix(spinner): fix spinner animation, prevent spinner resize in flex containers (shoelace-style#1787) * update settings * update changelog; shoelace-style#1787 * reformat comment * fix typo * fixes shoelace-style#1730 (shoelace-style#1820) * fixes shoelace-style#1805 (shoelace-style#1821) * fixes shoelace-style#1795 (shoelace-style#1822) * fixes shoelace-style#1823 (shoelace-style#1826) * fixes shoelace-style#1779 (shoelace-style#1828) * fix(color-picker): add missing percent signs (shoelace-style#1831) * update changelog * Add Radio Group `help-text` slot documentation (shoelace-style#1818) * add vue types (shoelace-style#1797) * add vue types * run prettier * add postinstall script for playwright * Update docs/pages/frameworks/vue.md --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * fix(carousel): fix issues with safari (shoelace-style#1748) * fix(carousel): fix scrollend polyfill * fix(carousel): refactor mouse dragging * chore: revert original mouse dragging implementation * fix: add workaround for safari * chore: add unit tests * chore: minor changes * chore: revert change * chore: skip test case * chore: revert changes to docs * chore: remove leftover * update changelog; shoelace-style#1748 * fix dialog focus trapping behavior (shoelace-style#1813) * fix dialog focus trapping behavior * add changelog entry * prettier * remove duplicate 'disabled' check in tabbable * fix dialog stuff * prettier * fix logic around checking active elements * prettier * prettier * remove cusrtom-elements.mjs --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * Fixing the initial values on doc (shoelace-style#1785) This commit replaces the string-based 'value' prop with an array in the documentation example related to multiple selection in Shoelace's React components. * internals: refactor stop animations resolve mechanism (shoelace-style#1780) * internals: refactor stop animations resolve mechanism * remove cancel/finish listeners from stop animations function * Use close watcher when supported in place of escape key handlers (shoelace-style#1788) * Use close watcher when supported in place of escape key handlers * Update src/components/select/select.component.ts --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * update changelog * prettier * ignore types * whitespace * don't ignore * remove old test * remove unused import * 2.13.0 * no more tomatoes (shoelace-style#1836) * 2.13.1 * remove html from getTextLabel() (shoelace-style#1840) * fix animated image documentation for CSS part (shoelace-style#1838) * add switch help text (shoelace-style#1800) * Add checkbox help text (shoelace-style#1860) * add help text to sl-checkbox to match sl-switch * add missing import * locale: add Arabic translation (shoelace-style#1852) * update changelog * update changelog * fix(carousel): remove check for scrolling (shoelace-style#1862) * update changelog * fix help text a11y * Import styles more efficiently (shoelace-style#1861) * import styles more efficiently; fixes shoelace-style#1692 * remove scale transition * add missing import to template * remove styles from template * update install event from `postinstall` to `prepare` (shoelace-style#1868) * update lock file * update version * 2.14.0 * Updated package-lock * Working locally * Update `<sl-spinner>` merge conflict changes after reviewing locally * Interim fix for Checkbox label alignment; Add back checkbox help text example * Replace Checkbox `description` slot with `help-text` * Re-add Switch and Menu Item examples missed during merge * Commenting out unused methods * Prettier * Update spinner.test.ts --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> Co-authored-by: king8fisher <140904760+king8fisher@users.noreply.github.com> Co-authored-by: Burton Smith <31320098+break-stuff@users.noreply.github.com> Co-authored-by: Alexander Krolick <104371843+ak-beam@users.noreply.github.com> Co-authored-by: Konnor Rogers <konnor5456@gmail.com> Co-authored-by: Peter Siska <63866+peschee@users.noreply.github.com> Co-authored-by: Thomas Allmer <d4kmor@gmail.com> Co-authored-by: nathan <nathangray.bsc+github@gmail.com> Co-authored-by: Stephen Sugden <grncdr@users.noreply.github.com> Co-authored-by: Bryce Moore <bryce.moore@gmail.com> Co-authored-by: Burton Smith <burton@breakstuff.io> Co-authored-by: Mario Hamann <mario.hamann@virtual-identity.com> Co-authored-by: Wes <wes@goulet.dev> Co-authored-by: Alan Chambers <ajmchambers@users.noreply.github.com> Co-authored-by: Christian Schuller <cschuller@servusalps.com> Co-authored-by: Yehuda Ringler <yehuda.ringler@chabad.org> Co-authored-by: mfocqueteau <48293117+mfocqueteau@users.noreply.github.com> Co-authored-by: Cam Skene <camskene@gmail.com> Co-authored-by: jarviszheng <zhengjun.whizz@gmail.com> Co-authored-by: Christian Schilling <christian.schilling@sick.de> Co-authored-by: John F Morton <john@johnfmorton.com> Co-authored-by: fountainpen <parsifal02@msn.com> Co-authored-by: floflausch <58124366+floflausch@users.noreply.github.com> Co-authored-by: Alessandro <misterroot@gmail.com> Co-authored-by: Mitch Ray <5735900+mitchray@users.noreply.github.com> Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics> Co-authored-by: Coridyn <coridyn@widgetworks.com.au> Co-authored-by: Nick Lemmon <nick.lemmon@gmail.com> Co-authored-by: folini96 <38253919+folini96@users.noreply.github.com> Co-authored-by: Andrea Folini <andrea.folini@skillbill.it> Co-authored-by: Rikard Kling <rikard@mighty.se> Co-authored-by: Matt Obee <github@mattobee.com> Co-authored-by: Ryan <kwivix@users.noreply.github.com> Co-authored-by: Andrey Lushnikov <aslushnikov@gmail.com> Co-authored-by: Michael Warren <michaelwarren1106@gmail.com> Co-authored-by: clintcs <114178960+clintcs@users.noreply.github.com> Co-authored-by: YassSSH <65927815+YassSSH@users.noreply.github.com> Co-authored-by: Matin <52866914+Matin297@users.noreply.github.com> Co-authored-by: Luke Warlow <lwarlow@igalia.com> Co-authored-by: Ahmad Alfy <ahmadalfy@gmail.com> Co-authored-by: Sara <slhinyc@users.noreply.github.com>
This was referenced May 28, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes both issues described in #1734.