POST Deployment v1.20.0

Header accessibility improvements

To make the Community Header accessible, the designs already saved in each tenant must be updated. The changes apply to the Extended and Compact designs.
Follow these steps for every change listed below:

Access to Syntphony Settings (previously called TOGO Settings).
Access the This Tenant menu.
Access the Header section.
In the Designs list, open the Extended design and apply the change. Then repeat it in the Compact design.
Click the arrow ← to return to the Designs list, and click Save.

Community title

MANDATORY

Look for the block with "dataTestid": "header-title". In its style property, add the following code:


"textDecoration": "none",
"& a": {
  "color": "inherit",
  "textDecoration": "none"
},
"& a:visited": {
  "color": "inherit",
  "textDecoration": "none"
},
"& a:hover": {
  "textDecoration": "underline"
}

The block must keep these properties:


"variant": "h1",
"onClick": {
  "type": "OpenUrl",
  "url": "{base.urls.siteUrl}"
}

Followers

MANDATORY

Look for the block with "dataTestid": "header-followers". Remove these properties if they exist:


"tabIndex": "0",
"role": "button"

Then replace the ariaLabel and text properties with the following code:


"ariaLabel": {
  "en-US": "@eval('View ' + {base.socials.follow.count}.toLocaleString() + ' ' + ({base.socials.follow.count} === 1 ? 'follower' : 'followers'))",
  "es-ES": "@eval('Ver ' + {base.socials.follow.count}.toLocaleString() + ' ' + ({base.socials.follow.count} === 1 ? 'seguidor' : 'seguidores'))",
  "it-IT": "@eval('Visualizza ' + {base.socials.follow.count}.toLocaleString() + ' ' + ({base.socials.follow.count} === 1 ? 'seguace' : 'seguaci'))"
},
"ariaHasPopup": "dialog",
"text": {
  "en-US": "@eval({base.socials.follow.count}.toLocaleString() + ' ' + ({base.socials.follow.count} === 1 ? 'follower' : 'followers'))",
  "es-ES": "@eval({base.socials.follow.count}.toLocaleString() + ' ' + ({base.socials.follow.count} === 1 ? 'seguidor' : 'seguidores'))",
  "it-IT": "@eval({base.socials.follow.count}.toLocaleString() + ' ' + ({base.socials.follow.count} === 1 ? 'seguace' : 'seguaci'))"
}

Follow button

MANDATORY

Look for all the blocks with "dataTestid": "header-follow-button". There are two in each design: one for desktop and one for mobile. In each of them, replace the ariaLabel property with the following code:


"ariaLabel": {
  "en-US": "@eval({base.socials.follow.status} ? 'Unfollow ' + {base.title} : 'Follow ' + {base.title})",
  "es-ES": "@eval({base.socials.follow.status} ? 'Dejar de seguir ' + {base.title} : 'Seguir ' + {base.title})",
  "it-IT": "@eval({base.socials.follow.status} ? 'Smetti di seguire ' + {base.title} : 'Segui ' + {base.title})"
}

More options button

MANDATORY

Look for all the blocks with "dataTestid": "header-overflow-menu". There are two in each design: one for desktop and one for mobile. In each of them, add the following code:


"ariaLabel": {
  "en-US": "More options",
  "es-ES": "Más opciones",
  "it-IT": "Altre opzioni"
}

MANDATORY

Look for the block with "dataTestid": "header-menu" and replace its ariaLabel property with the following code:


"ariaLabel": {
  "en-US": "Community navigation '{base.title}'",
  "es-ES": "Navegación de comunidad '{base.title}'",
  "it-IT": "Navigazione della community '{base.title}'"
}

NOTE: APPLY THIS SAME PROCEDURE TO ALL COMMUNITY HEADER DESIGNS RELATED TO THIS FEATURE.