In WYSIWYG embed modal for existing images, the alt text field should have a default value instead of placeholder text

I think this is related to #3084011: The source of alt text in embedded image media is not clear.

Adding #3083994: Difficult for authors to embed image media with empty alt text., which is also related.

Promoting to major as per #2834729: [META] Roadmap to stabilize Media Library.

Removed the placeholder attribute and #default_value is used to populate the field based on default or overridden alt text.

Fixed tests

The patch looks good to me, relatively simple change. I think it would be good to get an a11y maintainer to officially sign off on this, but as far as I can tell this is RTBC. Thanks!

Tested #8, works for me as well
RTBC + 1

Patch #8 can't be applied.Needs reroll.

Checking patch core/modules/media/src/Form/EditorMediaDialog.php...
Checking patch core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php...
error: while searching for:
    $this->openMetadataDialogWithKeyPress(static::RETURN_KEY);
    // Assert that the placeholder is set to the value of the media field's
    // alt text.
    $assert_session->elementAttributeContains('named', ['field', 'attributes[alt]'], 'placeholder', 'default alt');

    // Fill in the alt field, submit and return to CKEditor.
    $who_is_zartan = 'Zartan is the leader of the Dreadnoks.';

error: patch failed: core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php:659
error: core/modules/media/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php: patch does not apply

Rerolled patch #8.

Tested the patch in #14, applied smoothly and working fine.
Thanks for the patch.

Thanks @andrewmacpherson, I think we now have all we need to get this in.

If no alternative text is provided, then the existing alt text for the image will be used. If we always provide a default value, then a user has to explicitly remove the alternative text for to get that behaviour.

The current behaviour is confusing, but this patch is dealing with that by essentially hiding how the widget actually works as far as I can tell.

This feels like a duplicate of #3084011: The source of alt text in embedded image media is not clear, but marking needs work rather than duplicate so there's a chance to discuss more.

This is roughly what I was suggesting on the Drupal UX call.

The text field would display the store media alt text and be disabled until the Override box is checked. If the user unchecks the Override box then the text reverts to the stored Media alt text and is again disabled.

We discussed this in the Usability meeting today #3198188: Drupal Usability Meeting 2021-02-19. Here is I hope an accurate summary of what we talked about doing (the proposal in the previous comment is another idea of how to make this more understandable):

a) We're talking about a dialog that you get when you click "Edit media" after embedding a media item in content. The dialog has a field that is currently called "Alternate text", and the ability to align the image (left/right/center) and add a caption. The field in question in this issue is the alternate text field.

What this field actually does:
- If its value is empty, the alt text shown comes from the underlying image.
- If its value is not empty, the value overrides the alt text from the underlying image.

b) Without this patch, when you open this dialog, if the value is empty, you'll see placeholder text showing the underlying image value. And if the value is not empty, you'll see the value. If you then delete the value, you'll see the placeholder text. This is confusing because the user doesn't know where this placeholder is coming from, and there is nothing in the UI telling them what is happening.

c) With this patch, the behavior is that if the value was empty before opening the dialog, the underlying image's value is put in as the value, and there is not a placeholder. This is bad for a few reasons:
- The user still doesn't understand what is happening.
- If the user opened the dialog in order to change alignment, for example, and doesn't touch the alt text field, and it was previously an empty value, after saving they have now saved an override. So, they do nothing in the field, and the database-saved value changes.

So.... What this issue really needs is a better UI that explains what is going on. The suggestion we came up with:
1. Above the Alternate text field that is currently in the dialog, display something that looks like this:

Current alternate text
(Show the value from the underlying image here)

2. Change the label of the Alternate text field to say Alternate text override (because that is what it actually is)

3. Don't have a placeholder and don't grab the value from the underlying image. If it's empty, leave the field empty.

4. Update the description of the Alternate text override field (and/or the Current alternate text value display?) to explain what is going on. Maybe something like:
Override the alternate text from _____ (where is it actually coming from?). [and then an explanation of what alternate text is, which is currently "Short description of the image used by screen readers and displayed when the image is not loaded. This is important for accessibility."]

We didn't come up with the details of (4) in our meeting.

I am removing the tag for usability review. See #21: we discussed this issue at the Usability meeting on 2021-02-19.

My personal vote is for the suggestion in #21 rather than the one in #20. I generally do not like the pattern of a checkbox that enables a text field: all you need is the text field, which you can leave empty (like leaving the checkbox un-checked) or not (like checking the box). And, as explained in #21, we still want to clarify where the default text comes from.

I strongly oppose any solution that removes the option of using the value from the media item, which may be updated. One key feature of image media (compared to image file fields) is that they are designed to be reusable. If an image is used in many places on the site, and I need to fix a typo in the alt text, then I want the option of fixing them all at once.

For sites that do not want that behavior, it would be nice to have an easy way to save the default text as the override text. With the suggestion in #21, an editor could copy and paste the default text. (That is not an option with placeholder text, the current implementation.) A contrib module could provide a more conventient option.

Rerolled #14 against 9.5.x and 10.1.x. It seems to be that the tests in 10.1.x are removed, but I'm not totally sure about that, so maybe someone else can verify that.

I keep the issue at needs work because of #22.

Tied to WCAG 1.1.1

For maximum usability, I would suggest the following.

• Show the existing media library default alternative text outside and preceding the field, so that someone who is typing new text in the field can refer to the existing text while they are typing the new text. This reduces cognitive load and also makes it easier for the content editor to:
  • decide whether they want to keep the default alt text or write new alt text.
  • revert any edits while still having the original available to them.
  • do a quality comparison between the default text and the new text.
• Ensure that the displayed existing text is copy-and-paste-able.
• Leave the placeholder text as is.