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

🎙️ a11y: update html lang attribute #3636

Merged
merged 8 commits into from
Aug 30, 2024

Conversation

jacobcolyvan
Copy link
Contributor

@jacobcolyvan jacobcolyvan commented Aug 14, 2024

Summary

Closes #3458

This implements approach discussed in #3458, which in sum is to:

  • make sure the initial index html is returned by the server with the users preferred language.
  • make sure we're updating the html lang attribute on change in the menu.

Client side, to do this I replaced managing lang choice in local storage with cookies. This meant I had to add the js-cookie package to the client. I looked at managing the cookies without the dependency, but I think this gives us a bit more reliability and sets us up to use cookies more in the future if we choose to do so.

This does however require users to re-choose their language as we're no longer using local storage to manage this data, so it introduces a minor breaking change. So once this update is installed users will need to re-choose their language (though it will fallback to the browser preferred language).

Server-side, this accesses the cookie in the request, opens the index.html file and replaces the lang attribute before returning it. This also add the cookie-parser package, but this is recommended by express.
This feels a little messy but I wasn't sure of another way to do it without adding a templating engine.

Change Type

  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Testing

[Tested via serving the frontend via the api]:

  • initial page load returns a html lang attribute w/ the browser language of the user .
  • can choose a language in the settings, which will:
    • add a langcode cookie.
    • change the lang attribute in the markup.
    • no new local storage lang items are added.
  • on page reload it will be return the langcode in the initial markup.

Test Configuration:

This does not work if you're running the frontend in dev.

Checklist

Please delete any irrelevant options.

  • My code adheres to this project's style guidelines
  • I have performed a self-review of my own code
  • I have commented in any complex areas of my code
  • My changes do not introduce new warnings
  • Local unit tests pass with my changes
  • I have written tests demonstrating that my changes are effective or that my feature works

@jacobcolyvan jacobcolyvan changed the title a11y: update html lang attribute 🎙️ a11y: update html lang attribute Aug 14, 2024
api/server/index.js Outdated Show resolved Hide resolved
client/src/store/language.ts Outdated Show resolved Hide resolved
@danny-avila
Copy link
Owner

Thank you for this and thanks for considering doing this without packages. Both are pretty lightweight so I'm okay with this approach

@jacobcolyvan
Copy link
Contributor Author

Thanks @danny-avila, I've resolved those issues.
Let me know if you're after any other changes.

@danny-avila danny-avila added the a11y Accessibility label Aug 30, 2024
@danny-avila danny-avila merged commit 2ce4f66 into danny-avila:main Aug 30, 2024
3 checks passed
@jacobcolyvan jacobcolyvan deleted the a11y/html-lang-attribute branch August 31, 2024 04:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

a11y: Add Language attribute to page
2 participants