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.

Sign up for GitHub

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

Jump to bottom

Tweak language toggler #2566

Merged
merged 1 commit into from
Sep 26, 2019
Merged

Tweak language toggler #2566

merged 1 commit into from
Sep 26, 2019

Conversation

XhmikosR
Copy link
Contributor

@XhmikosR XhmikosR commented Sep 10, 2019 •
edited
Loading

Fixes #2545

@XhmikosR XhmikosR mentioned this pull request Sep 10, 2019
Closed
@XhmikosR
Copy link
Contributor Author

XhmikosR commented Sep 25, 2019 •
edited
Loading

@moshfeu please try this branch. Live preview: https://affectionate-almeida-a9f620.netlify.com/en/

It might need some further styling tweaks, but I think it's a big improvement already. In order for ESC to close the menu, well need more JS to handle this, but let's leave it for later.

/CC @nodejs/website (not sure if I can CC you guys, probably not)

@XhmikosR XhmikosR marked this pull request as ready for review September 25, 2019 12:36
@XhmikosR XhmikosR changed the title Tweak lang toggler Tweak language toggler Sep 25, 2019
moshfeu
moshfeu approved these changes Sep 25, 2019
View reviewed changes
Copy link

@moshfeu moshfeu left a comment

Choose a reason for hiding this comment

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

Looking very good to me.
If they will take that PR (I hope so), it will worth to keep improve this component.

@XhmikosR
Copy link
Contributor Author

Maybe I should wrap the ul in a nav?

@XhmikosR
Tweak language toggler.
57e1ed5 
* reduce the IDs usage
* reduce data attributes
* use classes
* keyboard navigation works now
@moshfeu
Copy link

moshfeu commented Sep 25, 2019

It's very opinion based but I spoke with accessibility expert some time ago and he actually didn't recommended to use nav because it's not a navigation action but sort of setting a configuration action. It's not a different page but the same page with different view.

The code also says something like that. Navigation will keep a record in the history, while the code replace the record:

nodejs.org/layouts/partials/header.hbs

Line 61 in 2026c6a

window.location.replace(window.location.pathname.replace(/\/[a-zA-Z-]+/, '/' + newLocale))

@XhmikosR
Copy link
Contributor Author

That's something that needs to change BTW, see #2541.

@XhmikosR
Copy link
Contributor Author

Anyway, I'll freeze the changes for now so that this can be reviewed. I also dropped one data attribute and used textContent which works for IE9+.

@moshfeu
Copy link

moshfeu commented Sep 25, 2019

That's something that needs to change BTW, see #2541.

I'm not sure :) But let's see what they will decide..

@Trott
Copy link
Member

Trott commented Sep 26, 2019

@nodejs/website Reviews?

3imed-jaberi
3imed-jaberi reviewed Sep 26, 2019
View reviewed changes
Copy link
Contributor

@3imed-jaberi 3imed-jaberi 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 @XhmikosR,
I understand that you want to simplify the code but I think that these chnages aren't necessary, they are simple by nature ...

@XhmikosR
Copy link
Contributor Author

Please try and understand the changes. This makes the language toggler way more accessible and keyboard navigateable.

@moshfeu
Copy link

moshfeu commented Sep 26, 2019

@3imed-jaberi try to switch a language without the mouse, only keyboard.

3imed-jaberi
3imed-jaberi approved these changes Sep 26, 2019
View reviewed changes
Copy link
Contributor

@3imed-jaberi 3imed-jaberi left a comment

Choose a reason for hiding this comment

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

For accessibility 👍

@alexandrtovmach
Copy link
Contributor

Looks good to me

@alexandrtovmach alexandrtovmach self-requested a review September 26, 2019 09:37
osk2
osk2 approved these changes Sep 26, 2019
View reviewed changes
Copy link
Contributor

@osk2 osk2 left a comment

Choose a reason for hiding this comment

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

LGTM

Aissaoui-Ahmed
Aissaoui-Ahmed approved these changes Sep 26, 2019
View reviewed changes
Copy link
Contributor

@Aissaoui-Ahmed Aissaoui-Ahmed left a comment

Choose a reason for hiding this comment

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

Great 💯

@Trott Trott merged commit 78cd897 into nodejs:master Sep 26, 2019
@XhmikosR XhmikosR deleted the master-xmr-lang-toggler branch September 27, 2019 05:48
@XhmikosR XhmikosR mentioned this pull request Sep 29, 2019
Merged
SEWeiTung pushed a commit that referenced this pull request Oct 1, 2019
@XhmikosR @SEWeiTung
The lang-toggler fixes(#2625)
822a40e 
A minor regression from #2566
@NOUIY NOUIY mentioned this pull request Sep 20, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@3imed-jaberi 3imed-jaberi 3imed-jaberi approved these changes

@alexandrtovmach alexandrtovmach alexandrtovmach approved these changes

@Aissaoui-Ahmed Aissaoui-Ahmed Aissaoui-Ahmed approved these changes

@moshfeu moshfeu moshfeu approved these changes

@osk2 osk2 osk2 approved these changes

@SEWeiTung SEWeiTung Awaiting requested review from SEWeiTung

@celyes celyes Awaiting requested review from celyes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Switch lang-picker-toggler to a button
7 participants
@XhmikosR @moshfeu @Trott @alexandrtovmach @osk2 @Aissaoui-Ahmed @3imed-jaberi