Accessibility issue - text is clipped when resized

[user33129]

SiteImprove is flagging an issue with the LinkedIn widget when you increase the page size to 200%. We believe it only happens when there’s a LinkedIn post that’s text only, otherwise it only clips the image.

https://www.si.umich.edu/about-umsi/news

[Max]

Hi there, @user33129

Unfortunately, I wasn’t able to catch this issue when checking your website using the Siteimprove (event with 200% zoom). Could you please send me a screenshot of the error you see?

[user33129]

Here is what Siteimprove is flagging as an issue:

[user33129]

When you view the page source there is a lot more text in the description, but it is being clipped/trimmed in the widget so that all of the text isn’t visible.

[Max]

Thank you!

I’ve forwarded it to the devs and will update you once I have their response

[Max]

Hi there, @user33129

Thank you for waiting!

We’ve checked thing and it appears that Siteimprove is the only validator that identifies this issue.

Our devs suggested trying a custom solution. Please add this code to the Custom CSS field on the Style tab of your widget’s settings:

.es-text-shortener {
  line-height: 1.4 !important;
  position: relative !important;
}

.es-text-shortener[aria-expanded="false"] {
  max-height: calc(1.4em * 3) !important;
  overflow: hidden !important;
}

.es-text-shortener[aria-expanded="false"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.4em;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

.es-text-shortener[aria-expanded="true"] {
  max-height: none !important;
  overflow: visible !important;
}

.es-text-shortener[aria-expanded="true"]::after {
  display: none !important;
}

And this script should be added to the Custom JS field on the Settings tab of your widget’s settings:

(function () {
  const ROOT_SELECTOR =
    "#eapps-linkedin-feed-1aafad70-0a37-492c-9f2e-ed9c95cb1fd0";

  function ensureIds(root) {
    const containers = root.querySelectorAll(
      ".es-text-shortener-container"
    );

    containers.forEach((container, index) => {
      const text = container.querySelector(".es-text-shortener");

      if (!text) return;

      if (!text.id) {
        text.id = `elfsight-short-text-${index}-${Date.now()}`;
      }
    });
  }

  function syncState(root) {
    const containers = root.querySelectorAll(
      ".es-text-shortener-container"
    );

    containers.forEach((container) => {
      const button = container.querySelector(
        ".es-text-shortener-control"
      );
      const text = container.querySelector(".es-text-shortener");

      if (!button || !text || !text.id) return;

      button.setAttribute("aria-controls", text.id);

      const isExpanded = button.classList.contains(
        "es-text-shortener-control-hide"
      );

      button.setAttribute("aria-expanded", String(isExpanded));
      text.setAttribute("aria-expanded", String(isExpanded));

      text.classList.toggle("expanded", isExpanded);
    });
  }

  function observeRoot(root) {
    ensureIds(root);
    syncState(root);

    const observer = new MutationObserver(() => {
      ensureIds(root);
      syncState(root);
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ["class"],
    });
  }

  const globalObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node.nodeType !== 1) continue;

        const root =
          node.matches?.(ROOT_SELECTOR)
            ? node
            : node.querySelector?.(ROOT_SELECTOR);

        if (root) {
          observeRoot(root);
        }
      }
    }
  });

  globalObserver.observe(document.body, {
    childList: true,
    subtree: true,
  });
})();

Please try it out and let me know if it helped.

[user33129]

Thanks, that seems to have resolved the issue in Siteimprove.

[Max]

Awesome, you’re very welcome!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 3-month extension for your subscription - April Contest: What’s Your Top Widget Feature? Tell us and win 3 MONTHS FREE!

Check the details and join in