Problem/Motivation

To improve the accessibility of the modal close buttons it would be better if they were buttons with appropriate aria labels etc.

Currently, the close button looks like this:
<span class="class-modal-close spb_close">×</span>

Steps to reproduce

  1. Install and configure the modal
  2. Use the configured setup to visit the page where the modal should display
  3. Open the modal
  4. Inspect the code

Proposed resolution

Should be something like:
<button type='button' aria-label='close' class="class-modal-close spb_close">×</button>
This should work better for users who rely on the content being read out by a screen reader as the html will be more semantically correct.

Remaining tasks

Investigate the modal open and minimise buttons also.

User interface changes

Should display no differently for sighted users using a mouse.

API changes

None

Data model changes

Dom elements will change slightly.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

the_g_bomb created an issue. See original summary.

the_g_bomb’s picture

Status: Active » Needs review
the_g_bomb’s picture

Issue summary: View changes
alina.basarabeanu’s picture

StatusFileSize
new334.71 KB

The patch is working with drupal/simple_popup_blocks (8.x-2.8) and drupal/core (9.4.2)

i-trokhanenko’s picture

Status: Needs review » Reviewed & tested by the community

The MR5 - https://git.drupalcode.org/project/simple_popup_blocks/-/merge_requests/... works fine for me. Making RTBC. Thanks!

i-trokhanenko’s picture

Version: 8.x-2.x-dev » 8.x-3.x-dev
the_g_bomb’s picture

Thanks for updating the target branch

i-trokhanenko’s picture

Status: Reviewed & tested by the community » Fixed

Committed. Thanks for the contribution Gareth and Alina!

Status: Fixed » Closed (fixed)

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