-
-
Notifications
You must be signed in to change notification settings - Fork 174
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
Dropdown styles for language and year switcher #1214
Conversation
Intent: Redesign of year and language switcher Major Changes: - Introduce two new macros 'styled_lang_dropdown' and 'styled_year_dropdown' - Existing DOM structure is retained and logic to generate those have been moved into 'native_year_dropdown' and 'native_lang_dropdown' - Existing select-and-option structure will be used for mobile view where native dropdown picker of the OS will be used UI/UX details: - The button which triggers dropdown will look attached to the dropdown that comes up - Dropdown list will be aligned to the left edge of button if the entire dropdown content can fit into the viewport - Else, Right edge of Dropdown list will be aligned to the right edge of button - Chevron in the button will animate to a check mark when the list is opened - On hover of the items in dropdown menu, its background color and font color will change Testing: - Manually verified the behaviour of both the switchers - Verified that options are keyboard focusable (Once menu is open the list items are Tab-able, clicking Tab on last option navigates out of the list to the next focusable element) - Verified that options are reachable via screen reader also
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.
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.
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.
This is looking pretty good now. Just a few more changes required.
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.
This is looking really nice now.
A few things I've spotted (some of these might be in the "nit" category!):
More noticable in Chrome 86 (thanks to the focus-visible
change), Firefox and Safari is that the border is split - the button is yellow, but the button drop down is white which breaks the illusion of it being one menu item. Is it possible to make it all yellow when button is in focus?
On a similar note there's a small, one-pixel gap between the borders. Is it possible to close this gap?
The keyboard focus ring is a bit hidden when first menu item is focused due to z-index changes:
Also not loving use of z-index
to be honest but can understand why you have done it. Not sure if there is a a better way that would solve above and avoid using z-index?
Maybe we should just accept the white border in the bottom instead of trying to fake this? That would avoid needing to use Another thing I've noticed is that pressing up on the top item cycles right to the bottom. This kind of makes sense but acts weird on Year switcher where there is only one item. Should we include the button (i.e. the current selection) as an option in the arrow key cycle up and down? |
The one pixel gap, is because of the way we wanted it to look like a single polygon and do not want white border between button and menu list, and hence the cover up with gray bottom border for button (and z-index is required because list is absolute positioned) |
Yeah can see that rational. Ultimately we need to decide if we want this to look and act like a single list or not. At the moment we have a kind of halfway-house. And remember A11Y is not just about blind people - sighted keyboard users could easily be confused if it looks like one list but then doesn't act like one. Personally I think add the white line to clearly differentiate between the menu and the button and solves most of these problems. It's still a small problem for the year selector since it only has one value at the moment - it will be clearer in future when there are more values and maybe we just take the hit until then. Or perhaps add a "Help Contribute" link like the "Help Translate". |
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.
Noticed we've got some duplicate ids
with this, so suggested a couple of changes to solve this. May want to rename mobile
to mobile-header
too for consistency.
Could you also merge the latest main
branch into this branch as there are a couple of changes since this branch was started that will lint the generated HTML which would have caught this?
* Translate-pt contributors.html * Translate-pt error.html * Update error.html * Update src/templates/pt/2019/error.html Co-authored-by: Barry Pollard <[email protected]> * Update src/templates/pt/2019/error.html Co-authored-by: Barry Pollard <[email protected]> * Update src/templates/pt/2019/contributors.html Co-authored-by: Barry Pollard <[email protected]> * Portuguese translation of base template 2020 * Portuguese translation of base template * Portuguese translation of base template * Portuguese translation of base template * Update src/templates/pt/2019/error.html Co-authored-by: Barry Pollard <[email protected]> Co-authored-by: Barry Pollard <[email protected]>
Co-authored-by: bazzadp <[email protected]>
Bumps [ejs](https://github.com/mde/ejs) from 3.1.3 to 3.1.5. - [Release notes](https://github.com/mde/ejs/releases) - [Changelog](https://github.com/mde/ejs/blob/master/CHANGELOG.md) - [Commits](mde/ejs@v3.1.3...v3.1.5) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: bazzadp <[email protected]>
* Lint all files on Super Linter upgrade * Fix version
* Few small perf fixes for home page * Optimised images with calibre/image-actions Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: bazzadp <[email protected]>
Bumps [node-fetch](https://github.com/bitinn/node-fetch) from 2.6.0 to 2.6.1. - [Release notes](https://github.com/bitinn/node-fetch/releases) - [Changelog](https://github.com/node-fetch/node-fetch/blob/master/docs/CHANGELOG.md) - [Commits](node-fetch/node-fetch@v2.6.0...v2.6.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [peter-evans/create-pull-request](https://github.com/peter-evans/create-pull-request) from v3.2.0 to v3.3.0. - [Release notes](https://github.com/peter-evans/create-pull-request/releases) - [Commits](peter-evans/create-pull-request@v3.2.0...44f76dd) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
* CMS 2020 * WIP: Start on the 2020 CMS Queries * update to 2020-08-01 * Core Web Vitals by CMS * CWV distribution * Lighthouse * add results sheet URL to README * new query for CMS adoption YoY without client breakdown * Update from 2019 to 2020 Co-authored-by: Artem Denysov <[email protected]> Co-authored-by: Greg Brimble <[email protected]> Co-authored-by: Artem Denysov <[email protected]>
* COUNT(0) and newlines * Add date columns to dated Almanac tables
Bumps [pytest](https://github.com/pytest-dev/pytest) from 6.0.1 to 6.0.2. - [Release notes](https://github.com/pytest-dev/pytest/releases) - [Changelog](https://github.com/pytest-dev/pytest/blob/master/CHANGELOG.rst) - [Commits](pytest-dev/pytest@6.0.1...6.0.2) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
* pwa candidates * pwa candidates * pwa helpers * pwa readme
This reverts commit b99abef.
Thanks @bazzadp for helping with the rebase issue for this branch |
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.
LGTM! Great job and thanks for being so patient through all the feedback!
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.
This is so well done, thank you @sudheendrachari! 🏆
I just have two small keyboard usability comments about the footer.
Fixes: #986
Intent: Redesign of year and language switcher
Major Changes:
'native_year_dropdown' and 'native_lang_dropdown'
OS will be used
UI/UX details:
viewport
Testing:
clicking Tab on last option navigates out of the list to the next focusable element)
Demo:
Mouse and Keyboard: https://drive.google.com/file/d/15-BA8r5e8QbaSi5MiuvZ4Q18L0wYzzlE/view
Voice-over: https://drive.google.com/file/d/17wkCvS7lISqwDVHXlBbsZXUDwHdL7LIx/view