Closing modal images with the keyboard

[fgm]

Hi, based on for_others/notACodeMonkey code I managed to fix the faulty image resize using object-fit:contain but I've found an accessiblity issue.

When opening a modal image there's no way to close it pressing Enter or Escape, the only way is pressing Tab several times and hitting Enter once another link is selected, but that's done blindly. How would you fix that?

[Jason Knight]

Conventional keyboard navigation WOULD be tab to get to the close button...

but if one insists on adding it further, I'd hook the window with an event listener for keypress, trap escape as and only if the modal is focused, and send modal.classList.remove('visible'); on match.

Knee deep in a 5K contract, but when I'm done I'll belt out the code to show you how to add that.

[fgm]

That would be great, thanks for the tip. With this code pressing tab goes to the following link in the page, skipping [close] button. Well, at least it's not fully broken since you can go back using navigation buttons as a regular image link although it doesn't add that click to history.

I have some knowledge of PHP, but I find javascript very confusing.