From 5fb7009b695923d1746d17e0c5e8cb2268028ad3 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Mon, 23 Oct 2023 20:45:34 -0700 Subject: [PATCH 1/3] add expand all icon --- docs/rstIconReplacements.txt | 1 + lib/KIcon/iconDefinitions.js | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/rstIconReplacements.txt b/docs/rstIconReplacements.txt index b4150f688..52b12a1de 100644 --- a/docs/rstIconReplacements.txt +++ b/docs/rstIconReplacements.txt @@ -54,6 +54,7 @@ .. |environmentResource| replace:: :raw-html:`` .. |error| replace:: :raw-html:`` .. |exercise| replace:: :raw-html:`` +.. |expandAll| replace:: :raw-html:`` .. |facility| replace:: :raw-html:`` .. |filterList| replace:: :raw-html:`` .. |filter| replace:: :raw-html:`` diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js index 687d68970..1c64312ca 100644 --- a/lib/KIcon/iconDefinitions.js +++ b/lib/KIcon/iconDefinitions.js @@ -363,6 +363,7 @@ const KolibriIcons = { icon: require('./precompiled-icons/material-icons/expand_less/baseline.vue').default, }, collapseAll: { icon: require('./precompiled-icons/mdi/collapse-all.vue').default }, + expandAll: { icon: require('./precompiled-icons/mdi/expand-all.vue').default }, dragHorizontal: { icon: require('./precompiled-icons/le/drag_horizontal.vue').default }, // Setting a color for the points* icons - they don't use the color for their fill, but this ensures they're // displayed alongside other icons with a defaultColor From d6e10f20048280b6ad5d8ee3880de55c28003e01 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Wed, 15 Nov 2023 17:51:28 -0800 Subject: [PATCH 2/3] KDropdownMenu emits close and tab events for fine-tuned focus management When a user hits Tab they will leave the focus of the popover but currently the focus just returns to the root of the page rather than the next item in the dom. Here we do two things - first we emit a "close" event so that users can react on close. This is less necessary to the stated purpose but seems a worthy addition to allow us to react to the closing of a dropdown. The second is to emit a `tab` event which occurs when the user hits `tab`. Note that in this case, we pass the JS event so that it can be `preventDefault`-ed if needed (which was the motivation for this to begin with) lint --- lib/KDropdownMenu.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue index fc8d51c62..30410b775 100644 --- a/lib/KDropdownMenu.vue +++ b/lib/KDropdownMenu.vue @@ -123,6 +123,7 @@ sibling ? this.$nextTick(() => sibling.focus()) : this.$nextTick(() => this.setFocus()); // if a TAB key, not an arrow key, close the popover and advance to next item in the tab index } else if ((event.key == 'Tab' || event.keyCode == 9) && popoverIsOpen) { + this.$emit('tab', event); this.closePopover(); } }, @@ -134,6 +135,7 @@ this.closePopover(); }, closePopover() { + this.$emit('close'); this.$refs.popover.close(); }, focusOnButton() { From 7ecdb4cf04572050bbb932294fb91bd2756c22c9 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Tue, 28 Nov 2023 14:16:42 -0800 Subject: [PATCH 3/3] CHANGELOG - kdropdownmenu @tab/@close && expandAll icon --- CHANGELOG.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 383d35772..9f9bbad67 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 2.0.0 +- [#497] + - **Description:** KDropdownMenu now emits a @tab event when the user hits the [Tab] key and a @close event when the menu is closed programmatically. Additionally, a new icon for Expand All was added and can be used just like any other icon with the "expandAll" name. + - **Products impact:** updated API + - **Addresses:** - + - **Components:** KDropdownMenu + - **Breaking:** No + - **Impacts a11y:** Does this change improve a11y or adds new features that can be used to improve it? Choose from: yes / no + - **Guidance:** The @tab event can be used for more precise focus management as the popover by default could end up sending focus to the root HTML element by default. Note that the browser event is passed to the handler function, so you may need/want to call `preventDefault()` on that event depending on your use case. + + [#497]: https://github.com/learningequality/kolibri-design-system/pull/497 + - [#491] - **Description:** Replaced setTimeout with requestAnimationFrames in tests for useKWindowDimensions and useKResponsiveWindow - **Products impact:** - @@ -16,7 +27,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Impacts a11y:** no - **Guidance:** - -[#491]: [https://github.com/learningequality/kolibri-design-system/pull/491] + [#491]: [https://github.com/learningequality/kolibri-design-system/pull/491] - [#478] - **Description:** Changed _dev-only to dev-only @@ -26,7 +37,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** no - **Impacts a11y:** no - **Guidance:** - - + [#478]: https://github.com/learningequality/kolibri-design-system/pull/478 - [#482] @@ -37,7 +48,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** no - **Impacts a11y:** no - **Guidance:** - - + [#482]: https://github.com/learningequality/kolibri-design-system/pull/482 - [#464]