Support for Quiz Management (Kolibri 0.17)

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]

docs/rstIconReplacements.txt

@@ -54,6 +54,7 @@
 .. |environmentResource| replace:: :raw-html:`<span class="design-system-icon"><svg role="presentation" focusable="false" width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.333 13.333c-15 3.334-18.5 13.617-21.966 22.234l3.15 1.1 1.583-3.834c.8.284 1.633.5 2.233.5C31.667 33.333 36.667 5 36.667 5 35 8.333 23.333 8.75 15 10.417 6.667 12.083 3.333 19.167 3.333 22.5s2.917 6.25 2.917 6.25c5.417-15.417 22.083-15.417 22.083-15.417z"/></svg></span>`
 .. |error| replace:: :raw-html:`<span class="design-system-icon design-system-icon-color-error"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></span>`
 .. |exercise| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg></span>`
+.. |expandAll| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M18 8H8v10H6V8a2 2 0 012-2h10v2m-4-6H4a2 2 0 00-2 2v10h2V4h10V2m8 10v8a2 2 0 01-2 2h-8a2 2 0 01-2-2v-8a2 2 0 012-2h8a2 2 0 012 2m-2 3h-3v-3h-2v3h-3v2h3v3h2v-3h3v-2z"/></svg></span>`
 .. |facility| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg></span>`
 .. |filterList| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg></span>`
 .. |filter| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg></span>`

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() {

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