Accessibility Issue - Visible label and accessible name do not match

[user33129]

• Issue description:
  On the LinkedIn Feed widget, the “Like” icon is being flagged by SiteImprove with this issue: “Visible label and accessible name do not match. Include the label text in the accessible name of the element.”

• Link to the page with the widget in question:
  https://www.si.umich.edu/about-umsi/news

[Max]

Hi there and welcome to the Community, @user33129

Thanks for flagging this up!

Our devs will investigate the issue and I’ll report back once I have any news

[Max]

Hi there, @user33129

We’ve applied a local fix using this script in the Custom JS section on the Settings tab of your widget’s settings:

const WIDGET_ID = '1aafad70-0a37-492c-9f2e-ed9c95cb1fd0';

const addAriaLabelObs = () => {
	const carousel = document.body.querySelector(
		`.elfsight-app-${WIDGET_ID} .es-carousel-layout-container`
	);

	if (!carousel) {
		setTimeout(addAriaLabelObs, 250);
		return;
	}

	const ariaLabelObs = new MutationObserver(() => {
		const counters = carousel.querySelectorAll(
			'[class*="Counters__Container-sc"]'
		);

		counters.forEach((counter) => {
			const likeLink = counter.querySelector(':scope > :first-child');

			if (likeLink.ariaLabel === 'Like') {
				const likeCount = likeLink.querySelector(
					':scope > :last-child > *'
				).textContent;
				likeLink.ariaLabel = `${likeCount} Likes`;
			}

			const commentLink = counter.querySelector(':scope > :last-child');

			if (commentLink.ariaLabel === 'Comment') {
				const commentCount = commentLink.querySelector(
					':scope > :last-child > *'
				).textContent;
				commentLink.ariaLabel = `${commentCount} Comments`;
			}
		});
	});

	ariaLabelObs.observe(carousel, {
		childList: true,
		subtree: true,
	});
};

addAriaLabelObs();

Our devs are also working on a global fix. I’ll update you once it’s released