Fix several accessibility related issues on the edit Image style page

Removed link from image and add spacing on top of image so now focus is clearly visible around (view actual size). So now there is only one link to view actual size of image. Attached screenshot(removed_link_from_image_and_focus_visible.png) for the same.

I have tested MR 8816. Now unnecessary link tag removed.
I moved it to RTBC.
THANKS!!

This looks like a nice fix.

After reading the issue summary I see that the proposed resolution here has two options. It should indicate which option has been selected and perhaps even link to the relevant comments. This is also changing the UI so there should be before and after screen shots available in or linked to in the issue summary.

There are questions in #8 that still need answers. And I don't see any review of the code changes.

As a reminder, when making screenshot remember to list the steps taken to create them. These should usually be in the issue summary.

Thanks for the reminder and the comprehensive assessment of the status quo @quiteone, I completely forgot about this issue. I took another look. After reading through everything including the recent change I would suggest the following ( in case there is an agreement i would update the issue summary accordingly).

1. I would go with the solution @tinto added in #7 🐛 A Image style page has two unnecessary link tags as well as a hidden focus Needs work . From my perspective that looks the cleaner approach compared to the one taken in MR8816.
2. the div of the preview image currently has margin: auto. i would suggest to change that to margin: 0.5em auto auto auto. that way the focus outline for the view actual size link is completely visibleand not hidden in part underneath the preview image.
3. and one additional detail i've noticed while revisiting this issue, which could be either done within this issue or in a follow up issue, is adding the width and height value to the alt text. at the moment you only get "sample original image" announced when the preview image gets into focus. At the moment a screen you have to start reading with VO-A and that way you get "sample original image" then "600px" and then "800px". Even if you let the screenreader read through the page that way you still wouldnt know if 600px is the width or height. by adding both in context to the alt text the information would be easily accessible.

I've played around with it a bit more and came to the conclusion that it would make sense to cover all the three points mentioned in #17 🐛 A Image style page has two unnecessary link tags as well as a hidden focus Needs work within this issue. i've already have a working copy locally (see the two videos - current.mp4 is the current state without the changes applied, update.mp4 demonstrates these changes). i will hone things a little further and if there are no other issues discuss it at the usability meeting tomorrow to get some more opinions and feedback in regards of the micro copy.

Usability review

We discussed this issue at 📌 Drupal Usability Meeting 2024-08-02 Needs work . That issue will have a link to a recording of the meeting. For the record, the attendees at today's usability meeting were @benjifisher, @rkoller, @shaal, and @worldlinemine.

If you want more feedback from the usability team, a good way to reach out is in the #ux channel in Slack.

In general the group was in agreement with the proposed changes. It was also noted that the newly added keyboard and screen reader related changes are in scope for this issue, since the issue summary already raises the point that there are two redundant links, the view actual size link and the decorative image, for each sample.

The View actual size link was in lack of context. A screen reader user was unable to determine when tabbing to the link if the actual size for the "source" or the "derivative image" should be viewed, the link text was identical. My initial idea that i brought to the meeting was to add an aria-label to the link. But the consensus in the group was to remove the link entirely and append Click for actual images to the title Preview.

For the image label there was a clear consensus to move from Original which is sort of unclear to Source image and to drop the usage of the image style name which could be quite lengthy in a few cases and go with Derivative image instead. At first we were uncertain if Derivative would be a too abstract and complicated term in particular for none native speakers and novice users. But for one the image style settings are only available to administrators and site builders aka advanced users, and derivative is the clearest unambiguous term in particular in combination with the term Source. An additional plus the terminology used in code becomes inline with the user facing micro copy.

The group also agreed on altering the alt text further and adjust it to the new image label terminology plus adding some punctuation to the newly added width and height values.

In regards of the remaining tasks, the usability review in #20 🐛 A Image style page has two unnecessary link tags as well as a hidden focus Needs work covered the questions raised in #8 🐛 A Image style page has two unnecessary link tags as well as a hidden focus Needs work . I've also added before and after screenshot based on the recents changes from the usability review. And i have updated the issue summary accordingly (removed "problem 2" and adjusted the problem section as well as the proposed resolution section)

There are two open questions:

1. To those more familiar with tests, i've managed the MR pass the linters but it is failing tests. But i am not sure if the failing of tests is because of one of my changes (in the context of php i've only changed the micro copy and not actual code) or something completely arbitrary? If someone more familiar with tests could take a look please? Therefore I keep the issue at needs work status.
2. While making the changes and writing up the comment with the summary of the usability meeting i've realized it might be not necessarily clear for screen reader users just based on the alt text that the image in focus is NOT the image but an decorative preview sample. "technically" with the announcement with the announcements of the dimensions of the actual image screen reader users wouldnt have to click and follow the link at all. so maybe the alt text could be improved further?

and adjusted the title since it wasnt reflecting the actual scope anymore properly.

in regards of #21 🐛 A Image style page has two unnecessary link tags as well as a hidden focus Needs work .2 i've asked for feedback on the #accessibility channel and @mgifford thought 21.2 shouldnt be a problem. so i am setting the issue to needs review

Just rebased MR9060 to fix a problem that lead to an error checking out the feature branch. for reference the error is caused by a spelling fix committed in https://git.drupalcode.org/project/drupal/-/commit/8b368d712d83900765744... that is causing the error on non case sensitive file systems like for macos in my case.

smustgrave → changed the visibility of the branch 3273099-a-image-style to hidden.

Definitely agree it's a cleaner look

Focus appears to highlight the entire link.

Checked the alt text and definitely more descriptive.

Going to mark

nod_ → closed merge request !9060

Committed and pushed 843bf350040 to 11.x and 82984b589f5 to 10.4.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.