写点什么

简单聊聊配合 dialog 使用 popover 的问题

作者:Adrian Roselli

  • 2023-06-14
    北京
  • 本文字数:1441 字

    阅读完需:约 5 分钟

简单聊聊配合dialog使用popover的问题

首先澄清一点,这里要讨论的不是 popover 和 dialog 谁好谁错,也不是要站队支持哪一方。我想聊的是如何通过模式混合和模式匹配帮助用户解决潜在问题。

 

00:00 / 00:00
    1.0x
    • 3.0x
    • 2.5x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.75x
    • 0.5x
    网页全屏
    全屏
    00:00

     

    台本:视频演示的是弹窗跳出来,挡住了带 ARIA dialog 角色的<div>模态对话框。焦点切换和手动关闭都没法解决这个遮挡问题。但是,原生 HTML <dialog>元素能够正常位于弹窗更前方。演示中的对话框是一段超时警告,提示用户按下按钮,否则会在一份复杂表单的第 14 步(共 72 步)中被注销。

     

    这个演示页面,模拟的是我们怎么争分夺秒地填写一份复杂的多步骤表单。当用户点击切换提示来获取关于当前字段的更多信息时,系统会弹出一个对话框,提示用户除非点击按钮、否则将会被注销。但这个延时按钮被切换提示给挡住了。用户按下 Esc 想关闭切换提示,但关掉的却是对话框。也就是说,用户没法正常延长注销时间,只能眼睁睁看着自己已经填完的内容全部作废,然后气得骂娘。

     

    但使用〈dialog〉元素实现的对话框就不会遇到这个问题。

     

    所以我强烈建议大家,除非确认所有模态对话框都已经被转换成了原生 HTML <dialog>、或者经过了严格的布局位置测试,否则别轻易在项目中引入 popover。有些朋友可能轻蔑地笑了——别嚣张,您只是目前还没用上,再过一、两年可就说不准了。

     

    这个示例来自 Chrome Canary 115,并不属于最终版本,所以情况仍有改善的可能。

     

    来点技术

     

    我曾在之前的文章中讨论过用<div role="dialog">实现对话框的好处,这种方式通过了可访问性测试而且效果良好。其中还用到了 inert polyfill,我不确定 inert 会不会影响这次的演示,感兴趣的朋友可以亲自试试。

     

    Scott O’Hara 也在今年 1 月的帖子(https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html)中,整理了一份关于在对话框中合理使用原生 HTML <dialog>元素的指导。

     

    5 月 23 日,Google Chrome 开发者博客发布了 popover API 的介绍帖子。其中解释了手动关闭弹窗和自动关闭弹窗的区别,二者在演示视频里都有体现。后者是在弹窗容器失去焦点时关闭,而前者则要求用户手动触发。

     

    在视频中,popover 关闭方法并不会影响它与<div role="dialog">的交互。但是将<dialog> 与手动关闭的 popover 一同使用时,弹窗容器会被放置在模态后面且不会遮挡我们正确查看模态内容。当弹窗被设置为自动(浅色,默认)关闭时,则<dialog> 一出现弹窗就会消失。

     

    下图所示为实际效果。我没有费力气修改切换提示,实在太麻烦了。总之截至本文撰稿时,这些情况仅适用于 Chrome Canary。欢迎大家自己上手体验,但我可以保证,切换提示就是不愿出现在我们希望它们出现的位置上。



    回顾

     

    说点题外话,如果大家只打算用 popover 实现视觉或者行为效果,而无需考虑语义、结构、DOM 顺序、内容乃至附加的元素流,那要不要 popover 其实影响不大。

     

    考虑到目前 <dialog>的支持效果仍然比 popover 更好,所以在新项目中继续用 <dialog>应该也没啥问题。但如果您的新项目需要用到稳健性较差的框架/库,那么根据 Scott 的指导意见,最好别选 <dialog>。

     

    对于现有项目,其中或多或少可能存在与非-<dialog>代码相关的技术债务。那么在用<dialog>替换现有对话框之前,建议大家先别急着把任何 popover 功能列进开发日程,否则情况就是视频演示那个样子。

     

    原文链接:


    https://adrianroselli.com/2023/05/brief-note-on-popovers-with-dialogs.html


    相关阅读:


    Vue3 使用 Teleport 封装 一个 Dialog

    Dialog 对应的 Context 必须是 Activity 吗?

    面向函数编程:关于函数式组件、dialog 的 api 化

    Flutter 让你的 Dialog 脱胎换骨吧!

    2023-06-14 14:34150265

    评论

    发布
    暂无评论
    发现更多内容

    java培训 | Mybatis的特性

    @零度

    mybatis JAVA开发

    面试官神级问题:DNS服务器是否可以加快我们的网络访问速度?

    wljslmz

    服务器 DNS 6月月更

    如何在 Django 中使用 MVT 创建基本项目?

    海拥(haiyong.site)

    django 6月月更

    低代码实现探索(四十二)数据+方法+组件

    零道云-混合式低代码平台

    直播倒计时1天!天翼云HPC解决方案助力企业腾飞

    天翼云开发者社区

    今天 3 点!Intel Arch 和高性能存储技术两大 SIG 核心成员在线分享|第 21-22 期

    OpenAnolis小助手

    容器 镜像 直播 内核 龙蜥大讲堂

    Flink CDC 在大健云仓的实践

    Apache Flink

    大数据 flink 编程 流计算 实时计算

    C#入门系列(十四) -- 结构体应用

    陈言必行

    C# 6月月更

    如何使用 API 的方式消费 SAP Commerce Cloud 的订单服务

    汪子熙

    node.js SAP commerce 电商云 6月月更

    打造“更懂电池”的充电桩 星云股份底气何来?

    E科讯

    文档管理系统应该具备哪些功能?

    小炮

    【Python技能树共建】scrapy 上手篇

    梦想橡皮擦

    Python 爬虫 Python爬虫 6月月更

    交友app源码未来的发展趋势是什么?

    开源直播系统源码

    签约喜报 | 月财生态签约旺链科技,区块链溯源让有机产品“有迹可循”

    旺链科技

    区块链 产业区块链 食品溯源 有机食品

    医疗机构如何利用云原生加速智慧医院建设?

    York

    云原生 系统架构 智慧医疗 医疗信息化 互联网医疗

    InfoQ 极客传媒 15 周年庆征文 | Kettle实现ES到ES循环增量抽取

    写程序的小王叔叔

    架构 kettle ELK Stack InfoQ极客传媒15周年庆

    Push还是Pull,这是个问题么?

    MatrixOrigin

    push Pull MatrixOrigin MatrixOne 数据库·

    实战模拟│揭秘为啥年会你抽不到特等奖

    随机 概率 抽奖系统 6月月更

    OpenHarmony 官网文档有哪些上新?上篇:应用开发文档上新

    OpenHarmony开发者

    OpenHarmony

    小程序IDE,快速配置让App具备“一码通”能力

    Speedoooo

    ide 二维码 一码通

    如何在 Vue 项目中,通过点击 DOM 自动定位VSCode中的代码行?

    vivo互联网技术

    Vue 前端 vscode vite webpack

    NLP论文领读|缺少有标注的数据集怎么训练文本检索模型?来看看 LaPraDoR怎么做的吧

    澜舟孟子开源社区

    人工智能 自然语言处理 神经网络 深度学习 nlp

    Android技术分享| 自定义LayoutManager

    anyRTC开发者

    音视频 移动开发 Andriod 动画效果 LayoutManager

    从社恐到社牛,多亏了这款私人学习成长暗器!

    博文视点Broadview

    新闻速递 | MobTech受邀参与华为开发者联盟沙龙,谈数据智能撬动增长

    MobTech袤博科技

    移动互联网 运营 精细化运营 华为开发者联盟 HDG

    了解 Session、LocatStorage、Cache-Control、ETag

    CRMEB

    EasyNLP带你玩转CLIP图文检索

    阿里云大数据AI技术

    数据挖掘 存储 算法框架/工具 机器学习/深度学习

    芯动科技加入龙蜥社区,创新驱动生态发展

    OpenAnolis小助手

    操作系统 芯片 龙蜥社区 CLA 芯动科技

    百问百答第42期:应用性能探针监测原理-.net

    博睿数据

    智能运维 博睿数据 性能监测

    理解异步

    大熊G

    JavaScript 前端 6月月更

    【高并发】高并发环境下构建缓存服务需要注意哪些问题?

    冰河

    并发编程 多线程 高并发 异步编程 6月月更

    简单聊聊配合dialog使用popover的问题_大前端_InfoQ精选文章