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

UHF-8707 other languages bugs #750

Merged
merged 5 commits into from
Aug 28, 2023
Merged

UHF-8707 other languages bugs #750

merged 5 commits into from
Aug 28, 2023

Conversation

dire
Copy link
Contributor

@dire dire commented Aug 18, 2023

UHF-8707

  • Part of accordion close button's screen reader text didn't have fallback lang attribute.
  • Latest news component title doesn't have lang attribute.

What was done

  • Added missing lang fallback attributes.

How to install

  • Make sure your etusivu instance is up and running on latest dev branch.
    • git pull origin dev
    • make fresh
  • Update the HDBT theme
    • composer require drupal/hdbt:dev-UHF-8707_other-languages-bugs
  • Run make drush-cr

How to test

  • Find or add accordion and latest news component to any page that is on other language (not en, fi or sv).
  • Check that the "Close element: " text for screen readers in the accordion close button is now wrapped with <span lang="en">.
  • Check that the "Latest news" H2 in Latest news -component is wrapped with lang="en".
  • Check that code follows our standards

Designers review

  • This PR does not need designers review

Other PRs

@dire dire marked this pull request as ready for review August 18, 2023 07:29
Copy link
Contributor

@Arkkimaagi Arkkimaagi left a comment

Choose a reason for hiding this comment

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

Some missing lang and dir attributes found, otherwise the code looks good and works as it should.

@@ -28,7 +28,7 @@
{{ content|default('Missing content'|t) }}

<button type="button" class="accordion-item__button accordion-item__button--close" aria-controls="{{ controlled_content_id }}" aria-labelledby="{{ close_button_labelled_by_id }}">
<span class="is-hidden" id="{{ close_button_labelled_by_id }}">{{ 'Close element: '|t({}, {'context': 'The helper text for close accordion visibility button'}) }}{{ heading|default('Missing heading'|t) }}</span>
<span class="is-hidden" id="{{ close_button_labelled_by_id }}"><span {{ alternative_language ? create_attribute(({ 'lang': lang_attributes.fallback_lang })) }}>{{ 'Close element: '|t({}, {'context': 'The helper text for close accordion visibility button'}) }}</span>{{ heading|default('Missing heading'|t) }}</span>
{{ 'Close'|t({}, {'context': 'The text for close accordion visibility button'}) }}
Copy link
Contributor

Choose a reason for hiding this comment

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

This row is still missing a proper lang attribute. This "Close" word will be read with rally-ukrainian or similar.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Wrapped this with a <span lang="en" dir="ltr">.

@@ -28,7 +28,7 @@
{{ content|default('Missing content'|t) }}

<button type="button" class="accordion-item__button accordion-item__button--close" aria-controls="{{ controlled_content_id }}" aria-labelledby="{{ close_button_labelled_by_id }}">
<span class="is-hidden" id="{{ close_button_labelled_by_id }}">{{ 'Close element: '|t({}, {'context': 'The helper text for close accordion visibility button'}) }}{{ heading|default('Missing heading'|t) }}</span>
<span class="is-hidden" id="{{ close_button_labelled_by_id }}"><span {{ alternative_language ? create_attribute(({ 'lang': lang_attributes.fallback_lang })) }}>{{ 'Close element: '|t({}, {'context': 'The helper text for close accordion visibility button'}) }}</span>{{ heading|default('Missing heading'|t) }}</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

This row is missing dir-attribute for the fallback language. If the page is for example in arabic, this code could fail.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added the dir-attribute.

@@ -56,7 +56,7 @@ Example usage:

<div class="component__container">
{% if hasTitle %}
<{{ component_title_level|default('h2') }} class="component__title">
<{{ component_title_level|default('h2') }} class="component__title" {{ use_component_title_lang_fallback ? create_attribute(({ 'lang': lang_attributes.fallback_lang })) }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

This row is missing dir-attribute for the fallback language. If the page is for example in arabic, this code could fail.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added the dir attribute.

@dire dire requested a review from Arkkimaagi August 25, 2023 07:04
Copy link
Contributor

@Arkkimaagi Arkkimaagi left a comment

Choose a reason for hiding this comment

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

Looks and works as it shoud! Approved for merge 🥳

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