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

Reuse pronunciation fakespot-aria-hint element #15905

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+15 −11
Open

Reuse pronunciation fakespot-aria-hint element #15905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f1d0e5a
Reuse fakespot aria pronunciation hint
janbrasna Jan 21, 2025
d239d2a
Fixup launchpad for readers
janbrasna Jan 23, 2025
317f18a
Tweak for gecko
janbrasna Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion bedrock/base/templates/includes/protocol/navigation/menus/products.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mdn-plus') }}</h4>
<section class="c-menu-item mzp-has-icon">
<a class="c-menu-item-link" href="https://fakespot.com/?{{ utm_params }}" data-link-text="Fakespot" data-link-position="topnav - projects">
<img loading="lazy" src="{{ static('img/logos/fakespot/logo-blue.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
<h4 class="c-menu-item-title">{{ ftl('navigation-v2-fakespot') }}</h4>
<h4 class="c-menu-item-title" aria-labelledby="fakespot-aria-hint">{{ ftl('navigation-v2-fakespot') }}</h4>
<span id="fakespot-aria-hint" aria-label="fake spot"></span>
{% if ftl_has_messages('navigation-v2-use-ai-to-detect') %}
<p class="c-menu-item-desc">{{ ftl('navigation-v2-use-ai-to-detect') }}</p>
{% endif %}
Expand Down
17 changes: 8 additions & 9 deletions bedrock/mozorg/templates/mozorg/home/includes/m24/products.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,44 +14,43 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-love-the-internet') }}</h2>
<ul class="m24-c-launchpad">
<li class="m24-c-launchpad-item">
<a class="m24-c-launchpad-link m24-t-product-firefox" href="{{ url('firefox') }}" data-cta-text="Firefox" data-cta-position="product-list">
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-firefox') }}</strong>
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-firefox') }}<b>:</b></strong>
<span class="m24-c-launchpad-info">{{ ftl('m24-home-get-the-gold') }}</span>
</a>
</li>
<li class="m24-c-launchpad-item">
<a class="m24-c-launchpad-link m24-t-product-thunderbird" href="https://www.thunderbird.net/{{ utm_params }}" data-cta-text="Thunderbird" data-cta-position="product-list">
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-thunderbird') }}</strong>
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-thunderbird') }}<b>:</b></strong>
<span class="m24-c-launchpad-info">{{ ftl('m24-home-go-chaosfree-with') }}</span>
</a>
</li>
<li class="m24-c-launchpad-item">
<a class="m24-c-launchpad-link m24-t-product-fakespot" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list" aria-labelledby="fakespot-aria-hint">
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-fakespot') }}</strong>
<a class="m24-c-launchpad-link m24-t-product-fakespot" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list">
<strong class="m24-c-launchpad-title" aria-label="fake spot.">{{ ftl('m24-home-fakespot') }}<b>:</b></strong>
Comment on lines -28 to +29
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why?

  1. Gecko didn't like the label on strong instead of anchor when labelled by another element and wasn't picking it up correctly, either not at all, or only added to the end of the whole link, instead of in place of the name etc.
  2. Gecko didn't like the punctuation outside of the other elements (wrong order, spelled out before the link), so it has to be here — in which case it also needs to include the punctuation of the content it's overriding to make sense when read out loud, so it differs from the ID ref content here.

<span class="m24-c-launchpad-info">{{ ftl('m24-home-spot-fake-reviews') }}</span>
<span id="fakespot-aria-hint" aria-label="fake spot"></span>
</a>
</li>
<li class="m24-c-launchpad-item">
<a class="m24-c-launchpad-link m24-t-product-pocket" href="https://getpocket.com/signup{{ utm_params }}" data-cta-text="Pocket" data-cta-position="product-list">
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-pocket') }}</strong>
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-pocket') }}<b>:</b></strong>
<span class="m24-c-launchpad-info">{{ ftl('m24-home-save-the-internets') }}</span>
</a>
</li>
<li class="m24-c-launchpad-item">
<a class="m24-c-launchpad-link m24-t-product-vpn" href="{{ url('products.vpn.landing') }}" data-cta-text="VPN" data-cta-position="product-list">
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-mozilla-vpn') }}</strong>
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-mozilla-vpn') }}<b>:</b></strong>
<span class="m24-c-launchpad-info">{{ ftl('m24-home-keep-your-location') }}</span>
</a>
</li>
<li class="m24-c-launchpad-item">
<a class="m24-c-launchpad-link m24-t-product-monitor" href="https://monitor.mozilla.org/{{ utm_params }}" data-cta-text="Monitor" data-cta-position="product-list">
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-mozilla-monitor') }}</strong>
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-mozilla-monitor') }}<b>:</b></strong>
<span class="m24-c-launchpad-info">{{ ftl('m24-home-get-a-headsup') }}</span>
</a>
</li>
<li class="m24-c-launchpad-item">
<a class="m24-c-launchpad-link m24-t-product-relay" href="https://relay.firefox.com/?{{ utm_params }}" data-cta-text="Relay" data-cta-position="product-list">
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-firefox-relay') }}</strong>
<strong class="m24-c-launchpad-title">{{ ftl('m24-home-firefox-relay') }}<b>:</b></strong>
<span class="m24-c-launchpad-info">{{ ftl('m24-home-mask-your-email') }}</span>
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion bedrock/products/templates/products/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ <h2 class="mzp-c-picto-heading"><a href="https://www.thunderbird.net/{{ referral
}
),
) %}
<h2 class="mzp-c-picto-heading" aria-labelledby="fakespot-aria-hint"><a href="https://www.fakespot.com/{{ referrals }}" data-cta-text="Fakespot" data-cta-position="heading" aria-labelledby="fakespot-aria-hint">{{ ftl('firefox-products-fakespot') }}<span id="fakespot-aria-hint" aria-label="fake spot"></span></a></h2>
<h2 class="mzp-c-picto-heading" aria-labelledby="fakespot-aria-hint"><a href="https://www.fakespot.com/{{ referrals }}" data-cta-text="Fakespot" data-cta-position="heading" aria-label="fake spot">{{ ftl('firefox-products-fakespot') }}</a></h2>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why?

  • depending on the context, whether you're selecting the heading, or selecting a link, or listing those roles, you may get different results; so this has to override both elements (the label for anchor doesn't get used when its content its spoken for heading description…)
  • however Gecko for some reason did wild things when both the recursive elements reference the same description, so using a literal string for one made that better for most cases.

<p>{{ ftl('firefox-products-fakespot-has-your') }}</p>
<p><a class="mzp-c-button mzp-t-product mzp-t-secondary" href="https://www.fakespot.com/analyzer{{ referrals }}" rel="external noopener" data-cta-text="Analyze a url with Fakespot">{{ ftl('firefox-products-analyze') }} {{ icon_external|safe }}</a></p>
{% endcall %}
Expand Down
4 changes: 4 additions & 0 deletions media/css/m24/launchpad.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,10 @@ $launchpad-logo-spacing: $launchpad-logo-width + $launchpad-logo-padding;
font-weight: 600;
grid-column: 1 / span 10;
line-height: 1;

b {
color: transparent;
}
Comment on lines +126 to +128
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ugly element yesteryear, semantically redefined for basically no harm these days; picked for brevity of the extra markup.

This also helps unstyled content to make more sense (and fallback UAs as IE), so chose what blends in best, unstyled.

Maybe a note for posterity would help?

Suggested change
b {
color: transparent;
}
b { // punctuation for screen readers
color: transparent;
}

}

.m24-c-launchpad-info {
Expand Down
Loading