Go directly to the post when clic the "read more" link

[Ccile]

Hello, do you think you can you add an option which may allowed to go directly to the post on linkedin when clic on the “read more” button so that we do not have all the text in the widget ? Thanks

[Max]

Hi there @Ccile

Thanks for adding your idea to the Wishlist!

We’ll try to think about this opportunity in the future, and I’ll make sure to update you here in case of any news

[Max]

Hi @Ccile

Happy to tell you that our devs found a simple solution for your case!

Please add this code to the Custom CSS field on the Appearance tab of your widget’s settings and let me know if it helped

[class*="Text__Container-sc-"]
[class*="Text__Control-sc-"] {
  pointer-events: none;
}

[Ccile]

Hello Max, thanks but that’s not what I had in mind. With this custom css I still have all the text in the widget and that’s what I don’t want. I just need to have the text trim and a link to the post on the “read more” button.

[Max]

Oh, got it! To hide all the text and display only Read More button, please add one more code to the Custom CSS field:

[class*="Shortener__Outer-sc"] {
  display: none;
}

[Ccile]

Hey… thanks, but I need some words of the text !! With the last code there is no more text !
I know css well. I don’t think it is possible to do that with css only. elfsight must add a class on the div which is around the hidden text or propose an option not to import all the text (just a number of characters, for example).

[Max]

In this case there 2 possible solutions:

1. You can reduce the height of the container and display only the 1st line (should be added to the Custom CSS field):

[class*="Shortener__Outer-sc"] {
  max-height: 24px !important;
}

2. You can set the number of words you’d like to display:

const MAX_WORDS = 4;

const LISTEN_TYPES = {
	one: {
		select: (selector, root) => root.querySelector(selector),
		validate: (node) => !!node,
	},
	all: {
		select: (selector, root) => root.querySelectorAll(selector),
		validate: (node) => node?.length > 0,
	},
};
function listenStep(args) {
	args.node = args.select(args.selector, args.root);
	if (!args.validate(args.node)) {
		args.step++;
		if (args.step < args.limit)
			setTimeout(() => {
				listenStep(args);
			}, args.delay);
		else args.reject();
	} else {
		args.resolve(args.node);
	}
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
	const args = {
		root: document,
		node: undefined,
		selector,
		delay: 100,
		limit: 50,
		step: 0,
		select: LISTEN_TYPES[type].select,
		validate: LISTEN_TYPES[type].validate,
		...customArgs,
	};
	if (type === 'one' || type === 'all') {
		return new Promise((resolve, reject) => {
			listenStep({ ...args, resolve, reject });
		});
	}
}

asyncListenFor('[class*="Shortener__Inner-sc"] div', 'all').then((textElements) => {
	textElements.forEach((textElement) => {
		text = textElement.textContent;
		const newText = text.split(' ', MAX_WORDS).join(' ') + '...';
		textElement.textContent = newText;
	});
});

This code should be added to the Custom JS field on the Settings tab of your widget’s settings.

Try it out and let me know if you like what you see

[Ccile]

Thanks, the js works perfectly. Now I need to add tabindex=“0” and role=“link” to the read more button … like this:

<div class="Text__Control-sc-6taaia-2 exyHje" tabindex="0" role="link">Lire la suite</div>

Is it possible in js to ?

[Max]

Please let me check it with the devs. Once they respond, I’ll report back

[Ccile]

Of course !
Just so you know, this code is very important to make the link accessible (ARIA: link role - Accessibility | MDN)

[Max]

Hi @Ccile

Here is the script for your case (should be added to the Custom JS field):

const READ_MORE_SELECTOR =
  '[class*="eapps-linkedin-feed"] [class*="Text__Control-sc"]';

const makeAccessible = (el) => {
  if (!(el instanceof HTMLElement)) {
    return;
  }

  el.setAttribute('tabindex', '0');
  el.setAttribute('role', 'link');
};

asyncListenFor(READ_MORE_SELECTOR, 'all').then((readMoreBtns) =>
  readMoreBtns.forEach((btn) => makeAccessible(btn))
);

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      const readMoreBtn = node.querySelector(READ_MORE_SELECTOR);
      makeAccessible(readMoreBtn);
    }
  }
});

asyncListenFor('[class*="eapps-linkedin-feed"] .es-grid-layout').then((grid) =>
  observer.observe(grid, { childList: true })
);

Try it out and let me know how it worked

[Ccile]

Thanks, it works.

But I’m not sure about using the widget because there are still too many things to do to make it accessible… some are easy to explain (no alt on the img because they are decorative images) and some are not (not readable without css) .
I hope elfsight will work on this …

Anyway, thanks for your time.

Ccile

[Max]

Hi @Ccile

Glad to hear that the solution worked!

I see your point about the image alt text. Could you please also provide more details on what other accessibility stuff you’d like to be improved?