elk icon indicating copy to clipboard operation
elk copied to clipboard

Alt text (code) wrongly displayed on image lightbox

Open LukaHarambasic opened this issue 2 years ago • 6 comments

Pre-Checks

  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
  • [X] Providing a screenshot or video to reproduce the issue or show visually what was meant.
  • [ ] I am willing to provide a PR.

Describe the bug

Heyho, The alt text is displayed in the top right corner of an image. It works for regular text.

image

But on this toot, the author pasted the code from the screenshot as a markdown code block.

Toot screenshot toot with code

Broken alt text screenshot of the same toot opened where in the top left corner only CSS is written

Content is there highlighting the content in the lightbox to show that its there but not correctly displayed

Solution?

So I think displaying the code here doesn't add value, a screen reader will get it form the alt text, and others can read it on the screenshot, and I can't think of another scenario where you add code as alt text without a screenshot. So what about just displaying "Code from the picture" instead of the actual code but keeping the alt attribute as it is?

Reproduction video or screenshot

Open this this toot and check the alt text.

image

Additional Context

Firefox, Mac (M1) - I don't think that it's relevant, but happy to provide more info.it's relevant, but I would be

LukaHarambasic avatar Jan 17 '23 14:01 LukaHarambasic

Solve in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

stackblitz[bot] avatar Jan 17 '23 14:01 stackblitz[bot]

image

I think it's written by author. And actually this is a picture, not a code block.

alexzhang1030 avatar Jan 17 '23 15:01 alexzhang1030

The colorfull part in your screenshot is an image, and the alt is a markdown code block

LukaHarambasic avatar Jan 17 '23 18:01 LukaHarambasic

The colorfull part in your screenshot is an image, and the alt is a markdown code block

I guess the author wrote it on purpose 🤣

Cause Elk don't add extra things

alexzhang1030 avatar Jan 18 '23 02:01 alexzhang1030

Yes, I never assumed that Elk added this. But Elk is responsible for displaying it - and the displaying is broken :)

LukaHarambasic avatar Jan 18 '23 09:01 LukaHarambasic

Alt text should not need to be visible by default if the image loads successfully. I would be OK with the alt text being behind an [alt] button that displays a popover with as many lines as necessary, like in Alex's screenshot.

ZMYaro avatar Jan 18 '23 20:01 ZMYaro