fix: Add accessible name to emojis - EXO-87562

component/api/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <artifactId>social-component</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <artifactId>social-component-api</artifactId>
   <name>Meeds:: PLF:: Social API</name>

component/common/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <artifactId>social-component</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <groupId>io.meeds.social</groupId>
   <artifactId>social-component-common</artifactId>

component/core/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <artifactId>social-component</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <artifactId>social-component-core</artifactId>
   <name>Meeds:: PLF:: Social Core Component</name>

component/notification/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <artifactId>social-component</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <artifactId>social-component-notification</artifactId>
   <name>Meeds:: PLF:: Social Notification Component</name>

component/oauth-auth/pom.xml

@@ -21,7 +21,7 @@
   <parent>
     <artifactId>social-component</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <modelVersion>4.0.0</modelVersion>
 

component/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <artifactId>social</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <artifactId>social-component</artifactId>
   <packaging>pom</packaging>

component/service/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <artifactId>social-component</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <artifactId>social-component-service</artifactId>
   <name>Meeds:: PLF:: Social Service Component</name>

component/web/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <artifactId>social-component</artifactId>
     <groupId>io.meeds.social</groupId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <groupId>io.meeds.social</groupId>
   <artifactId>social-component-web</artifactId>

pom.xml

@@ -27,7 +27,7 @@
   </parent>
   <groupId>io.meeds.social</groupId>
   <artifactId>social</artifactId>
-  <version>7.3.x-SNAPSHOT</version>
+  <version>7.3.x-maintenance-SNAPSHOT</version>
   <packaging>pom</packaging>
   <name>Meeds:: PLF:: Social</name>
   <description>Meeds Social - Enterprise Social Networking</description>
@@ -45,8 +45,8 @@
     <!-- **************************************** -->
     <!-- Project Dependencies                     -->
     <!-- **************************************** -->
-    <io.meeds.commons.version>7.3.x-SNAPSHOT</io.meeds.commons.version>
-    <io.meeds.platform-ui.version>7.3.x-SNAPSHOT</io.meeds.platform-ui.version>
+    <io.meeds.commons.version>7.3.x-maintenance-SNAPSHOT</io.meeds.commons.version>
+    <io.meeds.platform-ui.version>7.3.x-maintenance-SNAPSHOT</io.meeds.platform-ui.version>
 
     <!-- Sonar properties -->
     <sonar.organization>meeds-io</sonar.organization>

webapp/.eslintrc.json

@@ -14,6 +14,7 @@
     "QRCode": true,
     "DOMPurify": true,
     "ExtendedDomPurify": true,
+    "EmojiAccessibility": true,
     "Cropper": true,
     "Autolinker": true,
     "cCometd": true,

webapp/pom.xml

@@ -22,7 +22,7 @@
   <parent>
     <groupId>io.meeds.social</groupId>
     <artifactId>social</artifactId>
-    <version>7.3.x-SNAPSHOT</version>
+    <version>7.3.x-maintenance-SNAPSHOT</version>
   </parent>
   <artifactId>social-webapp</artifactId>
   <packaging>war</packaging>

webapp/src/main/resources/locale/portlet/Portlets_en.properties

@@ -716,7 +716,8 @@ GroupsManagement.error.invalidField=The "{0}" field must start with a character
 #####################################################################################
 #                                    Search                                         #
 #####################################################################################
-Search.label.inputPlaceHolder=Search for content...
+Search.label.inputPlaceHolder=Start searching content...
+Search.label.ariaLabel=Search for content
 Search.label.inProgress=Search in progress
 Search.button.tooltip=Search
 Search.button.tooltip.shortcut=(Ctrl + Shift + f)
@@ -807,6 +808,7 @@ Favorite.tooltip.ErrorDeletingFavorite=An error occurred while deleting the {0}
 Tag.tooltip.startSearch=Start a search based on this tag
 Tag.search.button=Tags
 Tag.search.placeholder=Start typing to search a Tag
+Tag.search.ariaLabel=Filter by tag name
 Tag.last.added=Last tags added
 
 #####################################################################################

webapp/src/main/resources/locale/portlet/social/PeopleListApplication_en.properties

@@ -33,6 +33,7 @@ peopleList.title.spacesCount=Spaces
 peopleList.title.usersToInvite=Invite users
 peopleList.label.peopleCount=Showing {0} results
 peopleList.label.filterPeople=Filter by name
+peopleList.label.filterPeople.placeholder=Search for a user
 peopleList.label.filter=Filter
 peopleList.label.filter.all=Everyone
 peopleList.label.filter.connections=My Network

webapp/src/main/resources/locale/portlet/social/SpacesListApplication_en.properties

@@ -10,6 +10,7 @@ spacesList.label.members={0} Members
 spacesList.label.oneMember=1 Member
 spacesList.label.SpaceMembers=Members
 spacesList.label.filterSpaces=Filter by name or description
+spacesList.label.filterSpaces.placeholder=Search for a space
 spacesList.label.filterSpacesByName=Filter by name
 spacesList.label.spacesSize={0} spaces listed
 spacesList.label.ok=OK

webapp/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -2829,6 +2829,9 @@
     <depends>
       <module>ExtendedDomPurify</module>
     </depends>
+    <depends>
+      <module>EmojiAccessibility</module>
+    </depends>
     <depends>
       <module>vue</module>
     </depends>
@@ -2849,6 +2852,15 @@
     </depends>
   </module>
 
+  <module>
+    <name>EmojiAccessibility</name>
+    <load-group>purifyGRP</load-group>
+    <script>
+      <minify>false</minify>
+      <path>/js/EmojiAccessibility.js</path>
+    </script>
+  </module>
+
   <module>
     <name>purify</name>
     <load-group>purifyGRP</load-group>

webapp/src/main/webapp/js/EmojiAccessibility.js

@@ -0,0 +1,96 @@
+/**
+ * This file is part of the Meeds project (https://meeds.io/).
+ *
+ * Copyright (C) 2020 - 2022 Meeds Association contact@meeds.io
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+(function() {
+  // Accessibility (#4246): expose emojis to screen readers by wrapping
+  // them in a <span role="img" aria-label="..."> once their names are loaded.
+  let emojiNameByChar = null;
+  let emojiPattern = null;
+
+  function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function buildEmojiIndex(emojiBank) {
+    const map = new Map();
+    (emojiBank.categories || []).forEach(category => {
+      (category.emojis || []).forEach(item => {
+        if (item.emoji && item.name && !map.has(item.emoji)) {
+          map.set(item.emoji, item.name);
+        }
+      });
+    });
+    emojiNameByChar = map;
+    const chars = Array.from(map.keys()).sort((a, b) => b.length - a.length);
+    emojiPattern = chars.length && new RegExp(chars.map(escapeRegExp).join('|'), 'g');
+  }
+
+  let ready = false;
+  const readyPromise = fetch('/social/json/emojiBank.json?v=1')
+    .then(resp => resp.ok && resp.json())
+    .then(emojiBank => emojiBank && buildEmojiIndex(emojiBank))
+    .catch(() => {
+      // Emoji names not available: emojis will remain unlabeled.
+    })
+    .then(() => {
+      ready = true;
+    });
+
+  function addAccessibleNameToEmojis(html) {
+    if (!emojiPattern) {
+      return html;
+    }
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    const textNodes = [];
+    let node;
+    while ((node = walker.nextNode())) {
+      emojiPattern.lastIndex = 0;
+      if (node.parentElement?.getAttribute('role') !== 'img' && emojiPattern.test(node.nodeValue)) {
+        textNodes.push(node);
+      }
+    }
+    textNodes.forEach(textNode => {
+      const fragment = document.createDocumentFragment();
+      let lastIndex = 0;
+      let match;
+      emojiPattern.lastIndex = 0;
+      while ((match = emojiPattern.exec(textNode.nodeValue))) {
+        if (match.index > lastIndex) {
+          fragment.appendChild(document.createTextNode(textNode.nodeValue.slice(lastIndex, match.index)));
+        }
+        const span = document.createElement('span');
+        span.setAttribute('role', 'img');
+        span.setAttribute('aria-label', emojiNameByChar.get(match[0]));
+        span.textContent = match[0];
+        fragment.appendChild(span);
+        lastIndex = match.index + match[0].length;
+      }
+      fragment.appendChild(document.createTextNode(textNode.nodeValue.slice(lastIndex)));
+      textNode.parentNode.replaceChild(fragment, textNode);
+    });
+    return container.innerHTML;
+  }
+
+  window.EmojiAccessibility = {
+    isReady: () => ready,
+    ready: readyPromise,
+    addAccessibleNameToEmojis,
+  };
+})();

webapp/src/main/webapp/js/ExtendedDomPurify.js

@@ -43,7 +43,7 @@
           case 'url' :
             const url = match.getUrl();
             const tag = match.buildTag();
-            tag.setAttr('href', encodeURI(url));
+            tag.setAttr('href', url);
             if (match.getUrl().indexOf('/') === 0 || match.getUrl().indexOf(window.location.origin) === 0) {
               return true;
             } else {

webapp/src/main/webapp/js/sanitize-html-directive.js

@@ -17,6 +17,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 (function() {
+  function setSanitizedHtml(el, html) {
+    el.innerHTML = html && EmojiAccessibility.addAccessibleNameToEmojis(html) || '';
+    if (html && !EmojiAccessibility.isReady()) {
+      EmojiAccessibility.ready.then(() => {
+        el.innerHTML = EmojiAccessibility.addAccessibleNameToEmojis(html);
+      });
+    }
+  }
   window.Vue.directive('sanitized-html', function (el, binding) {
     let content = binding.value;
     if (content) {
@@ -36,7 +44,7 @@
     if (!el.classList.contains('reset-style-box')) {
       el.classList.add('reset-style-box');
     }
-    el.innerHTML = content && ExtendedDomPurify.purify(content) || '';
+    setSanitizedHtml(el, content && ExtendedDomPurify.purify(content));
   });
   window.Vue.directive('sanitized-html-no-embed', function (el, binding) {
     let content = binding.value;
@@ -54,6 +62,6 @@
       }
 
     }
-    el.innerHTML = content && ExtendedDomPurify.purify(content) || '';
+    setSanitizedHtml(el, content && ExtendedDomPurify.purify(content));
   });
 })();

webapp/src/main/webapp/vue-apps/activity-stream/components/activity/content/ActivityEmbeddedHTML.vue

@@ -41,7 +41,13 @@ export default {
   data: () => ({
     maxWidth: 320,
     elementReady: false,
+    emojiBankReady: EmojiAccessibility.isReady(),
   }),
+  created() {
+    if (!this.emojiBankReady) {
+      EmojiAccessibility.ready.then(() => this.emojiBankReady = true);
+    }
+  },
   computed: {
     embeddedHTML() {
       const htmlElement = this.activity?.templateParams?.html;
@@ -89,7 +95,8 @@ export default {
   methods: {
     computeEmbeddedHTML(htmlElement) {
       const tempdiv = document.createElement('div');
-      tempdiv.innerHTML = ExtendedDomPurify.purify(htmlElement);
+      const purifiedHtml = ExtendedDomPurify.purify(htmlElement);
+      tempdiv.innerHTML = this.emojiBankReady && EmojiAccessibility.addAccessibleNameToEmojis(purifiedHtml) || purifiedHtml;
       if (tempdiv.firstElementChild.style.maxWidth) {
         tempdiv.firstElementChild.style.maxWidth = `${this.maxWidth}px`;
       }

webapp/src/main/webapp/vue-apps/activity-stream/components/activity/content/ActivityLink.vue

@@ -186,7 +186,8 @@ export default {
     useEmbeddedLinkView: true,
     summaryLinesToDisplay: 2,
     isLandscapeThumbnail: false,
-    activityViews: null
+    activityViews: null,
+    emojiBankReady: EmojiAccessibility.isReady(),
   }),
   computed: {
     showFooter() {
@@ -304,13 +305,15 @@ export default {
       return this.summary && this.$utils.htmlToText(this.summary) || '';
     },
     summaryElement() {
+      const purifiedHtml = this.summary && ExtendedDomPurify.purify(`<div>${this.summary}</div>`) || '';
       return {
-        template: this.summary && ExtendedDomPurify.purify(`<div>${this.summary}</div>`) || '',
+        template: this.emojiBankReady && purifiedHtml && EmojiAccessibility.addAccessibleNameToEmojis(purifiedHtml) || purifiedHtml,
       };
     },
     titleElement() {
+      const purifiedHtml = this.title && ExtendedDomPurify.purify(`<span>${this.title}</span>`) || '';
       return {
-        template: this.title && ExtendedDomPurify.purify(`<span>${this.title}</span>`) || '',
+        template: this.emojiBankReady && purifiedHtml && EmojiAccessibility.addAccessibleNameToEmojis(purifiedHtml) || purifiedHtml,
       };
     },
     bodyClass() {
@@ -370,6 +373,9 @@ export default {
   created() {
     this.retrieveActivityProperties();
     window.addEventListener('resize', this.displayReadMore);
+    if (!this.emojiBankReady) {
+      EmojiAccessibility.ready.then(() => this.emojiBankReady = true);
+    }
   },
   mounted() {
     this.displayReadMore();