The Great CSS Expansion

CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.

Butler's Log

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

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

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

#Modals #React #dialog #redux

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

Вступление Модальные окна — один из самых недооценённых слоёв UI-архитектуры. Формы, подтверждения, панели действий — в любом крупном проекте их десятки. И почти в каждом проекте их управление со...

Хабр
Quick Tip: Dialog Focus

The specifications for dialogs and modals recommend placing focus on the first focusable item in the dialog. The vast majority of the time this is a close button. this means that a screen reader us…

Nat Tarnoff
Popover API or Dialog API: Which to Choose? | CSS-Tricks

Choosing between Popover API and Dialog API is difficult because they seem to do the same job, but they don’t! After a bit lots of research, I discovered that the Popover API and Dialog API are wildly different in terms of accessibility and we'll go over that in this article.

CSS-Tricks

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

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

#accessibility #modals #html #aria

Mastering Dialog Accessibility - Vispero

Dialogs are a fundamental component of modern web interfaces, but ensuring their accessibility requires careful attention to multiple WCAG success criteria. This comprehensive guide will walk you through the essential requirements for validating dialog accessibility under WCAG 2.2, following the structured approach you’d expect from accessibility experts. Why does dialog accessibility matter? Dialog accessibility is […]

Vispero
Opening and Closing Dialogs Without JavaScript Using HTML Invoker Commands

Learn how to use HTML invoker commands to open and close dialogs without writing any JavaScript.

Scripting on Caffeine

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 | CSS-Tricks

Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the (even in modal mode).

CSS-Tricks

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

Combining view transitions and the dialog element, possible?

Getting a close button to hang off of a dialog - Darin Senneff

Have you ever had to implement a modal dialog with a close button designed to hang off of the corner? While not a huge lift for most developers, there’s a few…

Darin Senneff