CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Closing modal images with the keyboard  (Read 48 times)

fgm

  • Newbie
  • *
  • Posts: 13
  • Karma: +2/-0
    • View Profile
Closing modal images with the keyboard
« on: 30 Nov 2019, 08:40:46 am »
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

  • Administrator
  • Full Member
  • *****
  • Posts: 185
  • Karma: +6/-0
    • View Profile
    • CutCodeDown -- Minimalist Semantic Markup
Re: Closing modal images with the keyboard
« Reply #1 on: 30 Nov 2019, 10:11:14 am »
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.
"It is amazing what can be accomplished when nobody cares who gets the credit." -- Kelly Johnson

fgm

  • Newbie
  • *
  • Posts: 13
  • Karma: +2/-0
    • View Profile
Re: Closing modal images with the keyboard
« Reply #2 on: 1 Dec 2019, 10:30:45 am »
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.
« Last Edit: 2 Dec 2019, 04:51:09 am by fgm »

 

Advertisement