#modals — Public Fediverse posts

Accessibility Bugs Are Often Architecture Bugs, by @hackernoon:

https://hackernoon.com/accessibility-bugs-are-often-architecture-bugs?ref=frontenddogma.com

#accessibility #architecture #bugs #mistakes #components #consistency #modals #forms #automation

Accessibility Bugs Are Often Architecture Bugs, by @hackernoon:

https://hackernoon.com/accessibility-bugs-are-often-architecture-bugs?ref=frontenddogma.com

#accessibility #architecture #bugs #mistakes #components #consistency #modals #forms #automation

Using and Styling the Dialog Element, by @geoff (@csstricks):

https://css-tricks.com/using-and-styling-the-dialog-element/?ref=frontenddogma.com

#modals #html #css

Using and Styling the Dialog Element, by @geoff (@csstricks):

https://css-tricks.com/using-and-styling-the-dialog-element/?ref=frontenddogma.com

#modals #html #css

Building an Accessible Modal Dialog on the Native “<dialog>”, by (not on Mastodon or Bluesky):

https://agustinbarrientos.com/writing/senior-eye/accessible-modal-dialog/?ref=frontenddogma.com

#modals #accessibility #html #typescript

Building an Accessible Modal Dialog on the Native “<dialog>”, by (not on Mastodon or Bluesky):

https://agustinbarrientos.com/writing/senior-eye/accessible-modal-dialog/?ref=frontenddogma.com

#modals #accessibility #html #typescript

Animating the “dialog” Element Using View Transitions, by @rikschennink:

https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/?ref=frontenddogma.com

#modals #html #animations #viewtransitions #javascript #css

Animating the “dialog” Element Using View Transitions, by @rikschennink:

https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/?ref=frontenddogma.com

#modals #html #animations #viewtransitions #javascript #css

In-N-Out Animations: Dialogs, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/in-n-out-animations-dialogs-part-1-3/?ref=frontenddogma.com

#animations #modals #css

In-N-Out Animations: Dialogs, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/in-n-out-animations-dialogs-part-1-3/?ref=frontenddogma.com

#animations #modals #css

The Great CSS Expansion, by @pavellaptev.bsky.social (@gitbutler.com):

https://blog.gitbutler.com/the-great-css-expansion

#css #anchorpositioning #popovers #modals #animations #transitions #forms

The Great CSS Expansion, by @pavellaptev.bsky.social (@gitbutler.com):

https://blog.gitbutler.com/the-great-css-expansion

#css #anchorpositioning #popovers #modals #animations #transitions #forms

Модальные окна в React: архитектура управления для сложных интерфейсов

Модальные окна — один из самых недооценённых слоёв UI-архитектуры. Формы, подтверждения, панели действий — в любом крупном проекте их десятки. И почти в каждом проекте их управление со временем превращается в хаос. Не потому что разработчики ленивые. А потому что модалки обманчиво просты. useState(false) — и готово. Пока модалка одна, в одном месте, с одним набором данных — проблем нет.

https://habr.com/ru/articles/1019824/

#Modals #React #dialog #redux

Quick Tip: Dialog Focus, by @nattarnoff.bsky.social:

https://tarnoff.info/2026/03/10/quick-tip-dialog-focus/

#accessibility #modals #focus #tipsandtricks

Quick Tip: Dialog Focus, by @nattarnoff.bsky.social:

https://tarnoff.info/2026/03/10/quick-tip-dialog-focus/

#accessibility #modals #focus #tipsandtricks

Popover API or Dialog API: Which to Choose?, by @zellwk.bsky.social (@csstricks):

https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/

#popovers #modals #apis #accessibility #javascript

Popover API or Dialog API: Which to Choose?, by @zellwk.bsky.social (@csstricks):

https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/

#popovers #modals #apis #accessibility #javascript

Mastering Dialog Accessibility, by (not on Mastodon or Bluesky):

https://vispero.com/resources/mastering-dialog-accessibility/

#accessibility #modals #html #aria

Mastering Dialog Accessibility, by (not on Mastodon or Bluesky):

https://vispero.com/resources/mastering-dialog-accessibility/

#accessibility #modals #html #aria

Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands, by @schalkneethling:

https://schalkneethling.com/posts/opening-and-closing-dialogs-without-javascript-using-html-invoker-commands/

#modals #html

Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands, by @schalkneethling:

https://schalkneethling.com/posts/opening-and-closing-dialogs-without-javascript-using-html-invoker-commands/

#modals #html

There Is No Need to Trap Focus on a “dialog” Element, by @zellwk.bsky.social (@csstricks):

https://css-tricks.com/there-is-no-need-to-trap-focus-on-a-dialog-element/

#modals #focus #accessibility

There Is No Need to Trap Focus on a “dialog” Element, by @zellwk.bsky.social (@csstricks):

https://css-tricks.com/there-is-no-need-to-trap-focus-on-a-dialog-element/

#modals #focus #accessibility

What Is the Minimum Markup Needed to Create a Modal?, by (not on Mastodon or Bluesky):

https://www.maxdesign.com.au/articles/minimal-modal.html

#modals #minimalism #html #css #accessibility

What Is the Minimum Markup Needed to Create a Modal?, by (not on Mastodon or Bluesky):

https://www.maxdesign.com.au/articles/minimal-modal.html

#modals #minimalism #html #css #accessibility

Dialog View Transitions, by @medienbaecker:

https://medienbaecker.com/articles/dialog-view-transitions

#modals #javascript #viewtransitions

Dialog View Transitions, by @medienbaecker:

https://medienbaecker.com/articles/dialog-view-transitions

#modals #javascript #viewtransitions

Getting a Close Button to Hang Off of a Dialog, by @darin:

https://www.darins.page/articles/close-button-hang-dialog

#modals #buttons #css #anchorpositioning

Getting a Close Button to Hang Off of a Dialog, by @darin:

https://www.darins.page/articles/close-button-hang-dialog

#modals #buttons #css #anchorpositioning

NoLoJS: Reducing the JS Workload With HTML and CSS, by @aarontgrogg (@perfplanet.bsky.social):

https://calendar.perfplanet.com/2025/nolojs-reducing-js-workload-html-css/

#html #disclosurewidgets #forms #modals #popovers #navigation #scrolling #positioning

NoLoJS: Reducing the JS Workload With HTML and CSS, by @aarontgrogg (@perfplanet.bsky.social):

https://calendar.perfplanet.com/2025/nolojs-reducing-js-workload-html-css/

#html #disclosurewidgets #forms #modals #popovers #navigation #scrolling #positioning

Discover Dialog, by @sarajw (@matuzo):

https://www.htmhell.dev/adventcalendar/2025/9/

#html #modals #javascript #css

Discover Dialog, by @sarajw (@matuzo):

https://www.htmhell.dev/adventcalendar/2025/9/

#html #modals #javascript #css

Top Layer Troubles: Popover vs. Dialog, by @5t3ph (@matuzo):

https://www.htmhell.dev/adventcalendar/2025/1/

#css #positioning #popovers #modals

Top Layer Troubles: Popover vs. Dialog, by @5t3ph (@matuzo):

https://www.htmhell.dev/adventcalendar/2025/1/

#css #positioning #popovers #modals

NoLoJS: Reducing the JS Workload With HTML and CSS, by @aarontgrogg:

https://calendar.perfplanet.com/2025/nolojs-reducing-js-workload-html-css/

#html #disclosurewidgets #forms #modals #popovers #navigation #scrolling #positioning

NoLoJS: Reducing the JS Workload With HTML and CSS, by @aarontgrogg:

https://calendar.perfplanet.com/2025/nolojs-reducing-js-workload-html-css/

#html #disclosurewidgets #forms #modals #popovers #navigation #scrolling #positioning

Controlling Dialogs and Popovers With the Invoker Commands API, by @starshaped (@matuzo):

https://www.htmhell.dev/adventcalendar/2025/7/

#modals #popovers #apis #attributes #html

Controlling Dialogs and Popovers With the Invoker Commands API, by @starshaped (@matuzo):

https://www.htmhell.dev/adventcalendar/2025/7/

#modals #popovers #apis #attributes #html

#Development #Pitfalls
Top layer troubles, popover vs. dialog · How to avoid possible conflict points https://ilo.im/168t8f

_____
#TopLayer #HtmlDialog #PopoverAPI #Modals #Browser #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Pitfalls
Top layer troubles, popover vs. dialog · How to avoid possible conflict points https://ilo.im/168t8f

_____
#TopLayer #HtmlDialog #PopoverAPI #Modals #Browser #WebDev #Frontend #HTML #CSS #JavaScript

HTML “dialog”: Getting Accessibility and UX Right, by @jaredcunha.bsky.social:

https://jaredcunha.com/blog/html-dialog-getting-accessibility-and-ux-right

#html #modals #scrolling #accessibility #ux

HTML “dialog”: Getting Accessibility and UX Right, by @jaredcunha.bsky.social:

https://jaredcunha.com/blog/html-dialog-getting-accessibility-and-ux-right

#html #modals #scrolling #accessibility #ux

When to Use Modal vs. Dialog Components, by @a11ycollective:

https://www.a11y-collective.com/blog/modal-vs-dialog/

#modals #html #aria #accessibility

When to Use Modal vs. Dialog Components, by @a11ycollective:

https://www.a11y-collective.com/blog/modal-vs-dialog/

#modals #html #aria #accessibility

Avoid Adding Modals to Other Modals or Dropdowns, by @a11yMel:

https://melsumner.github.io/avoid-modals-in-nested-contexts

#accessibility #modals #wcag

Avoid Adding Modals to Other Modals or Dropdowns, by @a11yMel:

https://melsumner.github.io/avoid-modals-in-nested-contexts

#accessibility #modals #wcag

The Problems With Modals, and How to Solve Them, by @noeldemartin:

https://noeldemartin.com/blog/the-problems-with-modals-and-how-to-solve-them

#howtos #modals #vuejs #typescript

The Problems With Modals, and How to Solve Them, by @noeldemartin:

https://noeldemartin.com/blog/the-problems-with-modals-and-how-to-solve-them

#howtos #modals #vuejs #typescript

I don't consider having stacked modals anti-pattern.

I consider it an act of war.

#Software #WebDevelopment #WebDev #HTML #JavaScript #CSS #Modal #Modals #Popup #Popups #Programming #Coding #Code

I don't consider having stacked modals anti-pattern.

I consider it an act of war.

#Software #WebDevelopment #WebDev #HTML #JavaScript #CSS #Modal #Modals #Popup #Popups #Programming #Coding #Code

Where to Put Focus When Opening a Modal Dialog, by @aardrian:

https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html

#accessibility #modals #forms #focus

Where to Put Focus When Opening a Modal Dialog, by @aardrian:

https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html

#accessibility #modals #forms #focus

Move Modal in on a… “shape()”, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/move-modal-in-on-a-shape/

#modals #functions #css

Move Modal in on a… “shape()”, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/move-modal-in-on-a-shape/

#modals #functions #css

Getting Creative With HTML Dialog, by @malarkey (@csstricks):

https://css-tricks.com/getting-creative-with-html-dialog/

#html #modals

Getting Creative With HTML Dialog, by @malarkey (@csstricks):

https://css-tricks.com/getting-creative-with-html-dialog/

#html #modals

Create an HTML Dialog When You Click an Image, by @cassidoo:

https://cassidoo.co/post/html-dialog-on-image-click/

#html #images #modals