Improve the accessibility of the Images preview dialog modal

Created on 12 November 2024, about 1 month ago

Problem/Motivation

The Images preview dialog modal currently has a few accessibility related problems:

The notes on top and the bottom of the dialog modal body have a too low color contrast. #999 against #fff results in a contrast of 2.8:1 the minimum required contrast for text smaller 24px is 4.5:1 to meet WCAG SC1.4.3
The greyish image outlines, neither the light nor the darker is meeting the minimum for non text contrast. The border of lighter outline for none selected image styles has a contrast of 1.6:1 (#ccc againt #fff) the darker outline for the selected image style has a color contrast of 2.8:1 (#999 against #fff)
The elements inside the Images preview are complelety inaccesible by the keyboard. In consequence i am also unable to asses the aural interface. The only elements available in the aural interface within the rotor are the headings for the images styles.
I've noticed that the dialog modal isn't using the aria-modal attribute set to true that core is using since drupal 10.3.0. . jQuery 1.14.0 added that option.

Steps to reproduce

Proposed resolution

regarding point 1 & 2: increase the color contrast
regarding point 3: add all available image style previews and the larger preview image to the tab order
regarding point 4: the following commit added the functionality to core: https://git.drupalcode.org/project/drupal/-/merge_requests/8425/diffs?co...

Remaining tasks

After the Images preview dialog modal becomes keyboard accessible and the elements outside the dialog modal get excluded from the accesibility object modal by the set aria-modal attribute the aural interface of the dialog has to be assessed more thoroughly.