Accessibility A (#3704)

* Accessibility A (#3688) * Enable setting `lang` and `role` attributes #3615 #3619 * Refactor AppIcon & TabbedAppBar #3625 * Accessibility: Toolbar #3626 * Implement an interface with WCAG properties #3641 * Accessibility: Toolbar #3626 * Accessibility: AppBar #3638 * Support aria-haspopup attribute on Element #3650 * Accessibility: Toolbar navigation #3642 * Fixed misc issues * Fixed Checkbox not getting checked * Fixed focus on modal dialog buttons * Accessibility: Toolbar navigation #3642 * Refactor ActionButton and MenuButton #3677 * Refactor ActionButton and MenuButton #3677 * Accessibility: Input highlighting #3687 * Use display: flex for TabMenu * Don't try to reapply focus to the last focused element if there was none * Refactor ActionButton and MenuButton #3677 * Refactor ActionButton and MenuButton #3677 * Made buttons trigger action on Space * Changes to comply with ESLint 9 #3693 * Revert "Publish SNAPSHOT from the epic branch" This reverts commit 863edd8. * Accessibility A (#3688) --------- Co-authored-by: Mikita Taukachou <[email protected]>
enonic · Sep 12, 2024 · 3411121 · 3411121
1 parent 6739359
commit 3411121
Show file tree

Hide file tree

Showing 55 changed files with 1,060 additions and 477 deletions.
diff --git a/src/main/resources/assets/admin/common/js/app/NavigatedAppPanel.ts b/src/main/resources/assets/admin/common/js/app/NavigatedAppPanel.ts
@@ -47,7 +47,10 @@ export class NavigatedAppPanel
 
     addNavigablePanel(item: AppBarTabMenuItem, panel: Panel, select?: boolean) {
         this.appBarTabMenu.addNavigationItem(item);
-        let index = this.addPanel(panel);
+        const index = this.addPanel(panel);
+        if (index === 1) {
+            this.appBar.setHomeIconAction();
+        }
         if (select) {
             this.selectPanelByIndex(index);
         }
@@ -61,6 +64,10 @@ export class NavigatedAppPanel
             this.appBarTabMenu.removeNavigationItem(navigationItem);
         }
 
+        if (this.appBarTabMenu.countVisible() === 0) {
+            this.appBar.unsetHomeIconAction();
+        }
+
         this.checkBrowsePanelNeedsToBeShown(index, panel);
 
         return index;

diff --git a/src/main/resources/assets/admin/common/js/app/bar/AppBar.ts b/src/main/resources/assets/admin/common/js/app/bar/AppBar.ts
@@ -1,15 +1,21 @@
 import {DivEl} from '../../dom/DivEl';
+import {Action} from '../../ui/Action';
 import {ActionContainer} from '../../ui/ActionContainer';
 import {ResponsiveManager} from '../../ui/responsive/ResponsiveManager';
-import {Action} from '../../ui/Action';
-import {ShowAppLauncherAction} from './ShowAppLauncherAction';
-import {AppIcon} from './AppIcon';
-import {AppBarActions} from './AppBarActions';
+import {AriaRole, WCAG} from '../../ui/WCAG';
+import {i18n} from '../../util/Messages';
 import {Application} from '../Application';
+import {AppBarActions} from './AppBarActions';
+import {AppIcon} from './AppIcon';
+import {ShowAppLauncherAction} from './ShowAppLauncherAction';
 
 export class AppBar
     extends DivEl
-    implements ActionContainer {
+    implements ActionContainer, WCAG {
+
+    [WCAG]: boolean = true;
+    ariaLabel: string = i18n('wcag.appbar.label');
+    role: AriaRole = AriaRole.BANNER;
 
     protected application: Application;
 

diff --git a/src/main/resources/assets/admin/common/js/app/bar/AppIcon.ts b/src/main/resources/assets/admin/common/js/app/bar/AppIcon.ts
@@ -46,14 +46,14 @@ export class AppIcon
             this.initListeners(action);
         }
         this.addClass('clickable');
-        this.getEl().setTabIndex(0);
+        this.makeTabbable();
         this.onClicked(this.clickListener);
         this.onKeyDown(this.enterListener);
     }
 
     removeAction(): void {
         this.removeClass('clickable');
-        this.getEl().removeAttribute('tabindex');
+        this.removeTabbable();
         this.unClicked(this.clickListener);
         this.onKeyDown(this.enterListener);
     }

diff --git a/src/main/resources/assets/admin/common/js/app/bar/TabbedAppBar.ts b/src/main/resources/assets/admin/common/js/app/bar/TabbedAppBar.ts
@@ -1,5 +1,4 @@
 import {ActionContainer} from '../../ui/ActionContainer';
-import {ResponsiveManager} from '../../ui/responsive/ResponsiveManager';
 import {AppBar} from './AppBar';
 import {AppBarTabMenu} from './AppBarTabMenu';
 import {Application} from '../Application';
@@ -17,23 +16,13 @@ export class TabbedAppBar
 
         this.appendChild(this.tabMenu);
 
-        this.tabMenu.onNavigationItemAdded(() => this.updateAppOpenTabs());
-        this.tabMenu.onNavigationItemRemoved(() => this.updateAppOpenTabs());
-
-        // Responsive events to update homeButton styles
-        ResponsiveManager.onAvailableSizeChanged(this, () => {
-            if (this.tabMenu.countVisible() > 0) {
-                if (managedHomeIconAction) {
-                    super.setHomeIconAction();
-                }
-                this.addClass('tabs-present');
-            } else {
-                if (managedHomeIconAction) {
-                    super.unsetHomeIconAction();
-                }
-                this.removeClass('tabs-present');
-            }
-        });
+        const onNavigationItemAddedOrRemoved = () => {
+            this.updateAppOpenTabs();
+            this.toggleClass('tabs-present', this.tabMenu.countVisible() > 0);
+        };
+
+        this.tabMenu.onNavigationItemAdded(onNavigationItemAddedOrRemoved);
+        this.tabMenu.onNavigationItemRemoved(onNavigationItemAddedOrRemoved);
     }
 
     getTabMenu(): AppBarTabMenu {

diff --git a/src/main/resources/assets/admin/common/js/app/browse/BrowsePanel.ts b/src/main/resources/assets/admin/common/js/app/browse/BrowsePanel.ts
@@ -6,7 +6,7 @@ import {ActionButton} from '../../ui/button/ActionButton';
 import {TreeGridActions} from '../../ui/treegrid/actions/TreeGridActions';
 import {SplitPanel, SplitPanelAlignment, SplitPanelBuilder} from '../../ui/panel/SplitPanel';
 import {Panel} from '../../ui/panel/Panel';
-import {Toolbar} from '../../ui/toolbar/Toolbar';
+import {Toolbar, ToolbarConfig} from '../../ui/toolbar/Toolbar';
 import {TreeGrid} from '../../ui/treegrid/TreeGrid';
 import {BrowseFilterPanel} from './filter/BrowseFilterPanel';
 import {Action} from '../../ui/Action';
@@ -23,7 +23,7 @@ import {SplitPanelSize} from '../../ui/panel/SplitPanelSize';
 export class BrowsePanel
     extends Panel {
 
-    protected browseToolbar: Toolbar;
+    protected browseToolbar: Toolbar<ToolbarConfig>;
 
     protected treeGrid: TreeGrid<ViewItem>;
 
@@ -208,6 +208,7 @@ export class BrowsePanel
             this.showFilterPanel();
         } else {
             this.hideFilterPanel();
+            this.browseToolbar.giveFocus();
         }
     }
 
@@ -223,7 +224,7 @@ export class BrowsePanel
         this.treeGrid.resetFilter();
     }
 
-    protected createToolbar(): Toolbar {
+    protected createToolbar(): Toolbar<ToolbarConfig> {
         throw Error('Must be implemented by inheritors');
     }
 
@@ -244,6 +245,7 @@ export class BrowsePanel
     }
 
     protected showFilterPanel() {
+        this.browseToolbar.giveBlur();
         this.filterPanelForcedShown = true;
         this.filterPanelForcedHidden = false;
 
@@ -267,7 +269,6 @@ export class BrowsePanel
         if (this.filterPanel.hasFilterSet()) {
             this.toggleFilterPanelButton.addClass('filtered');
         }
-
     }
 
     private toggleSelectionMode(isActive: boolean) {
@@ -298,18 +299,22 @@ export class BrowsePanel
             .setAnimationDelay(100)     // filter panel animation time
             .build();
 
-        this.filterPanel.onHideFilterPanelButtonClicked(this.toggleFilterPanel.bind(this));
+        this.filterPanel.onHideFilterPanelButtonClicked(() => {
+            this.toggleFilterPanel();
+        });
         this.filterPanel.onShowResultsButtonClicked(this.toggleFilterPanel.bind(this));
 
         this.addToggleFilterPanelButtonInToolbar();
         return splitPanel;
     }
 
     private addToggleFilterPanelButtonInToolbar() {
-        this.toggleFilterPanelAction = new ToggleFilterPanelAction(this);
-        this.toggleFilterPanelButton = new ActionButton(this.toggleFilterPanelAction);
+        this.toggleFilterPanelAction = new ToggleFilterPanelAction(this).setFoldable(false);
+        this.toggleFilterPanelAction.setWcagAttributes({
+            ariaLabel: i18n('tooltip.filterPanel.show')
+        });
+        this.toggleFilterPanelButton = this.browseToolbar.addAction(this.toggleFilterPanelAction);
         this.toggleFilterPanelButton.setTitle(i18n('tooltip.filterPanel.show'));
-        this.browseToolbar.prependChild(this.toggleFilterPanelButton);
         this.toggleFilterPanelAction.setVisible(false);
     }
 

diff --git a/src/main/resources/assets/admin/common/js/app/browse/filter/BrowseFilterPanel.ts b/src/main/resources/assets/admin/common/js/app/browse/filter/BrowseFilterPanel.ts
@@ -17,6 +17,7 @@ import {LabelEl} from '../../../dom/LabelEl';
 import {ActionButton} from '../../../ui/button/ActionButton';
 import {Action} from '../../../ui/Action';
 import {DefaultErrorHandler} from '../../../DefaultErrorHandler';
+import {AriaRole} from '../../../ui/WCAG';
 
 export class BrowseFilterPanel<T>
     extends Panel {
@@ -40,8 +41,14 @@ export class BrowseFilterPanel<T>
         this.addClass('filter-panel');
 
         this.hideFilterPanelButton = new SpanEl('hide-filter-panel-button icon-search');
+        this.hideFilterPanelButton.applyWCAGAttributes({
+            ariaLabel: i18n('tooltip.filterPanel.hide'),
+            role: AriaRole.BUTTON,
+            tabbable: true
+        });
         this.hideFilterPanelButton.setTitle(i18n('tooltip.filterPanel.hide'));
         this.hideFilterPanelButton.onClicked(() => this.notifyHidePanelButtonPressed());
+        this.hideFilterPanelButton.onApplyKeyPressed(() => this.notifyHidePanelButtonPressed());
 
         let showResultsButtonWrapper = new DivEl('show-filter-results');
         this.showResultsButton = new SpanEl('show-filter-results-button');

diff --git a/src/main/resources/assets/admin/common/js/app/view/ItemPreviewPanel.ts b/src/main/resources/assets/admin/common/js/app/view/ItemPreviewPanel.ts
@@ -4,15 +4,16 @@ import {IFrameEl} from '../../dom/IFrameEl';
 import {Panel} from '../../ui/panel/Panel';
 import {Equitable} from '../../Equitable';
 import {ItemPreviewToolbar} from './ItemPreviewToolbar';
+import {ToolbarConfig} from '../../ui/toolbar/Toolbar';
 
-export class ItemPreviewPanel<M extends Equitable>
+export class ItemPreviewPanel<M extends Equitable, C extends ToolbarConfig>
     extends Panel {
 
     protected frame: IFrameEl;
 
     protected wrapper: DivEl;
 
-    protected toolbar: ItemPreviewToolbar<M>;
+    protected toolbar: ItemPreviewToolbar<M, C>;
 
     protected mask: LoadMask;
 
@@ -26,8 +27,8 @@ export class ItemPreviewPanel<M extends Equitable>
         this.appendChildren(this.toolbar, this.wrapper, this.mask);
     }
 
-    createToolbar(): ItemPreviewToolbar<M> {
-        return new ItemPreviewToolbar<M>();
+    createToolbar(): ItemPreviewToolbar<M, C> {
+        return new ItemPreviewToolbar<M, C>();
     }
 
     public showMask() {

diff --git a/src/main/resources/assets/admin/common/js/app/view/ItemPreviewToolbar.ts b/src/main/resources/assets/admin/common/js/app/view/ItemPreviewToolbar.ts
@@ -1,13 +1,15 @@
 import {Equitable} from '../../Equitable';
-import {Toolbar} from '../../ui/toolbar/Toolbar';
+import {Toolbar, ToolbarConfig} from '../../ui/toolbar/Toolbar';
 
-export class ItemPreviewToolbar<M extends Equitable>
-    extends Toolbar {
+export class ItemPreviewToolbar<M extends Equitable, C extends ToolbarConfig>
+    extends Toolbar<C> {
 
     private item: M;
 
-    constructor(className?: string) {
-        super('item-preview-toolbar' + (className ? ' ' + className : ''));
+    constructor(config?: C) {
+        super(config);
+
+        this.addClass('item-preview-toolbar');
     }
 
     setItem(item: M) {

diff --git a/src/main/resources/assets/admin/common/js/app/view/ItemViewPanel.ts b/src/main/resources/assets/admin/common/js/app/view/ItemViewPanel.ts
@@ -1,6 +1,6 @@
 import {Panel} from '../../ui/panel/Panel';
 import {Closeable} from '../../ui/Closeable';
-import {Toolbar} from '../../ui/toolbar/Toolbar';
+import {Toolbar, ToolbarConfig} from '../../ui/toolbar/Toolbar';
 import {Action} from '../../ui/Action';
 import {ItemViewClosedEvent} from './ItemViewClosedEvent';
 import {ViewItem} from './ViewItem';
@@ -9,7 +9,7 @@ export class ItemViewPanel
     extends Panel
     implements Closeable {
 
-    private toolbar: Toolbar;
+    private toolbar: Toolbar<ToolbarConfig>;
 
     private panel: Panel;
 
@@ -21,7 +21,7 @@ export class ItemViewPanel
         super('item-view-panel');
     }
 
-    setToolbar(toolbar: Toolbar) {
+    setToolbar(toolbar: Toolbar<ToolbarConfig>) {
         this.toolbar = toolbar;
         this.appendChild(this.toolbar);
     }

diff --git a/src/main/resources/assets/admin/common/js/app/wizard/WizardPanel.ts b/src/main/resources/assets/admin/common/js/app/wizard/WizardPanel.ts
@@ -1,5 +1,5 @@
 import * as Q from 'q';
-import {Toolbar} from '../../ui/toolbar/Toolbar';
+import {Toolbar, ToolbarConfig} from '../../ui/toolbar/Toolbar';
 import {ResponsiveManager} from '../../ui/responsive/ResponsiveManager';
 import {ResponsiveItem} from '../../ui/responsive/ResponsiveItem';
 import {Panel} from '../../ui/panel/Panel';
@@ -47,7 +47,7 @@ export class WizardPanel<EQUITABLE extends Equitable>
     protected params: WizardPanelParams<EQUITABLE>;
     protected wizardActions: WizardActions<EQUITABLE>;
     protected wizardHeader: WizardHeader;
-    protected mainToolbar: Toolbar;
+    protected mainToolbar: Toolbar<ToolbarConfig>;
     protected formIcon: Element;
     protected formMask: LoadMask;
     protected liveMask: LoadMask;
@@ -249,7 +249,7 @@ export class WizardPanel<EQUITABLE extends Equitable>
         });
     }
 
-    public getMainToolbar(): Toolbar {
+    public getMainToolbar(): Toolbar<ToolbarConfig> {
         return this.mainToolbar;
     }
 
@@ -620,7 +620,7 @@ export class WizardPanel<EQUITABLE extends Equitable>
         return this.dataLoaded;
     }
 
-    protected createMainToolbar(): Toolbar {
+    protected createMainToolbar(): Toolbar<ToolbarConfig> {
         return null;
     }
 

diff --git a/src/main/resources/assets/admin/common/js/app/wizard/WizardStepNavigatorAndToolbar.ts b/src/main/resources/assets/admin/common/js/app/wizard/WizardStepNavigatorAndToolbar.ts
@@ -1,5 +1,5 @@
 import * as Q from 'q';
-import {Toolbar} from '../../ui/toolbar/Toolbar';
+import {Toolbar, ToolbarConfig} from '../../ui/toolbar/Toolbar';
 import {TabBarItem} from '../../ui/tab/TabBarItem';
 import {ActivatedEvent} from '../../ui/ActivatedEvent';
 import {DivEl} from '../../dom/DivEl';
@@ -15,13 +15,13 @@ export class WizardStepNavigatorAndToolbar
 
     private foldButton: FoldButton;
 
-    private stepToolbar: Toolbar;
+    private stepToolbar: Toolbar<ToolbarConfig>;
 
     private stepNavigator: WizardStepNavigator;
 
     private helpTextToggleButton: DivEl;
 
-    constructor(stepNavigator: WizardStepNavigator, stepToolbar?: Toolbar) {
+    constructor(stepNavigator: WizardStepNavigator, stepToolbar?: Toolbar<ToolbarConfig>) {
         super('wizard-step-navigator-and-toolbar');
         this.stepNavigator = stepNavigator;
         this.stepToolbar = stepToolbar;