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 192 times)

fgm

  • Junior Member
  • *
  • Posts: 37
  • Karma: +2/-0
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
  • Sr. Member
  • *****
  • Posts: 369
  • Karma: +46/-1
    • 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.
Sorrow hides well in your shell. A fellow man with hurt to spare.
Dear one, here I am to share the fear. An act of kindness, without an amen.
Come in, the fire's warm. Burn the rope and dance some more.

fgm

  • Junior Member
  • *
  • Posts: 37
  • Karma: +2/-0
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