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

Support for Quiz Management (Kolibri 0.17) #497

Merged
merged 3 commits into from
Nov 29, 2023

Conversation

nucleogenesis
Copy link
Member

@nucleogenesis nucleogenesis commented Nov 28, 2023

Description

  • Adds new "Expand All" icon
  • Updates KDropdownMenu to emit a @tab event when the [[Tab]] key is pressed.
  • Updates KDropdownMenu to emit the @close event when the menu is programmatically closed.

Changelog

  • [Support for Quiz Management (Kolibri 0.17) #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.

After review

  • The changelog item has been pasted to the CHANGELOG.md

Comments

Originally this work was in #465 but this new PR is specifically the things needed for the work on Quiz 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
Copy link
Member

@marcellamaki marcellamaki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you @nucleogenesis

@nucleogenesis nucleogenesis merged commit 0ed2f27 into main Nov 29, 2023
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants