-
Notifications
You must be signed in to change notification settings - Fork 736
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
Points popover and overflow #9616
Points popover and overflow #9616
Conversation
Build Artifacts
|
Tested with the DEB asset on Ubuntu 18.04, browsing as client from Firefox and Chrome on Windows 10 with NVDA. Keyboard navigation and the screen reader experience is actually not bad: everything is accessible and announced, and all the users have similar experience - points display when the button is pressed, no mater which navigation modality is used.
A part from the fact that actively trying to detect screen reader users is discouraged (and I'm not even sure there's a reliable way to do it), I don't think it's warranted here, since all users have the same experience (press-the-button-to-see-points). The only issue I see here is that the popover remains open even when user navigates away: they have to actively press again for button to close, not even mouse click anywhere else does it 😛 Bigger concern in this new implementation is the insufficient contrast for the text in the subpage menu links: too low even for the currently active page, and way, way low for the rest 😞 @pcenov Could you test the non-accessibility pieces (mobile views & RTL) that @marcellamaki listed in the reviewer guidance? Thank you! |
I was able to identify just the following couple of issues (valid in all supported browsers):
|
617e567
to
509ed5d
Compare
Thank you @pcenov and @radinamatic - will follow up on these issues and update! 😊 |
509ed5d
to
1aed6ec
Compare
@radinamatic @pcenov - I believe the contrast, coach navigation, popover "navigate away", and tooltip overlap should now all be addressed. (Please note that in this PR, for the purposes of testing there is a temporary reference to an in-progress KDS work that supports this. If this is merged before that, the tooltip will still be overlapping until the KDS update is also merged) |
@marcellamaki Looking great! Both the tooltip's overlapping of the menu items and coach navigation issues are now fixed. I just have a couple of questions: |
Re-tested the newest asset, contrast is now within the guidelines! 👏🏽 I can replicate the finding by @pcenov about the Enroll learners table occupying the full width of the page. Is that the new design because the table now has 5 columns instead of 2? I also second the observation that the tooltip does not seem necessary on touch interfaces. Anyways, it's not something that needs to be fixed in this PR, so going to approve 👍🏽 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Manual and a11y testing passed, good to go! 💯
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you, @marcellamaki, overall this is great work. I didn't test it as I can see that the QA team has already tested it. I posted some clarifying questions and several cleanup comments. I'd welcome it if we could try to resolve the issue with the hidden dependency before merging. If we don't find a better way, then it'd be good to make sure to at least comment that the problematic class is being used from outside of NavbarLink
.
kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue
Outdated
Show resolved
Hide resolved
kolibri/core/assets/test/horizontal-nav-bar-with-overflow.spec.js
Outdated
Show resolved
Hide resolved
kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, as soon as the remaining media query in Navbar/index.vue is resolved, I think this is ready to be merged. If you found out that the media query needs to stay there, could you just please commit comment on why this was the case?
Oh, I realized we shouldn't actually merge this until we can update package.json, so just posting a note here so that we don't forget |
Done! It was an oversight to not include with the other commits 🙃 |
cf5f950
to
a4eb0be
Compare
I updated the PR with the following
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When working on the above, I noticed that not all places using KDropdown
are updated to its new API. At some places, we're still using text
, disabled
, and appearance
props that have been removed from the corresponding KDS PR in learningequality/kolibri-design-system#346, for example
kolibri/kolibri/plugins/facility/assets/src/views/UserPage/index.vue
Lines 57 to 63 in 90ec651
<KDropdownMenu | |
:text="$tr('optionsButtonLabel')" | |
:options="manageUserOptions(userRow.user.id)" | |
:disabled="!userCanBeEdited(userRow.user)" | |
appearance="flat-button" | |
@select="handleManageUserSelection($event, userRow.user)" | |
/> |
We need to make sure to update KDropdown
usage in the whole Kolibri before merging. In the example above, we need to wrap KDropdown
component in a KDS button component and transfer text
, disabled
, and appearance
properties there. There are more places like this.
I will see if I can get continue working on this next week, already know that I won't have time to continue this week, so blocking now.
I pushed one more commit that updated our usage of Also, there's one more issue resulting in the console warning: but this needs to be addressed in KDS. I will do it tomorrow. |
I dismissed my review - it'd be good if someone else could review the last commit since I am the author. After that change is approved and @radinamatic confirms that this is good to go, should be ready for merge. |
A couple of updates in KDS inspired by the latest work I made in this branch are here learningequality/kolibri-design-system#361. It also fixes 'Property or method "disabled" is not defined on the instance but referenced during render.' It would be good to update package.json again here to point to the latest KDS develop as soon as learningequality/kolibri-design-system#361 is reviewed and merged. |
… fit in the appbar without any overflow
…te for KDropdownMenu)
…alue to not be undefined
…bing to next element
… used in overflow menu, to prevent overlay. Requires corresponding KDS update
…ing updates. To be updated once KDS PRs updates
8f840fd
to
5b11d34
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Final issues resolved.
Summary
This PR continues updates to the AppBar, making changes to the display of points and managing the overflow of navigation tabs in a new dropdown menu, rather than a horizontal overflow with scroll.
References
Fixes #9276
Fixes #9277
Points display
➡️ Note: out of scope was updating the icon, as I believe the icon design wasn't finalized at the time of dev handoff.
@radinamatic I did some preliminary testing using keyboard navigation, and also using Mac voiceover, and based on my very basic understanding, it seems functional 😄 but I know things are not always that straight forward. I added an aria label to the icon button, but if there are additional changes that can improve any parts of the accessibility experience, please do let me know. One other consideration I had thought about was - would there be any pros/cons to not having the popover for screenreader users, and rather directly having the aria label just read aloud the points information? I'm not sure if there is an easy way to do this or if there is WCAG guidance on these sorts of things.
Overflow display
The overflow display creates a new component which is responsible for checking the viewport width, and managing overflow by itself. It receives an array of navigation links. I think there is potential for further refactoring here, potentially to replace the intermediary
[Plugin]TopNav
entirely in a lot of places, but, I wanted to think/talk that through before jumping in. Would be happy to open and take on a follow up issue if that seems worthwhile to folks at this point in time.Reviewer guidance
Points popover
Overflow
Testing checklist
PR process
Reviewer checklist
yarn
andpip
)