Add check against site language to navItem language to determine href… #175

JamieC24 · 2025-07-25T09:54:39Z

This pull request adds support for the "targetLinkLanguage" field that is added by a branch of the same name in the w3c-website-craft repo and the w3c-website-frontend repo

When it detects that the language of the current site (siteLang) is different from the value of the targetLinkLanguage field (if it's populated), it adds a hreflang attribute to the relevant <a> tag as well as some indicative text following the current text inside the <a> tag.

This has been tested locally and seems to be working as intended

How to test

Ensure you have checked out the branch feature/#517-menu-target-lang in both the front-end and craft repos, and have run the necessary ddev composer updates on the frontend and ddev craft project-config/apply on the craft repo
Go to one of the Main Navigation items in Craft and choose a "Target Link Language" from the dropdown that differs from the language of the site the navigation item belongs to
Save your changes and check the front-end

If you would like to test this on another language, you can do the following:

Change the language of the Craft dashboard to whichever language you wish to test (e.g Chinese)
Repeat steps 2 and 3

Expected behaviour

If a navigation item has a Target Link Language that is different from the site language, it should have a hreflang in the markup for the anchor tag for that link, and there should be an indicator (in the Roman Alphabet / Romaji) of what language the target page is in. [e.g - Working Groups (Chinese)] or something similar.

…lang

… a gql thing

jean-gui · 2025-07-29T14:23:00Z

templates/components/styles/global_nav.html.twig

 <nav id="global-nav" aria-label="Main">
    <div class="global-nav__inner l-center">
-        <a class="logo-link" href="{% block homepage_link %}/{% endblock %}" hreflang="{% block homepage_hreflang %}en{% endblock %}">
+        {% set siteLang %} {% block homepage_hreflang %}en{% endblock %} {% endset %}


I don't think the block is useful here.

Suggested change

{% set siteLang %} {% block homepage_hreflang %}en{% endblock %} {% endset %}

{% set siteLang = site.locale|default('en') %}

jean-gui · 2025-07-29T14:25:07Z

templates/components/styles/global_nav.html.twig

            {%~ for navItem in navigation %}
                <li class="top-nav-item has-children">
-                    <a href="{{ navItem.titleLink }}" class="nav-link">{{ navItem.title }}</a>
+                    {% set langDiff = siteLang is same as navItem.targetLinkLanguage ? false : true %}


This can be simplified to:

Suggested change

{% set langDiff = siteLang is same as navItem.targetLinkLanguage ? false : true %}

{% set langDiff = siteLang != navItem.targetLinkLanguage %}

jean-gui · 2025-07-29T14:26:12Z

templates/components/styles/global_nav.html.twig

-                    <a href="{{ navItem.titleLink }}" class="nav-link">{{ navItem.title }}</a>
+                    {% set langDiff = siteLang is same as navItem.targetLinkLanguage ? false : true %}
+                    {% if navItem.language is defined %}{{ navItem.language }}{% endif %}
+                    <a href="{{ navItem.titleLink }}" class="nav-link"{% if langDiff %}hreflang="{{ navItem.targetLinkLanguage }}"{% endif %}>{{ navItem.title }}</a>


Space mising:

Suggested change

<a href="{{ navItem.titleLink }}" class="nav-link"{% if langDiff %}hreflang="{{ navItem.targetLinkLanguage }}"{% endif %}>{{ navItem.title }}</a>

<a href="{{ navItem.titleLink }}" class="nav-link"{% if langDiff %} hreflang="{{ navItem.targetLinkLanguage }}"{% endif %}>{{ navItem.title }}</a>

jean-gui · 2025-07-29T14:28:02Z

templates/components/styles/global_nav.html.twig

                            {% if navItem.children is defined and navItem.children|length > 0 -%}
                                <ul>
                                    {%~ for child in navItem.children %}
+                                        {% set childLangDiff = siteLang is same as child.targetLinkLanguage ? false : true %}


Can be simplified:

Suggested change

{% set childLangDiff = siteLang is same as child.targetLinkLanguage ? false : true %}

{% set childLangDiff = siteLang != child.targetLinkLanguage %}

jean-gui · 2025-07-29T14:28:49Z

templates/components/styles/global_nav.html.twig

+                                        {% set childLangDiff = siteLang is same as child.targetLinkLanguage ? false : true %}
                                        <li{{ child.startNewColumn is defined and child.startNewColumn ? ' class="break-after"' : '' }}>{# -#}
-                                            <a href="{{ child.url }}">{{ child.title }}</a>{# -#}
+                                            <a href="{{ child.url }}{% if childLangDiff %}hreflang="{{ child.targetLinkLanguage }}"{% endif %}">{{ child.title }}</a>{# -#}


Missing space and wrong quoting:

Suggested change

<a href="{{ child.url }}{% if childLangDiff %}hreflang="{{ child.targetLinkLanguage }}"{% endif %}">{{ child.title }}</a>{# -#}

<a href="{{ child.url }}"{% if childLangDiff %} hreflang="{{ child.targetLinkLanguage }}"{% endif %}>{{ child.title }}</a>{# -#}

jean-gui · 2025-07-29T14:29:18Z

templates/components/styles/global_nav.html.twig

                <li class="top-nav-item has-children">
-                    <a href="{{ navItem.titleLink }}" class="nav-link">{{ navItem.title }}</a>
+                    {% set langDiff = siteLang is same as navItem.targetLinkLanguage ? false : true %}
+                    {% if navItem.language is defined %}{{ navItem.language }}{% endif %}


Looks like some debug information

Suggested change

{% if navItem.language is defined %}{{ navItem.language }}{% endif %}

simonrjones · 2025-07-29T14:33:23Z

This ticket related to task w3c/w3c-website#517

It is currently being tested internall. We'll update the task & convert this PR to "Ready for review" once this is done. Sorry for any confusion on the status of this one.

jean-gui · 2025-09-02T14:48:31Z

templates/components/styles/global_nav.html.twig

+                                                    {% if child.targetLinkLanguage == 'zh-Hans' %}
+                                                        {% set targetLangLabel = "Chinese" %}
+                                                    {% else %}
+                                                        {% set targetLangLabel = "English" %}
+                                                    {% endif %}


This doesn't work for languages other than Chinese or English. The following code should make it generic, thanks to twig's language_name filter.

Suggested change

{% if child.targetLinkLanguage == 'zh-Hans' %}

{% set targetLangLabel = "Chinese" %}

{% else %}

{% set targetLangLabel = "English" %}

{% endif %}

{% set targetLangLabel = child.targetLinkLanguage|replace('-', '_')|language_name(siteLang) %}

Note that I replace - with _ because language_name seems to expect 'zh_Hans' instead of 'zh-Hans'

jean-gui · 2025-09-03T13:05:01Z

templates/components/styles/global_nav.html.twig

+                                {% if navItem.targetLinkLanguage == 'zh-Hans' %}
+                                    {% set targetLangLabel = "Chinese" %}
+                                {% else %}
+                                    {% set targetLangLabel = "English" %}
+                                {% endif %}


See my previous comment on how to make this more generic

jean-gui · 2025-09-03T13:11:09Z

templates/components/styles/global_nav.html.twig

+                    <a href="{{ navItem.titleLink }}" class="nav-link"{% if langDiff is defined and langDiff %} hreflang="{{ navItem.targetLinkLanguage }}"{% endif %}>
+                        {{ navItem.title }}
+                        {% if navItem.targetLinkLanguage is not empty %}
+                            {{ (langDiff is defined and langDiff) ? '(' ~ targetLangLabel ~ ')' : '' }}


When the target language is different from the current one, you chose to display it as "(Language)". Do you think it should be styled to be less prominent?

https://www.w3.org/International/questions/qa-link-lang suggests some CSS, that, despite not being accessible (at least because of the contrast ratio), makes that less "in your face". It also suggests adding the language through CSS content rather than in the markup, but I don't know what are the implications of one or the other.

JamieC24 added 4 commits July 25, 2025 10:53

Add check against site language to navItem language to determine href…

919f2cd

…lang

Remove funky if-checks to see if data comes through

b84234f

Just add an echo to see if language is coming through or whether it's…

0863c00

… a gql thing

Add support for targetLinkLanguage field

5fb0a70

jean-gui requested changes Jul 29, 2025

View reviewed changes

simonrjones marked this pull request as draft July 29, 2025 14:32

Add support for labels when pages are in a different language

bc677ff

JamieC24 requested review from simonrjones and NicolaSaunders August 5, 2025 13:07

JamieC24 marked this pull request as ready for review August 5, 2025 13:40

JamieC24 requested a review from jean-gui August 5, 2025 13:40

JamieC24 mentioned this pull request Aug 5, 2025

Main menu target in another languages w3c/w3c-website#517

Open

Fix highlighted issues on markup and remove homepage_href block

1f95108

jean-gui requested changes Sep 2, 2025

View reviewed changes

jean-gui requested changes Sep 3, 2025

View reviewed changes

Genericise targetLinkLanguage setting

934b99e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add check against site language to navItem language to determine href… #175

Add check against site language to navItem language to determine href… #175

Uh oh!

JamieC24 commented Jul 25, 2025 •

edited

Loading

Uh oh!

jean-gui Jul 29, 2025

Uh oh!

jean-gui Jul 29, 2025

Uh oh!

jean-gui Jul 29, 2025

Uh oh!

jean-gui Jul 29, 2025

Uh oh!

jean-gui Jul 29, 2025

Uh oh!

jean-gui Jul 29, 2025

Uh oh!

simonrjones commented Jul 29, 2025

Uh oh!

jean-gui Sep 2, 2025

Uh oh!

jean-gui Sep 3, 2025 •

edited

Loading

Uh oh!

jean-gui Sep 3, 2025

Uh oh!

Uh oh!

	{% set siteLang %} {% block homepage_hreflang %}en{% endblock %} {% endset %}
	{% set siteLang = site.locale\|default('en') %}

	{% set langDiff = siteLang is same as navItem.targetLinkLanguage ? false : true %}
	{% set langDiff = siteLang != navItem.targetLinkLanguage %}

	<a href="{{ navItem.titleLink }}" class="nav-link"{% if langDiff %}hreflang="{{ navItem.targetLinkLanguage }}"{% endif %}>{{ navItem.title }}</a>
	<a href="{{ navItem.titleLink }}" class="nav-link"{% if langDiff %} hreflang="{{ navItem.targetLinkLanguage }}"{% endif %}>{{ navItem.title }}</a>

	{% set childLangDiff = siteLang is same as child.targetLinkLanguage ? false : true %}
	{% set childLangDiff = siteLang != child.targetLinkLanguage %}

	<a href="{{ child.url }}{% if childLangDiff %}hreflang="{{ child.targetLinkLanguage }}"{% endif %}">{{ child.title }}</a>{# -#}
	<a href="{{ child.url }}"{% if childLangDiff %} hreflang="{{ child.targetLinkLanguage }}"{% endif %}>{{ child.title }}</a>{# -#}

Add check against site language to navItem language to determine href… #175

Are you sure you want to change the base?

Add check against site language to navItem language to determine href… #175

Uh oh!

Conversation

JamieC24 commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

simonrjones commented Jul 29, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jean-gui Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JamieC24 commented Jul 25, 2025 •

edited

Loading

jean-gui Sep 3, 2025 •

edited

Loading