Mastodawn

i swear to god i can't find this by searching and it's driving me up the fucking wall

i'm trying to build an image modal using the <dialog> element

for some reason, the dialog element itself is focusable. i did not do this. i did not put tabindex on it. there is no interactivity on the dialog element itself. why the fuck is it focusable. i just want the close button to be focusable for goodness sake (and it is, and it's autofocused, that's nice at least, but why in the fresh hell can i tab back to the whole fucking dialog element when *i can't interact with it*??????)

i'm going to make a fresh page just to see if a dialog element i have done 100% nothing to is focusable just to cofirm that this isn't me but i'm pretty sure it's just *doing that*

yeah they're focusable by default why is that

you can't interact with them directly??????? afaik????? what am i missing

also ngl it's hard as fuck to find any information on accessible image modals that isn't outdated and telling you to just build a modal from a div

i wrote up an entire div modal because of bad tutorials before rewriting the whole thing for the dialog element

fuck me sideways

in other news the accessibility tree is complaining that the dialog element doesn't have keyboard support despite being focusable.

WHY IS IT FOCUSABLE

it's NOT EVERY BROWSER EDGHE DOESN'T DO THIS

firefox wtf

firefox

goddammit firefox

should i??????? set tabindex?????????? on the thing mdn says don't set tabindex?????????????????

i don't think they meant don't set it to -1 tbf

i think they meant don't set tabindex to make it focusable

i would like to cry

anyway i need further sr testing on this site but for now. i will lay down and cry.

by which i mean cuddle kes he's very helpful

kestrel the web developer

🩷 Stella 15h ago

@inherentlee oh yeah i was trying to link to such resources the other day but couldn’t 😭

@twinkle honestly i might write up what i did just so there is more of something out there but i feel very tenuously about my solution

🩷 Stella 15h ago

@inherentlee How

the mdn docs Deliberately says that the element mustn’t have tabindex because it is not interactive and not focusable

How the fuck

@twinkle i mean it doesn't have tabindex

but that isn't fucking stopping it!!!!!!!

🩷 Stella 15h ago

@inherentlee yeah nono i got that, i meant that when i started reading the mdn docs:

Warning: The tabindex attribute must not be used on the <dialog> element. See Additional notes.

in the Additional Notes:

Do not add the tabindex property to the <dialog> element as it is not interactive and does not receive focus. The dialog’s contents, including the close button contained in the dialog, can receive focus and be interactive.

HOW THE FUCK IS IT FOCUSABLE. HOW. IF MDN GOES TO GREAT LENGTH TO TELL YOU IT’S NOT FOCUSABLE BEFORE THE FIRST PARAGRAPH EVEN BEGINS. HOW??????? /lh

@twinkle oh yes yes we are on the same page

i'm going batshit i s2g

@twinkle i can fix it if i give it tabindex="-1"

which mdn says not to do

and which feels liek a horrific antipattern

i wanna CRY

🩷 Stella 15h ago

@inherentlee what the fuck. what the fuck. what the fuck. i fucking hate being a webdev. what the fuck. can i pick up drawing furry art instead. what the fuck

🩷 Stella 15h ago

@inherentlee im getting second hand truama

@twinkle oh to draw furry art