Added pressed state, aria atts to toolbar button

packages/apputils/src/toolbar.tsx

@@ -590,6 +590,11 @@ export namespace ToolbarButtonComponent {
     tooltip?: string;
     onClick?: () => void;
     enabled?: boolean;
+    ariaLabel?: string;
+    pressed?: boolean;
+    pressedIcon?: LabIcon.IMaybeResolvable;
+    pressedIconClass?: string;
+    pressedTooltip?: string;
 
     /**
      * Trigger the button on the actual onClick event rather than onMouseDown.
@@ -637,28 +642,46 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) {
     }
   };
 
+  const getTooltip = () => {
+    if (props.pressed && props.pressedTooltip) {
+      return props.pressedTooltip;
+    } else {
+      return props.tooltip || props.iconLabel;
+    }
+  };
+
+  const getIconClass = () => {
+    if (props.pressed && props.pressedIconClass) {
+      return props.pressedIconClass;
+    } else {
+      return props.iconClass;
+    }
+  };
+
   return (
     <Button
       className={
         props.className
           ? props.className + ' jp-ToolbarButtonComponent'
           : 'jp-ToolbarButtonComponent'
       }
+      aria-label={props.ariaLabel || ''}
+      aria-pressed={props.pressed}
       disabled={props.enabled === false}
       onClick={props.actualOnClick ?? false ? handleClick : undefined}
       onMouseDown={
         !(props.actualOnClick ?? false) ? handleMouseDown : undefined
       }
       onKeyDown={handleKeyDown}
-      title={props.tooltip || props.iconLabel}
+      title={getTooltip()}
       minimal
     >
       {(props.icon || props.iconClass) && (
         <LabIcon.resolveReact
-          icon={props.icon}
+          icon={props.pressed ? props.pressedIcon : props.icon}
           iconClass={
             // add some extra classes for proper support of icons-as-css-background
-            classes(props.iconClass, 'jp-Icon')
+            classes(getIconClass(), 'jp-Icon')
           }
           className="jp-ToolbarButtonComponent-icon"
           tag="span"
@@ -693,9 +716,23 @@ export class ToolbarButton extends ReactWidget {
     super();
     addToolbarButtonClass(this);
   }
+
+  set pressed(value: boolean) {
+    if (value != this._pressed) {
+      this._pressed = value;
+      this.update();
+    }
+  }
+
+  get pressed() {
+    return this._pressed;
+  }
+
   render() {
-    return <ToolbarButtonComponent {...this.props} />;
+    return <ToolbarButtonComponent {...this.props} pressed={this._pressed} />;
   }
+
+  private _pressed = false;
 }
 
 /**

packages/apputils/test/toolbar.spec.ts

@@ -17,6 +17,7 @@ import { CommandRegistry } from '@lumino/commands';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 import { Widget } from '@lumino/widgets';
 import { simulate } from 'simulate-event';
+import { bugDotIcon, bugIcon } from '@jupyterlab/ui-components';
 
 const server = new JupyterServer();
 
@@ -437,6 +438,22 @@ describe('@jupyterlab/apputils', () => {
       });
     });
 
+    it('should accept aria label', async () => {
+      const widget = new ToolbarButton({
+        className: 'foo',
+        iconClass: 'iconFoo',
+        onClick: () => {
+          return void 0;
+        },
+        tooltip: 'bar',
+        ariaLabel: 'button'
+      });
+      Widget.attach(widget, document.body);
+      await framePromise();
+      const button = widget.node.firstChild as HTMLElement;
+      expect(button.getAttribute('aria-label')).toBe('button');
+    });
+
     describe('#dispose()', () => {
       it('should dispose of the resources used by the widget', () => {
         const button = new ToolbarButton();
@@ -502,6 +519,34 @@ describe('@jupyterlab/apputils', () => {
       });
     });
 
+    describe('#pressed()', () => {
+      it('should update the pressed state', async () => {
+        const widget = new ToolbarButton({
+          icon: bugIcon,
+          tooltip: 'tooltip',
+          pressedTooltip: 'pressed tooltip',
+          pressedIcon: bugDotIcon
+        });
+        Widget.attach(widget, document.body);
+        await framePromise();
+        const button = widget.node.firstChild as HTMLElement;
+        expect(widget.pressed).toBe(false);
+        expect(button.title).toBe('tooltip');
+        expect(button.getAttribute('aria-pressed')).toEqual('false');
+        let icon = button.querySelectorAll('svg');
+        expect(icon[0].getAttribute('data-icon')).toEqual('ui-components:bug');
+        widget.pressed = true;
+        await framePromise();
+        expect(widget.pressed).toBe(true);
+        expect(button.title).toBe('pressed tooltip');
+        expect(button.getAttribute('aria-pressed')).toEqual('true');
+        icon = button.querySelectorAll('svg');
+        expect(icon[0].getAttribute('data-icon')).toEqual(
+          'ui-components:bug-dot'
+        );
+      });
+    });
+
     //   describe('#onAfterAttach()', () => {
     //     it('should add event listeners to the node', () => {
     //       const button = new LogToolbarButton();

packages/debugger/src/handler.ts

@@ -23,7 +23,7 @@ import { Kernel, KernelMessage, Session } from '@jupyterlab/services';
 
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 
-import { bugIcon } from '@jupyterlab/ui-components';
+import { bugDotIcon, bugIcon } from '@jupyterlab/ui-components';
 
 import { Debugger } from './debugger';
 
@@ -51,7 +51,10 @@ function updateIconButton(
   const icon = new ToolbarButton({
     className: 'jp-DebuggerBugButton',
     icon: bugIcon,
-    tooltip: trans.__('Enable / Disable Debugger'),
+    tooltip: trans.__('Enable Debugger'),
+    ariaLabel: trans.__('Enable/Disable Debugger'),
+    pressedIcon: bugDotIcon,
+    pressedTooltip: trans.__('Disable Debugger'),
     onClick
   });
   widget.toolbar.insertBefore('kernelName', 'debugger-icon', icon);
@@ -67,12 +70,7 @@ function updateIconButton(
  * @param on true if switched on, false otherwise
  */
 function updateIconButtonState(widget: ToolbarButton, on: boolean) {
-  const cls = 'jp-debug-button-on';
-  if (on) {
-    widget.addClass(cls);
-  } else {
-    widget.removeClass(cls);
-  }
+  widget.pressed = on;
 }
 
 /**

packages/debugger/style/base.css

@@ -20,6 +20,6 @@
   margin-right: 0px;
 }
 
-.jp-debug-button-on .jp-DebuggerBugButton .jp-icon3[fill] {
+.jp-DebuggerBugButton[aria-pressed='true'] path {
   fill: var(--jp-warn-color0);
 }

packages/ui-components/src/icon/iconimports.ts

@@ -9,6 +9,7 @@ import { LabIcon } from './labicon';
 
 // icon svg import statements
 import addSvgstr from '../../style/icons/toolbar/add.svg';
+import bugDotSvgstr from '../../style/icons/toolbar/bug-dot.svg';
 import bugSvgstr from '../../style/icons/toolbar/bug.svg';
 import buildSvgstr from '../../style/icons/sidebar/build.svg';
 import caretDownEmptySvgstr from '../../style/icons/arrow/caret-down-empty.svg';
@@ -89,6 +90,7 @@ import yamlSvgstr from '../../style/icons/filetype/yaml.svg';
 
 // LabIcon instance construction
 export const addIcon = new LabIcon({ name: 'ui-components:add', svgstr: addSvgstr });
+export const bugDotIcon = new LabIcon({ name: 'ui-components:bug-dot', svgstr: bugDotSvgstr });
 export const bugIcon = new LabIcon({ name: 'ui-components:bug', svgstr: bugSvgstr });
 export const buildIcon = new LabIcon({ name: 'ui-components:build', svgstr: buildSvgstr });
 export const caretDownEmptyIcon = new LabIcon({ name: 'ui-components:caret-down-empty', svgstr: caretDownEmptySvgstr });

packages/ui-components/style/deprecated.css

@@ -13,6 +13,7 @@
 
 :root {
   --jp-icon-add: url('icons/toolbar/add.svg');
+  --jp-icon-bug-dot: url('icons/toolbar/bug-dot.svg');
   --jp-icon-bug: url('icons/toolbar/bug.svg');
   --jp-icon-build: url('icons/sidebar/build.svg');
   --jp-icon-caret-down-empty-thin: url('icons/arrow/caret-down-empty-thin.svg');
@@ -97,6 +98,9 @@
 .jp-AddIcon {
   background-image: var(--jp-icon-add);
 }
+.jp-BugDotIcon {
+  background-image: var(--jp-icon-bug-dot);
+}
 .jp-BugIcon {
   background-image: var(--jp-icon-bug);
 }