Skip to content

Commit

Permalink
[IMP] website, *: add aria-label on social media anchors
Browse files Browse the repository at this point in the history 
*: website_hr_recruitment

In order to improve the accessibility of the website pages, an
`aria-label` attribute has been added on some social media anchors to
avoid a warning of type `Links do not have a discernible name`. The
`options.js` file has also been adapted in order to correctly set the
`aria-label` attribute of added social media anchors.

Part-of: odoo#140453
Co-authored-by: qsm-odoo <qsm@odoo.com>
  • Loading branch information
@loco-odoo @qsm-odoo
loco-odoo and qsm-odoo committed Feb 29, 2024
1 parent bedf4ba commit 8eb5d38
Show file tree
Hide file tree
Showing 7 changed files with 149 additions and 32 deletions.
76 changes: 76 additions & 0 deletions addons/website/i18n/website.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4731,6 +4731,11 @@ msgstr ""
msgid "Extra link"
msgstr ""

#. module: website
#: model_terms:ir.ui.view,arch_db:website.footer_custom
msgid "Extra page"
msgstr ""

#. module: website
#: model_terms:ir.ui.view,arch_db:website.snippet_options
msgid "Extra-Large"
Expand All @@ -4747,8 +4752,17 @@ msgid "F.A.Q."
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#: model_terms:ir.ui.view,arch_db:website.footer_custom
#: model_terms:ir.ui.view,arch_db:website.header_social_links
#: model_terms:ir.ui.view,arch_db:website.s_mega_menu_odoo_menu
#: model_terms:ir.ui.view,arch_db:website.s_social_media
#: model_terms:ir.ui.view,arch_db:website.snippets
#: model_terms:ir.ui.view,arch_db:website.template_footer_centered
#: model_terms:ir.ui.view,arch_db:website.template_footer_headline
#: model_terms:ir.ui.view,arch_db:website.template_footer_links
#, python-format
msgid "Facebook"
msgstr ""

Expand Down Expand Up @@ -5272,6 +5286,15 @@ msgstr ""
msgid "Get in touch"
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#: model_terms:ir.ui.view,arch_db:website.s_mega_menu_odoo_menu
#: model_terms:ir.ui.view,arch_db:website.s_social_media
#, python-format
msgid "GitHub"
msgstr ""

#. module: website
#: model:ir.model.fields,field_description:website.field_website__social_github
msgid "GitHub Account"
Expand Down Expand Up @@ -6219,7 +6242,14 @@ msgid "Inset"
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#: model_terms:ir.ui.view,arch_db:website.header_social_links
#: model_terms:ir.ui.view,arch_db:website.s_mega_menu_odoo_menu
#: model_terms:ir.ui.view,arch_db:website.s_social_media
#: model_terms:ir.ui.view,arch_db:website.template_footer_headline
#: model_terms:ir.ui.view,arch_db:website.template_footer_links
#, python-format
msgid "Instagram"
msgstr ""

Expand Down Expand Up @@ -6903,6 +6933,18 @@ msgstr ""
msgid "Link text"
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#: model_terms:ir.ui.view,arch_db:website.footer_custom
#: model_terms:ir.ui.view,arch_db:website.header_social_links
#: model_terms:ir.ui.view,arch_db:website.s_mega_menu_odoo_menu
#: model_terms:ir.ui.view,arch_db:website.s_social_media
#: model_terms:ir.ui.view,arch_db:website.template_footer_centered
#, python-format
msgid "LinkedIn"
msgstr ""

#. module: website
#: model:ir.model.fields,field_description:website.field_website__social_linkedin
msgid "LinkedIn Account"
Expand Down Expand Up @@ -8170,6 +8212,13 @@ msgstr ""
msgid "Other Information:"
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#, python-format
msgid "Other social network"
msgstr ""

#. module: website
#: model_terms:ir.ui.view,arch_db:website.new_page_template_landing_s_text_image
msgid "Our Approach"
Expand Down Expand Up @@ -11112,6 +11161,15 @@ msgstr ""
msgid "Thumbnails"
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#: model_terms:ir.ui.view,arch_db:website.s_mega_menu_odoo_menu
#: model_terms:ir.ui.view,arch_db:website.s_social_media
#, python-format
msgid "TikTok"
msgstr ""

#. module: website
#: model:ir.model.fields,field_description:website.field_website__social_tiktok
msgid "TikTok Account"
Expand Down Expand Up @@ -11365,7 +11423,16 @@ msgid "Turn every feature into a benefit for your reader."
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#: model_terms:ir.ui.view,arch_db:website.footer_custom
#: model_terms:ir.ui.view,arch_db:website.header_social_links
#: model_terms:ir.ui.view,arch_db:website.s_mega_menu_odoo_menu
#: model_terms:ir.ui.view,arch_db:website.s_social_media
#: model_terms:ir.ui.view,arch_db:website.template_footer_centered
#: model_terms:ir.ui.view,arch_db:website.template_footer_headline
#: model_terms:ir.ui.view,arch_db:website.template_footer_links
#, python-format
msgid "Twitter"
msgstr ""

Expand Down Expand Up @@ -12666,6 +12733,15 @@ msgstr ""
msgid "You'll be able to create your pages later on."
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/snippets/s_social_media/options.js:0
#: model_terms:ir.ui.view,arch_db:website.s_mega_menu_odoo_menu
#: model_terms:ir.ui.view,arch_db:website.s_social_media
#, python-format
msgid "YouTube"
msgstr ""

#. module: website
#. odoo-javascript
#: code:addons/website/static/src/js/send_mail_form.js:0
Expand Down
28 changes: 27 additions & 1 deletion addons/website/static/src/snippets/s_social_media/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,29 @@ options.registry.SocialMedia = options.Class.extend({
* @see this.selectClass for parameters
*/
async renderListItems(previewMode, widgetValue, params) {
const ariaLabelsOfSocialNetworks = {
"facebook": _t("Facebook"),
"twitter": _t("Twitter"),
"linkedin": _t("LinkedIn"),
"youtube": _t("YouTube"),
"instagram": _t("Instagram"),
"github": _t("GitHub"),
"tiktok": _t("TikTok"),
};
const setAriaLabelOfSocialNetwork = (el, name, url) => {
let ariaLabel = ariaLabelsOfSocialNetworks[name];
if (!ariaLabel) {
try {
// Return the domain of the given url.
ariaLabel = new URL(url).hostname.split('.').slice(-2)[0];
} catch {
// Fallback if the url is not valid.
ariaLabel = _t("Other social network");
}
}
el.setAttribute("aria-label", ariaLabel);
};

const anchorEls = this.$target[0].querySelectorAll(':scope > a');
let entries = JSON.parse(widgetValue);
const anchorsToRemoveEls = [];
Expand Down Expand Up @@ -139,6 +162,7 @@ options.registry.SocialMedia = options.Class.extend({
anchorEl.href = `/website/social/${encodeURIComponent(entry.media)}`;
anchorEl.classList.add(`s_social_media_${entry.media}`);
}
setAriaLabelOfSocialNetwork(anchorEl, entry.media, entry.display_name);
}
} else {
if (anchorEl) {
Expand All @@ -153,9 +177,10 @@ options.registry.SocialMedia = options.Class.extend({
// Handle URL change for custom links.
const href = anchorEl.getAttribute('href');
if (href !== entry.display_name) {
let socialMedia = null;
if (this._isValidURL(entry.display_name)) {
// Propose an icon only for valid URLs (no mailto).
const socialMedia = this._findRelevantSocialMedia(entry.display_name);
socialMedia = this._findRelevantSocialMedia(entry.display_name);
if (socialMedia) {
const iEl = anchorEl.querySelector(ICON_SELECTOR);
this._removeSocialMediaClasses(anchorEl);
Expand All @@ -166,6 +191,7 @@ options.registry.SocialMedia = options.Class.extend({
}
}
anchorEl.setAttribute('href', entry.display_name);
setAriaLabelOfSocialNetwork(anchorEl, socialMedia, entry.display_name);
}
}
// Place the link at the correct position
Expand Down
14 changes: 7 additions & 7 deletions addons/website/views/snippets/s_mega_menu_odoo_menu.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,25 +62,25 @@
<div class="col-12 pt8 pb8">
<div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank">
<a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank" aria-label="Facebook">
<i class="fa fa-2x fa-facebook m-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank">
<a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank" aria-label="Twitter">
<i class="fa fa-2x fa-twitter m-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank">
<a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank" aria-label="LinkedIn">
<i class="fa fa-2x fa-linkedin m-1 o_editable_media"/>
</a>
<a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank">
<a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank" aria-label="GitHub">
<i class="fa fa-2x fa-github m-1 o_editable_media"/>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank">
<a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank" aria-label="YouTube">
<i class="fa fa-2x fa-youtube m-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank">
<a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank" aria-label="Instagram">
<i class="fa fa-2x fa-instagram m-1 o_editable_media"/>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank">
<a href="/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank" aria-label="TikTok">
<i class="fa fa-2x fa-tiktok m-1 o_editable_media"/>
</a>
</div>
Expand Down
14 changes: 7 additions & 7 deletions addons/website/views/snippets/s_social_media.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,25 @@ title stay editable after a save (see SOCIAL_MEDIA_TITLE_CONTENTEDITABLE).
<template id="s_social_media" name="Social Media">
<div class="s_social_media text-start o_not_editable" contenteditable="false">
<h4 class="s_social_media_title d-none" contenteditable="true">Social Media</h4>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
<i class="fa fa-facebook rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="Twitter">
<i class="fa fa-twitter rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
<i class="fa fa-linkedin rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/youtube" class="s_social_media_youtube" target="_blank">
<a href="/website/social/youtube" class="s_social_media_youtube" target="_blank" aria-label="YouTube">
<i class="fa fa-youtube rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
<i class="fa fa-instagram rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/github" class="s_social_media_github" target="_blank">
<a href="/website/social/github" class="s_social_media_github" target="_blank" aria-label="GitHub">
<i class="fa fa-github rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/tiktok" class="s_social_media_tiktok" target="_blank">
<a href="/website/social/tiktok" class="s_social_media_tiktok" target="_blank" aria-label="TikTok">
<i class="fa fa-tiktok rounded shadow-sm o_editable_media"/>
</a>
</div>
Expand Down
28 changes: 14 additions & 14 deletions addons/website/views/website_templates.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1633,16 +1633,16 @@
</ul>
<div class="s_social_media text-start o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
<i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="Twitter">
<i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
<i class="fa fa-linkedin rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/" class="text-800">
<a href="/" class="text-800" aria-label="Extra page">
<i class="fa fa-home rounded-circle shadow-sm o_editable_media"/>
</a>
</div>
Expand Down Expand Up @@ -1706,13 +1706,13 @@
<div class="container s_allow_columns">
<div class="s_social_media text-center mb-4 o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
<i class="fa fa-facebook rounded-circle rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="Twitter">
<i class="fa fa-twitter rounded-circle rounded shadow-sm o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
<a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank" aria-label="LinkedIn">
<i class="fa fa-linkedin rounded-circle rounded shadow-sm o_editable_media"/>
</a>
</div>
Expand Down Expand Up @@ -1991,13 +1991,13 @@
<div class="col-lg-3 pb24">
<div class="s_social_media text-end o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
<h5 class="s_social_media_title d-none" contenteditable="true">Follow Us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
<a href="/website/social/facebook" class="s_social_media_facebook" target="_blank" aria-label="Facebook">
<i class="fa fa-1x fa-facebook rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
<a href="/website/social/twitter" class="s_social_media_twitter" target="_blank" aria-label="Twitter">
<i class="fa fa-1x fa-twitter rounded-circle shadow-sm o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
<a href="/website/social/instagram" class="s_social_media_instagram" target="_blank" aria-label="Instagram">
<i class="fa fa-1x fa-instagram rounded-circle shadow-sm o_editable_media"/>
</a>
</div>
Expand Down Expand Up @@ -2844,16 +2844,16 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
<div t-attf-class="o_header_social_links #{_div_class}">
<div class="s_social_media o_not_editable oe_unmovable oe_unremovable" data-snippet="s_social_media" data-name="Social Media">
<h5 class="s_social_media_title d-none">Follow us</h5>
<a href="/website/social/facebook" class="s_social_media_facebook o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
<a href="/website/social/facebook" class="s_social_media_facebook o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="Facebook">
<i class="fa fa-facebook fa-stack p-1 o_editable_media"/>
</a>
<a href="/website/social/twitter" class="s_social_media_twitter o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
<a href="/website/social/twitter" class="s_social_media_twitter o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="Twitter">
<i class="fa fa-twitter fa-stack p-1 o_editable_media"/>
</a>
<a href="/website/social/linkedin" class="s_social_media_linkedin o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
<a href="/website/social/linkedin" class="s_social_media_linkedin o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="LinkedIn">
<i class="fa fa-linkedin fa-stack p-1 o_editable_media"/>
</a>
<a href="/website/social/instagram" class="s_social_media_instagram o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank">
<a href="/website/social/instagram" class="s_social_media_instagram o_nav-link_secondary nav-link m-0 p-0 text-decoration-none" target="_blank" aria-label="Instagram">
<i class="fa fa-instagram fa-stack p-1 o_editable_media"/>
</a>
</div>
Expand Down
Loading

0 comments on commit 8eb5d38

Please sign in to comment.