Rambox-CE/ext/packages/ext-aria

ext-aria - Read Me

Initializing the Focus manager

FocusManager is enabled automatically when a Viewport is used in an application. If Viewport is not used, the app has to init the FocusManager manually:

Ext.FocusManager.enable();

Enabling ARIA support without using ext-theme-aria

While it is recommended to use ext-theme-aria in your accessible applications due to higher contrast and other considerations, we realize that not every application can be used with the accessibility theme. It is possible to create a custom theme that would incorporate some of the features of the ext-theme-aria without changing the colors and image assets.

To do that, start with creating a new theme as described in the Theming guide:

sencha generate theme custom-aria-theme

Configure the base theme by editing the package.json file, and add ext-aria package to the list of required packages:

{
    "name": "custom-aria-theme",
    ...
    "requires": ["ext-aria"],
    "extend": "ext-theme-neptune"
}

After that, run sencha app build to produce the JavaScript and CSS files with ARIA features.

If you are not using Sencha Cmd to build your application, you can still use ARIA features by building a custom ARIA-enabled theme as described above, with the additional configuration option that will cause the theme build to include the JavaScript classes from the ext-aria in addition to the CSS.

Edit the .sencha/package/build.properties file for your custom theme, and add the following lines there:

build.operations=include\n \
    -tag=package-ext-aria\n

After this, you can run sencha package build in the package directory to produce the JavaScript and CSS files to include in your application.

Note that in this case you may have to adjust some SASS variables to provide higher contrast for focused components like buttons, etc.