即时通讯桌面应用【免费下载链接】community-editionFree and Open Source messaging and emailing app that combines common web applications into one.项目地址https://gitcode.com/gh_mirrors/co/community-edition点击查看免费下载本篇技术指南以 Sencha Ext JS 无障碍支持包ext-aria的 sass 目录说明 为骨架结合本仓库community-edition / Rambox一个基于 Ext JS 的开源消息聚合应用中 ext-aria 与 ext-theme-aria 两个包的源码系统讲解 Ext JS 主题系统中 SASS 文件的组织约定etc/src/var三目录职责、变量与样式规则的层级关系以及如何为应用构建符合 ARIA / Section 508 要求的无障碍主题。读完本文你将掌握 ext-aria 包样式目录的定位与用途、每个实际 SCSS 文件的底层作用并能在自己的项目中通过sencha generate themerequires声明或build.properties注入等方式复现一套具备高对比度与键盘焦点指示的 ARIA 主题。一、ext-aria 包是什么从 package.json 可以看到ext-aria是 Sencha 出品的type: code代码包官方描述为summaryExt JS Accessibility SupportdetailedDescriptionCore support for Accessibility, ARIA and Section 508 for Ext JS也就是说它是 Ext JS 面向无障碍访问Accessibility、ARIAAccessible Rich Internet Applications与 Section 508 标准的核心支持包版本为 5.0.0。它的实现分两条线JS 线位于 overrides 目录通过Ext.define(..., { override: ... })的方式覆写大量 Ext JS 组件类Button、表单字段、Grid、Window、Menu 等为其注入role、aria-label、aria-labelledby等属性以及键盘导航逻辑并在包被引用时自动被 require 加载。SASS 线即 sass 目录为本篇主题提供配套的样式变量与规则保证上述 ARIA 行为在视觉上有明确的呈现高对比、焦点环等。二、ext-aria/sass 三层目录结构原文档核心内容ext-aria/sass/Readme.md 的全文指出本目录包含多种类型的 SASS 文件按如下子目录组织ext-aria/sass/etc ext-aria/sass/src ext-aria/sass/var这套etc/src/var划分并非 ext-aria 独有而是Sencha Ext JS 主题与包的标准 SASS 约定本项目根目录的 app.json 中sass: { namespace: Rambox }的配置注释也印证了这一点*.scss文件会按类名映射到sass/src与sass/var对应路径。三个目录的分工如下。1.var/—— 变量声明目录var/Readme.md 说明该目录存放按组件类命名的变量声明文件variable declaration files named by their component class。例如var/Component.scss—— 全局组件变量var/form/FieldSet.scss—— FieldSet 组件变量var/grid/header/Container.scss—— 网格表头容器变量var/panel/Tool.scss—— 面板工具Tool变量这些文件只声明 SCSS 变量通常带!default默认值标记不产出直接的 CSS 规则是主题可定制性的入口。2.src/—— 组件层级样式源目录src/Readme.md 说明该目录存放模仿组件类层级结构的 SASS 源文件SASS sources that mimic the component-class hierarchy构建时根据构建实际用到的类被收集进 CSS 产物gathered in to a build of the CSS based on classes that are used by the build。也就是说文件路径即类名映射src/form/Labelable.scss对应Ext.form.Labelablesrc/grid/header/Container.scss对应Ext.grid.header.Container只有应用真正使用到的组件类其对应 SCSS 才会进入最终构建避免冗余样式。3.etc/—— 杂项 / 需显式引入的样式目录etc/Readme.md 说明该目录存放杂项 SASS 文件与src/不同这些文件需要被显式使用Unlikeext-aria/sass/etc, these files need to be used explicitly结合上下文推断此处应为与自动收集的src/相对比。当前 etc/all.scss 为空占位文件对照 ext-theme-aria/sass/etc/all.scssetc目录也常用于放置像ext-all-access.scss这类整包入口样式需在构建配置中显式指定。附构建配置config.rb三个子目录之上config.rb 是 Compass 风格的 SASS 编译配置cur_dir File.dirname(__FILE__) output_style :nested其中output_style :nested指定编译输出采用嵌套nested格式的 CSS便于开发阶段阅读实际生产构建由 Sencha Cmd 接管并压缩。该文件与 ext-theme-base/sass/config.rb 内容一致属于包级 SASS 的标准配置。三、var/实际变量独立构建默认值与主题级变量体系ext-aria 作为独立代码包构建时由于不依赖具体主题其var/中的变量都提供了独立构建兜底默认值注释均标明when ext-aria is built standalonevar/Component.scss$base-color: #000 !default;—— 独立构建时基色默认为黑var/grid/header/Container.scss$grid-cell-selected-background-color: #000 !default;并派生出$grid-header-selected-cell-background-color: $grid-cell-selected-background-color !default;—— 网格单元格/表头选中背景var/panel/Tool.scss$tool-focus-background-color: transparent !default;—— 工具按钮聚焦背景默认为透明var/form/FieldSet.scss$fieldset-collapse-tool-margin: 2px 3px 0 0 !default;—— FieldSet 折叠工具外边距。这些!default声明意味着当 ext-aria 被并入真实主题如 ext-theme-aria构建时主题侧定义的同名变量会覆盖这些兜底值。这正是代码包只提供默认、主题负责视觉决策的分层设计——对比 ext-theme-aria/sass/var/panel/Tool.scss 中$tool-focus-background-color: $orange !default;即可看到覆盖关系。四、src/实际规则面向屏幕阅读器的关键样式ext-aria 的src/规则是 ARIA 无障碍在视觉层的直接体现每个文件都对应一个明确的无障碍问题。1. 表单错误消息屏幕外定位而非隐藏src/form/Labelable.scss/* override css for field error messages; * instead of display:none which makes * them unreadable to screen readers, * position them off screen */ .#{$prefix}form-invalid-icon ul { display: block; position: absolute; left: -10000px; top: -10000px; }注释明确说明了设计动机display: none会让屏幕阅读器完全读不到错误消息因此改为display: block并将元素绝对定位到屏幕外left/top: -10000px。这样既有视觉上的不可见又能保证辅助技术可以朗读到校验错误内容。其中$prefix变量来自同目录 src/Component.scss 的声明// When ext-aria package is built standalone, $prefix is not defined $prefix: x- !default;即独立构建时 CSS 类前缀兜底为x-与 Ext JS 默认Ext.baseCSSPrefix一致保证.#{$prefix}form-invalid-icon能正确编译为.x-form-invalid-icon。2. 网格表头选中单元格src/grid/header/Container.scss.#{$prefix}grid-header-ct .#{$prefix}grid-cell-selected { background-color: $grid-header-selected-cell-background-color; }为键盘导航模式下选中的表头单元格提供高亮背景颜色变量由var/定义主题可覆盖。3. 面板 / 窗口工具按钮的焦点指示src/panel/Panel.scss 与 src/window/Window.scss 内容一致.#{$prefix}panel-header .#{$prefix}tool.#{$prefix}focus .#{$prefix}tool-img { background-color: $tool-focus-background-color; } .#{$prefix}window-header .#{$prefix}tool.#{$prefix}focus .#{$prefix}tool-img { background-color: $tool-focus-background-color; }当工具按钮获得键盘焦点.x-focus类时为其图标提供背景色构成焦点环式视觉反馈。这与此前所述 FocusManager 的职责之一Provide a visual cue for focused components见 overrides/FocusManager.js 的类注释严格对应。五、把 ARIA 做到极致ext-theme-aria 的高对比度变量体系仅靠 ext-aria 包本身视觉层面只有上述少量兜底规则。完整的无障碍体验由基于 ext-theme-neptune 的高对比度主题 ext-theme-aria提供。其 package.json 声明{ name: ext-theme-aria, type: theme, requires: [ext-aria], extend: ext-theme-neptune, summary: ARIA Theme, detailedDescription: A high-contrast accessibility theme based on Neptune }主题通过requires: [ext-aria]自动拉取 JS 覆盖通过extend: ext-theme-neptune继承 Neptune 视觉底座。其 sass/var/Component.scss 定义了高对比配色核心$body-background-color: #000 !default; $base-color: #3f4757 !default; $base-highlight-color: mix(#fff, $base-color, 15%) !default; $base-light-color: mix(#fff, $base-color, 65%) !default; $base-dark-color: mix(#000, $base-color, 14%) !default; $orange: #ed9200 !default; $focus-color: $orange !default; $color: #fff !default; $font-size: 15px !default; $css-shadow-background-color: #000000 !default; $include-shadow-images: false !default;要点$orange: #ed9200是全局焦点色锚点被大量组件变量引用见下文文本主色$color: #fff配黑色系背景构成高对比度WCAG 意义上的明暗对比$font-size: 15px放大基准字号提升可读性$include-shadow-images: false关闭阴影贴图简化渲染并利于对比度。各组件变量围绕$orange/$base-color展开节选自 ext-theme-aria/sass/var文件关键变量无障碍意图button/Button.scss$button-default-base-color: #2a3142、$button-default-base-color-over: $orange、$button-default-border-color-focus: $orange、$button-default-color: #fff悬停/聚焦以橙色凸显白字高对比form/field/Base.scss$form-field-border-width: 2px、$form-field-focus-border-color: #ff9c33、$form-field-invalid-border-color: #C302px 粗边框、聚焦橙边框、无效红色标识grid/header/Container.scss$grid-header-selected-cell-background-color: $orange键盘选中的表头单元格高亮panel/Tool.scss$tool-focus-background-color: $orange、$tool-include-hover-icons: true、$tool-opacity: 1工具图标全不透明聚焦橙底menu/Menu.scss$menu-item-active-background-color: $orange、$menu-text-color: #fff菜单项激活态橙色高亮tab/Bar.scss$tabbar-strip-background-color: $orange标签条强调色window/Window.scss$window-body-background-color: #1f2833、$window-body-color: #fff窗口体深底白字panel/Panel.scss$panel-header-background-color: #3a4155、$panel-body-color: #fff面板深底白字slider/Multi.scss滑块拇指 16×16px增大滑块抓取区域可见ext-aria 的src/规则消费了$tool-focus-background-color等变量而 ext-theme-aria 的var/用$orange赋予其高对比取值——三层目录由此贯通成完整的主题管线var/定值 →src/产规则 → 构建输出 CSS。六、让 ARIA 生效的两条构建路径ext-aria 包的 Readme 给出了官方推荐的启用方式与本仓库 Ext JS 应用的 app.json 构建配置theme: rambox-default-themerequires: [ext-locale]sencha app build流程完全同构可直接套用。路径 A直接使用 ext-theme-aria推荐在应用app.json的theme字段设置为ext-theme-aria或基于它扩展自己的主题因主题requires: [ext-aria]JS 覆盖与 SASS 资源都会被自动纳入运行sencha app build产出含 ARIA 特性的 JavaScript 与 CSS 文件。路径 B自定义主题 requires 引入 ext-aria若不想整体切换主题例如需要保留原有品牌色与图片资源官方给出了在不动颜色和图片的前提下引入 ARIA 能力的方案sencha generate theme custom-aria-theme编辑新主题的package.json{ name: custom-aria-theme, ... requires: [ext-aria], extend: ext-theme-neptune }然后运行sencha app build。此时 ext-aria 的 JS 覆盖含 FocusManager 键盘导航与 SASS 默认样式含$tool-focus-background-color等兜底变量都会并入构建。路径 C不用 Sencha Cmd手动注入 JS 覆盖如果不使用 Sencha Cmd 构建应用可在自定义主题的.sencha/package/build.properties中追加build.operationsinclude \ -tagpackage-ext-aria随后在主题目录执行sencha package build产出包含 ext-aria JavaScript 类的主题构建产物。需要留意 Readme 的提示此种方式下 JS 来自 ext-aria 包但 CSS 仍是你自己的主题因此可能需要手动调整 SASS 变量为按钮等聚焦组件提供足够对比度正是前文$tool-focus-background-color、$button-*-focus-*一类变量的用武之地。FocusManager键盘导航的总开关无论走哪条路径ARIA 的键盘导航都依赖 FocusManager定义于 overrides/FocusManager.js被 overrides/Component.jsrequires。其职责按 WAI-ARIA 实践包括组件焦点管理、键盘导航、为聚焦组件提供视觉提示焦点环/框。初始化规则应用使用了 Viewport如 overrides/container/Viewport.js 所覆写的Ext.container.ViewportFocusManager 在Ext.onReady时自动启用未使用 Viewport需手动调用Ext.FocusManager.enable();。启用后F6键会在多个打开的窗口间循环切换焦点见toggleWindow逻辑表单字段获得焦点时通过aria-labelledby关联 label网格通过rolegridcell、aria-selected、aria-activedescendant等属性通告选中状态见 overrides/view/Table.jsWindow 自动注入 move / resize 工具按钮并绑定方向键移动/缩放见 overrides/window/Window.js。这些 JS 行为与src/中$tool-focus-background-color、$grid-header-selected-cell-background-color等视觉规则一一配对共同构成读得出、看得到、键盘可操作的完整无障碍闭环。七、组件级 ARIA 配置速查与样式配套使用在应用代码中可直接通过组件配置项声明无障碍语义定义于 overrides/Component.js配置项说明ariaRole组件的 ARIA role如region、presentation未设置时不输出其他 ARIA 属性ariaLabel直接指定aria-label与ariaLabelledBy互斥ariaLabelledBy通过选择器引用标签元素输出aria-labelledby#id可跨组件引用ariaDescribedBy通过选择器引用描述元素输出aria-describedbyariaAttributes附加 ARIA 属性对象用于状态无法推导的场景如aria-live、aria-flowto组件隐藏、禁用、显示、启用时onHide/onShow/onDisable/onEnable会自动同步aria-hidden、aria-disabled表单字段另通过 overrides/form/field/Base.js 维护aria-readonly、aria-invalidmarkInvalid/clearInvalid时联动其错误提示默认msgTarget: side配合src/form/Labelable.scss的屏幕外定位规则确保朗读器可感知校验失败。调试时留意 overrides/button/Button.js 的 WAI-ARIA 冲突检测带菜单的按钮若同时配置 toggle/href/handler会输出Ext.log.error提示避免菜单按钮与切换、链接、点击处理行为冲突。八、总结ext-aria/sass的三目录结构是 Ext JS 无障碍主题的最小骨架却也是整套体系的枢纽var/定义可被主题覆盖的变量默认值独立构建兜底src/按组件类产出面向屏幕阅读器与焦点可见性的 CSS 规则etc/存放需显式引入的杂项/整包样式config.rb以nested输出风格驱动 Compass 编译。当它与ext-theme-aria的高对比度变量体系$orange焦点色、2px 粗边框、深底白字以及 JS 层的 ARIA 覆盖FocusManager、role/aria-*属性注入组合后便形成从变量定制 → 规则生成 → 构建集成 → 运行时无障碍的完整链路。要在自己的 Ext JS 应用中复现只需记住两条核心命令sencha generate theme custom-aria-theme创建主题并在package.json中声明requires: [ext-aria]随后sencha app build或非 Cmd 场景在build.properties中追加-tagpackage-ext-aria后执行sencha package build。赞分享即时通讯桌面应用【免费下载链接】community-editionFree and Open Source messaging and emailing app that combines common web applications into one.项目地址https://gitcode.com/gh_mirrors/co/community-edition点击查看免费下载相关推荐ext-theme-classic 主题 Sass 目录结构详解从 etc、src、var 理解 Ext JS 主题定制体系ext theme classic 主题 Sass 目录结构详解从 etc、src、var 理解 Ext JS 主题定制体系 导读 在 community e即时通讯桌面应用Ext JS 主题 Sass 目录结构实战指南以 community-edition 中 ext-theme-crisp-touch 的 etc/src/var 三层组织为例Ext JS 主题 Sass 目录结构实战指南以 community edition 中 ext theme crisp touch 的 etc/src/va即时通讯桌面应用深入解读 Ext JS 主题体系中的 sass/var 变量声明目录从命名约定到编译机制深入解读 Ext JS 主题体系中的 sass/var 变量声明目录从命名约定到编译机制 导读 ext theme base/sass/var 是 Ext J即时通讯桌面应用上一篇终极无损视频剪辑指南如何用LosslessCut实现秒级剪辑告别转码等待下一篇LosslessCut完整指南如何实现秒级无损视频剪辑的终极教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考