Add a button to show alt text for media

[j-f1]

Fixes #410.

An “ALT” button is added to the top-right corner of the media viewer. Tapping it opens a popover with the alt text. If there is no alt text the button will be hidden (and this works even when some images in a post have alt text and some don’t).

I’ve intentionally avoided the Twitter approach of adding the badge to images in the timeline/threads since IMO the ALT button provides little value and obscures the image content there, but there is tons of free real estate in the media viewer.

Things to consider:

• The close and ALT buttons don’t have great contrast with the background, would it make sense to make them stand out more? (especially since they can now be hidden by tapping on the image)
• What does the accessibility story here look like? The button isn’t super useful for folks using VoiceOver but it would be nice to let them copy the alt text, and it is necessary for people who use e.g. Voice Control
• Should the “ALT” label be translated?
• Currently the popover is rendered in dark mode, would it make sense to render it in light mode or tweak the background color to increase contrast? (maybe solid black instead of dark gray?)

https://user-images.githubusercontent.com/25517624/204108523-b10cb10a-be71-4ff8-973f-158172b4627d.MP4

[zeitschlag]

@j-f1 Awesome! 🥳 Thanks a lot, those image descriptions are actually something we wanted to take into on of the next releases. How did you know that? 😄

What's the reason for the button? Why don't you just show the image description (if it's there)? Note, that I'm not a UI/UX-person and I'm pretty sure, that @samhenrigold has an opinion on this, too

[j-f1]

How did you know that?

🔮 ;)

What's the reason for the button? Why don't you just show the image description (if it's there)?

I feel like the image description won’t be super valuable to most people looking at the screen (since they can just look at the actual image and don’t need to read the description). What’s more valuable is being able to see whether or not the image has a description at all (since you may not want to boost an alt-text-less image).

[FediVideos]

I feel like the image description won’t be super valuable to most people looking at the screen (since they can just look at the actual image and don’t need to read the description).

This isn't always the case, a lot of people use alt text to give extra context to an image which can be useful for non-disabled people too. Plus have had a number of people asking today how they can check their own alt text is correct on the app.

[sladewatkins]

I feel like the image description won’t be super valuable to most people looking at the screen (since they can just look at the actual image and don’t need to read the description).

This isn't always the case, a lot of people use alt text to give extra context to an image which can be useful for non-disabled people too. Plus have had a number of people asking today how they can check their own alt text is correct on the app.

Honestly, I use ALT text a ton, so do a lot of my friends (even neurotypical folks!) It's a big help to a lot of people, which is why this PR and the implementation LGTM.

[Gargron]

We now have mockups from our design team for this feature. It does not look exactly how you did it. I'm not quite sure how to handle this because I don't see a way to give guest access to the Figma file. Perhaps we could hand it off to one of our developers to adjust it?

[j-f1]

No worries! Happy to hand it off to someone on the team, or to work from an SVG export/screenshots or something of the relevant screens.

[j-f1]

Marking as draft for now until either someone from the team gets to it or I get access to the mockups.

[zeitschlag]

@j-f1 I'll just share the screenshot with you, as I'm stuck with ~~CI and~~ Onboarding, but so you can at least work here:

Margins for the button/alt-text-area are: 16 to left/right, 8 to the bottom. Corner radius is 4, background is #000 (black) with 85%, text is #FFF (white). SF-Symbol is xmark.circle.fill.

Does this help? If you need anything else, just HMU :)

[j-f1]

That looks great! Thanks :)

[j-f1]

Should the alt text be displayed in any way once the MediaPreviewViewController is opened?

[j-f1]

~Also, what should happen if a GIF has alt text?~ silly me that indicator is on the right side

[zeitschlag]

Should the alt text be displayed in any way once the MediaPreviewViewController is opened?

Good idea, why not? It also might be an idea to limit the height of the alt-text-view and put its content into a scrollview?

[j-f1]

Sounds good! Also wondering if you have the metrics for how far the alt button should be placed from the bottom/left edges of the media view.

EDIT: oh those are the 8/16 numbers you gave me. Makes sense!

[j-f1]

OK, updated! I did make a small change to the mocks to add a thin, semitransparent white border around the ALT button because otherwise it was very hard to see on black backgrounds. Let me know if I should change that up or remove it :)

I also tried to do my best to match the mockup but if there are any discrepancies I’m happy to sort that out too.

I also took the liberty of adding a fun little spring animation to transition between the collapsed and expanded states ✨ (yay SwiftUI!)

Translation is not implemented because as far as I can tell Mastodon does not have an API to translate image descriptions.

The PR retains the ALT button in the media preview scene because I was unable to get the text to be selectable inline (in particular, using the MetaTextViewRepresentable didn’t size itself properly, and there’s also some weirdness with the TouchBlockingView and context menu interaction I couldn’t sort out). Happy to push a little harder on that though if needed and/or just drop the button in the media preview scene.

https://user-images.githubusercontent.com/25517624/208745954-e05164d7-9a50-4035-93e3-4841af4c2f36.MP4

[zeitschlag]

it was very hard to see on black backgrounds

Awesome, thank you @j-f1

I also took the liberty of adding a fun little spring animation

LGTM :) Although I'm not a fan of SwiftUI (yet), I see some advantages :D

[dandeliontwine]

On the Mastodon iOS app on my iPhone, I still don't see an alt button indicator on photos where alt-text has been added, including my own photos. Was this branch supposed to fix that? Is there a delay from the merge and the implementation of the fix or should I be able to see the alt indicator? Thank you for all of the work you are doing on this.

[j-f1]

Releases generally happen every couple of weeks, so this probably won’t be available in the App Store build until January.

[dandeliontwine]

Okay, thank you so much!