首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SwiftUI Release 引入的辅助焦点管理

这个新功能使得在SwiftUI中处理辅助技术(如 VoiceOver 和 Switch Control)的焦点状态变得更加轻松。...通过使用这些工具,我们能够以与无辅助技术相同的方式处理辅助焦点。...通常,屏幕上有多个元素,您可能希望在它们之间移动焦点。为了支持这种情况,SwiftUI 提供了一种通过枚举定义可聚焦字段并在它们之间切换的方法。...总结在这篇文章中,我们深入探讨了 SwiftUI Release 引入的辅助焦点管理功能,使得处理辅助技术(如 VoiceOver 和 Switch Control)的焦点状态变得更加轻松。...此外,我们介绍了一种高级用法,通过枚举定义可聚焦字段并在它们之间切换,以更好地支持屏幕上多个元素的焦点移动。

12210

理解音频焦点 (第 23 部分):更多的音频焦点用例

您的应用不处理音频焦点的情况下: 导航语音和音乐混在一起播放将会使用户分心。 您的应用处理了音频焦点的情况下: 当导航开始播报语音的时候,您的应用需要响应音频焦点丢失,选择回避模式,降低声音。...用例二 :用户在打电话的时候启动游戏(游戏播放音频) 您的应用不处理音频焦点的情况下: 通话声音和游戏声音的重叠播放同样会让用户的体验非常糟糕。...您的应用处理了音频焦点的情况下: 在 Android O 中,有一个应对诸如本用例的音频焦点的功能,叫做延迟音频聚焦。 假如当用户在通话中打开游戏,他们想玩游戏,不想听到游戏声音。...需要做到这些的程序如:录音或语音识别应用程序 您的应用请求获得的音频焦点,如果是来自于系统授权的,那么便可以安心地开始录制,因为系统了解并确保手机在此期间可能生成或存在的其它音频不会干扰到您的录制。...在 Android O 上,如果您的应用程序在请求音频焦点时被拒,系统可以等音频焦点空闲时发送给您的应用程序(延迟聚焦)。 想详细了解如何在您的应用中用代码实现音频焦点,请阅读 第三篇文章。

2.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue要点记录(待更新)

    如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。...动态绑定class和style以及使用组件时如何添加动态class 自动添加前缀 当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀...有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。 显示过滤/排序结果 事件处理器 ? 事件修饰符 ? ? 键值修饰符 ?...滑鼠按键修饰符也是2.1.0 新增,.left .right .middle,这些修饰符会限制处理程序监听特定的滑鼠按键。...v-model修饰符 不加.lazy就是在input中输入或退格,对应的数据就跟着改变(input事件); 加.lazy就是当输完后,input失去焦点时,对应数据进行改变(change事件)。 ?

    1.4K30

    JavaScript(十二)

    事件处理程序 ---- 事件就是用户或浏览器自身执行的某种动作。如 click、load 和 mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件监听器)。...因为用户可能会在 HTML 元素一出现在页面上就触发相应的事件,但当时的事件处理程序有可能尚不具备执行条件 其次,扩展事件处理程序的作用域链在不同浏览器中会导致不同结果 最后,HTML 与 JavaScript...这也意味着通过 addEventListener() 添加的匿名函数将无法移除。 大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。...UI(User Interface,用户界面)事件,当用户与页面上的元素交互时触发 焦点事件,当元素获得或失去焦点时触发 鼠标事件,当用户通过鼠标在页面上执行操作时触发 滚轮事件,当使用鼠标滚轮(或类似设备...有以下 4 个焦点事件: blur: 在元素失去焦点时触发 focus: 在元素获得焦点时触发 focusin: 在元素获得焦点时触发。

    2.9K20

    【译】W3C WAI-ARIA最佳实践 -- 控件

    当对话框被打开时,焦点移动到对话框内的元素。请参阅下面关于初始焦点处理的注释。 Tab: 将焦点移到对话框内的下一个可聚焦元素。 如果焦点是最后一个元素,将焦点移动到对话框内的第一个可聚焦元素。...NOTE 当对话框被打开时,根据内容的性质和大小放置焦点。 在任何情况下,焦点都应该移动到对话框中的一个元素上。 除非建议某个操作的情况,焦点应该被初始设置在第一个可聚焦的元素上。...通常这种情况下使用 警告对话框。 如果对话框内容仅包含提供额外信息或是继续处理的交互,则建议将焦点设置为最有可能使用的元素上,例如 "OK" 或 "Continue" 按钮。...所以, 以下两点同时出现时,标记为模态对话框: 应用程序代码防止所有用户以任何方式和对话框外的元素进行交互。 视觉样式模糊了对话框外的内容。...NOTE 当工具提示组件显示时,焦点停留在触发元素上。 如果当触发元素获得焦点时唤起工具提示组件,当元素失去焦点时(onBlur),工具提示组件消失。

    4.6K30

    前端优秀实践不完全指南

    假设用户没有鼠标,这个真不一定是针对残障人士,很多情况下,用户拿鼠标的手可能在干其他事情,比如在吃东西,又或者在 TO B 类的业务,如超市收银、仓库收货,很可能用户拿鼠标的手操作着其他设备(扫码枪)等等...页面上可以聚焦的元素,称为可聚焦元素,获得焦点的元素,则会触发该元素的 focus 事件,对应的,也就会触发该元素的 :focus 伪类。...通过元素的 :focus 伪类以及键盘 Tab 键切换焦点,用户可以非常顺畅的在脱离鼠标的情况下,对页面的焦点切换及操作。...而其本身的默认样式又不太能被产品或者设计接受,导致了很多人会在焦点元素触发 :focus 伪类时,通过改变 border 的颜色或者其他一些方式替代或者直接禁用。...CodePen Demo -- :focus-visible example 可以看到,使用鼠标点击,不会触发 :foucs,只有当键盘操作聚焦元素,使用 Tab 切换焦点时,outline: 2px

    98820

    前端优秀实践不完全指南

    假设用户没有鼠标,这个真不一定是针对残障人士,很多情况下,用户拿鼠标的手可能在干其他事情,比如在吃东西,又或者在 TO B 类的业务,如超市收银、仓库收货,很可能用户拿鼠标的手操作着其他设备(扫码枪)等等...页面上可以聚焦的元素,称为可聚焦元素,获得焦点的元素,则会触发该元素的 focus 事件,对应的,也就会触发该元素的 :focus 伪类。...通过元素的 :focus 伪类以及键盘 Tab 键切换焦点,用户可以非常顺畅的在脱离鼠标的情况下,对页面的焦点切换及操作。...而其本身的默认样式又不太能被产品或者设计接受,导致了很多人会在焦点元素触发 :focus 伪类时,通过改变 border 的颜色或者其他一些方式替代或者直接禁用。...CodePen Demo -- :focus-visible example[23] 可以看到,使用鼠标点击,不会触发 :foucs,只有当键盘操作聚焦元素,使用 Tab 切换焦点时,outline:

    88320

    扫码与中文输入法

    附录、无焦点扫码优化 针对扫码输入,理论上来说是需要首先聚焦 input 输入框的,但是为了更好的用户体验,即使没有聚焦我们也可以做一些优化手段来让用户正常扫码的。...在网页里面除了输入元素有焦点事件,浏览器网页本身也有焦点事件。 就跟我们其他 pc 应用一样,刚打开应用的时候该应用都处于 focus 状态。...因此,针对无焦点输入得分为两种情况处理,一种是整个网页页面都没有焦点,这种情况是系统层面的行为,我们没办法处理。...另一种就是浏览器网页本身是聚焦的,input 输入框未聚焦,这种情况还是可以做一些事情的。 对于 input 无焦点的解决办法就是,全局监听。...当然,既然做到了这一层,那么根据扫描的“码”的内容来判断输入的是什么码,然后根据内容将特定的内容填写到对应的 input 框,这也能顺手解决一个页面有多个输入框自动扫码触发输入框聚焦的情况。

    1.1K10

    【译】W3C WAI-ARIA最佳实践 -- 布局

    在应用阅读模式时,屏幕阅读器用户只能发现可聚焦的元素和标记可聚焦元素的内容。因此,屏幕阅读器用户可能会在不知情的情况下忽略网格中包含的元素,当它们不可聚焦或不用于标记列或行。...数据网格键盘交互 以下键通过在网格的单元格之间移动焦点来提供网格导航。默认情况下,这些键盘命令在网格元素接收到焦点后默认可用。例如,用户将焦点移动具有 Tab 的网格后。...(译者注:一般情况下,屏幕阅读器用户会使用Tab快速浏览页面上的内容,顺序为从上到下、从左到右,此时,若工具栏获取焦点,则将焦点设置在第一个可聚焦的元素上,若使用 Shift + tab 反向浏览,若工具栏获取焦点...,则将焦点设置在最后一个可聚焦的元素上。)...在应用程序中,快速访问工具栏非常重要,例如,从编辑器的文本区域快速访问到编辑器的工具栏,建议使用文档快捷键,从相关上下文中移动焦点到对应工具栏。

    6.2K50

    京喜小程序首页无障碍优化实践

    当障碍用户聚焦到轮播图后,读屏软件将子元素的描述朗读读来。轮播图继续轮播,焦点索引却不会随轮播状态自动更新,而是跟随当前子元素滑动消失在屏幕中。若要获取更新后的轮播信息,需要重新聚焦。 ?...,读屏软件会将聚焦的子元素(商品图、名字、价格、利益点等)一个个的读出来。...商品图 但单独读出每个子元素,不便于障碍用户理解商品卡片的完整含义。 类似这样的场景,可以将商品卡片当作一个按钮整块处理。...理想情况下,当障碍用户聚焦到商品卡片,读屏软件将整合的商品信息朗读出来,并提示是按钮类型。 但实际情况并非如此。...轮播图焦点差异 ? 轮播图 安卓:焦点位置会跟随子元素滑动消失; iOS:焦点位置固定不变,不会随子元素滑动而消失。 价格读取差异 ?

    1.4K31

    对话框、模态框和弹出框看起来很相似,它们有何不同?

    (注意:将焦点困在一个元素中不使该元素成为模态元素,但如果它是真正的模态元素,则焦点无法移动到外部元素,因为外部元素不是可聚焦的)。...WAI-ARIA 规定,当使用 role="dialog" 时,应至少包含一个可聚焦的元素,并在对话框打开时将焦点移动到其中一个可聚焦的元素上。...它们共同点是它们由两个部分组成:一个是触发器元素,另一个是被触发的元素。 披露组件不会捕获焦点,没有背景,也不是模态的。它们通常使用触发器或特定的关闭按钮进行关闭或折叠。...对于弹出窗口,它只在“有意义的地方”的情况下执行(请参阅弹出窗口解释器)。如果用户没有触发它,将它移动到 DOM 中较早的适当位置。 当模态对话框关闭时:如果用户触发了它,将焦点返回到触发器。...对于 popover,只有在“有意义”的情况下才会执行 (请参考 popover 解释器)。如果用户没有触发它,将焦点移动到 DOM 中适当的位置。

    4K00

    小程序-云开发-如何对敏感词进行过滤即内容安全的检测(下)

    作者 | 随笔川迹 ID | suibichuanji 前言 撰文:川川 您将在本文中学习另外一种方式如何在小程序中对一段文本进行检测是否含有违规内容 云函数中进行简单的配置一下,就可以实现文本内容的校验...小程序端进行文本内容的弱校验,减少API的请求 如何将涉及违规的文本内容用*号代替,进行过滤处理 云函数调用方式的优点(推荐使用) 本文重点在于 学会如何在小程序云开发中的云函数后端进行配置,实现文本内容的校验...onFocus() { console.log('聚焦焦点时'); }, // 失去焦点时 onBlur(event) { console.log("失去焦点时");...事件的触发应该是在失去焦点的时候,就进行常规自定义文文本内容校验的 /** * * 您也是可以单独将自定义的违规词汇放到一个utils文件,单独js文件当中,通过export的方式导出来,在想要使用的地方引入进去也是可以的...中写几行云函数JS代码,就可以完成一个文本内容安全校验的功能 当然也提到了,在小程序端进行敏感文本的弱校验,具体的时机是在失去焦点的时候,就进行文本的内容的弱校验 以及当遇到敏感词汇时,进行特殊符号处理

    3.1K10

    【译】W3C WAI-ARIA最佳实践 -- 表单

    所有项目都是可聚焦的,如 Keyboard Navigation Inside Components。...例如,当在编辑文本时按下快捷键时,一个富文本编辑器的菜单栏可能会获得焦点,例如alt + F10。在这种情况下,点击Escape 或从菜单中激活一个命令可能会将焦点返回给编辑器。 4....Left Arrow 和 Up Arrow: 移动焦点到组合中的上一个单选按钮,取消选中先前聚焦的按钮,并选中新聚焦的按钮。如果焦点在第一个按钮上,焦点移动到最后一个按钮。...在这种情况下,为元素添加 button 角色,可以帮助辅助技术用户理解元素的功能。但是,更好的解决方案是调整其视觉设计,以匹配其功能和ARIA角色。...button 有一个可访问的标签 默认情况下,可访问名称是从按钮元素内部的所有内容计算得来。但是,无障碍名称也可以使用 aria-describedby 或 aria-label 提供。

    8.3K30

    CSS 下拉菜单与 focus

    focus 伪类 focus 伪类 :focus 表示被点击、触摸或 tab 选中的元素,笼统地说就是「获得焦点」的元素。 当初实现这个需求的时候同样考虑过采用 :hover 或者 :active。...Spectre 解释是这样让按钮可获得焦点,事实上,并非所有元素默认支持聚焦。本来 是可以获得焦点的,只不过要 带 href 属性。...稍微查询就会发现,tabindex 是个全局属性,也就是说可以给几乎任何元素加上以使其可以聚焦,如 、 等,当然也包含不带 href 属性的 。...上面是 tabindex 决定元素是否可以被聚焦,其实 tabindex 还可以决定元素能如何被聚焦以及被聚焦的顺序,而这些就在赋给 tabindex 的值控制的范畴。...上面表述中的「一般」表示这其实是有例外的,比如点击其他默认可聚焦的元素(如 、button 等等)就会使新聚焦的元素顶替原聚焦的元素让先前的元素失焦。

    5.6K20

    Web 用户体验设计提升实践

    很多情况下,用户拿鼠标的手可能在干其他事情,比如在吃东西;又或者在 To B 类的业务,如超市收银、仓库收货,很可能用户拿鼠标的手操作着其他设备(扫码枪)等等。...页面上可以聚焦的元素,称为可聚焦元素,获得焦点的元素,则会触发该元素的 focus 事件。对应地,也会触发该元素的 :focus 伪类。...下面的截图,完全由键盘操作完成: [ ] 通过元素的 :focus 伪类以及键盘 Tab 键切换焦点,用户可以非常顺畅的在脱离鼠标的情况下,对页面的焦点切换及操作。...而其本身的默认样式又不太能被产品或者设计接受,导致了很多人会在焦点元素触发 :focus 伪类时,通过改变 border 的颜色或者其他一些方式替代或者直接禁用。...Button: [ ] CodePen Demo - :focus-visible example 可以看到,使用鼠标点击,不会触发 :foucs,只有当键盘操作聚焦元素,使用 Tab 切换焦点时,outline

    1.3K20

    Chrome 102:新增两个 HTML 属性、两个 JS API !

    inert 属性 inert 属性是一个全局的 HTML 属性,它可以告诉浏览器忽略元素的用户输入事件,包括焦点事件和来自辅助技术的其他事件。...例如,我们想开发一个模态框,你希望在模态框可见时将焦点聚焦在模态框内。或者,对于用户并不总是可见的抽屉,添加 inert 可确保当抽屉不在屏幕上时,键盘用户不会意外与其进行交互。...:它会被所有类型的导航触发,无论是用户执行了一个动作(例如点击链接、提交表单或返回和前进)还是以代码的方式触发导航。...File Handling API File Handling API 可以让已安装的 PWA 向操作系统注册文件处理程序。注册后,用户就可以单击文件然后使用已安装的 PWA 打开它了。...这非常适合与文件交互的 PWA 程序,例如图像编辑器、IDE、文本编辑器等。

    1.9K30

    JavaSwing_8.1:焦点事件及其监听器 - FocusEvent、FocusListener

    在这种情况下,原来的聚焦状态将被自动一旦操作完成恢复,或者,对于窗口失活的情况下,当窗口被重新激活。...对处理焦点事件感兴趣的类 要么实现此接口(以及它包含的所有方法) 要么扩展抽象FocusAdapter类(仅覆盖感兴趣的方法) 然后,使用组件的addFocusListener方法向组件注册从该类创建的侦听器对象...要获取许多组件的焦点状态,请考虑在KeyboardFocusManager类上实现PropertyChangeListener实例,如如何使用焦点子系统中的将焦点更改跟踪到多个组件中所述。...例如,当焦点从按钮转到文本字段时,按钮会触发焦点丢失事件(文本字段为相反的组件),然后文本字段会触发焦点获取事件(带有按钮作为相反的组件)。失去焦点以及获得焦点的事件可能是暂时的。...为按钮生成一个临时的焦点丢失事件。 单击FocusEventDemo窗口的顶部。该按钮触发了聚焦事件。 按键盘上的Tab。焦点移至列表。 再次按Tab键。焦点移到文本区域。

    4.7K10
    领券