Merge pull request #10289 from marthacryan/remove-tabindex

Remove various tab indices

packages/application/test/shell.spec.ts

@@ -71,7 +71,6 @@ describe('LabShell', () => {
     it('should be the current widget in the shell main area', () => {
       expect(shell.currentWidget).toBe(null);
       const widget = new Widget();
-      widget.node.tabIndex = -1;
       widget.id = 'foo';
       shell.add(widget, 'main');
       expect(shell.currentWidget).toBe(null);

packages/apputils/src/mainareawidget.ts

@@ -64,7 +64,7 @@ export class MainAreaWidget<T extends Widget = Widget>
     if (!content.id) {
       content.id = DOMUtils.createDomID();
     }
-    content.node.tabIndex = -1;
+    content.node.tabIndex = 0;
 
     this._updateTitle();
     content.title.changed.connect(this._updateTitle, this);

packages/apputils/test/dialog.spec.tsx

@@ -242,7 +242,6 @@ describe('@jupyterlab/apputils', () => {
           const target = document.createElement('div');
           const dialog = new TestDialog({ host });
 
-          target.tabIndex = -1;
           document.body.appendChild(target);
           document.body.appendChild(host);
           target.focus();

packages/apputils/test/mainareawidget.spec.ts

@@ -15,7 +15,6 @@ describe('@jupyterlab/apputils', () => {
         const widget = new MainAreaWidget({ content });
         expect(widget).toBeInstanceOf(MainAreaWidget);
         expect(widget.hasClass('jp-MainAreaWidget')).toBe(true);
-        expect(widget.content.node.tabIndex).toBe(-1);
         expect(widget.title.closable).toBe(true);
       });
 

packages/apputils/test/widgettracker.spec.ts

@@ -24,7 +24,7 @@ function createWidget(): Widget {
   const widget = new Widget({ node: document.createElement('button') });
   widget.node.style.minHeight = '20px';
   widget.node.style.minWidth = '20px';
-  widget.node.tabIndex = -1;
+  widget.node.tabIndex = 0;
   widget.node.textContent = 'Test Button';
   return widget;
 }

packages/documentsearch/src/searchoverlay.tsx

@@ -128,7 +128,7 @@ class SearchEntry extends React.Component<ISearchEntryProps> {
           value={this.props.searchText}
           onChange={e => this.props.onChange(e)}
           onKeyDown={e => this.props.onKeydown(e)}
-          tabIndex={2}
+          tabIndex={0}
           onFocus={e => this.props.onInputFocus()}
           onBlur={e => this.props.onInputBlur()}
           ref={this.searchInputRef}
@@ -136,7 +136,7 @@ class SearchEntry extends React.Component<ISearchEntryProps> {
         <button
           className={BUTTON_WRAPPER_CLASS}
           onClick={() => this.props.onCaseSensitiveToggled()}
-          tabIndex={4}
+          tabIndex={0}
         >
           <caseSensitiveIcon.react
             className={caseButtonToggleClass}
@@ -146,7 +146,7 @@ class SearchEntry extends React.Component<ISearchEntryProps> {
         <button
           className={BUTTON_WRAPPER_CLASS}
           onClick={() => this.props.onRegexToggled()}
-          tabIndex={5}
+          tabIndex={0}
         >
           <regexIcon.react className={regexButtonToggleClass} tag="span" />
         </button>
@@ -177,24 +177,24 @@ class ReplaceEntry extends React.Component<IReplaceEntryProps> {
           value={this.props.replaceText}
           onKeyDown={e => this.props.onReplaceKeydown(e)}
           onChange={e => this.props.onChange(e)}
-          tabIndex={3}
+          tabIndex={0}
           ref={this.replaceInputRef}
         />
         <button
           className={REPLACE_BUTTON_WRAPPER_CLASS}
           onClick={() => this.props.onReplaceCurrent()}
-          tabIndex={10}
+          tabIndex={0}
         >
           <span
             className={`${REPLACE_BUTTON_CLASS} ${BUTTON_CONTENT_CLASS}`}
-            tabIndex={-1}
+            tabIndex={0}
           >
             {this._trans.__('Replace')}
           </span>
         </button>
         <button
           className={REPLACE_BUTTON_WRAPPER_CLASS}
-          tabIndex={11}
+          tabIndex={0}
           onClick={() => this.props.onReplaceAll()}
         >
           <span
@@ -223,7 +223,7 @@ function UpDownButtons(props: IUpDownProps) {
       <button
         className={BUTTON_WRAPPER_CLASS}
         onClick={() => props.onHighlightPrevious()}
-        tabIndex={6}
+        tabIndex={0}
       >
         <caretUpEmptyThinIcon.react
           className={classes(UP_DOWN_BUTTON_CLASS, BUTTON_CONTENT_CLASS)}
@@ -233,7 +233,7 @@ function UpDownButtons(props: IUpDownProps) {
       <button
         className={BUTTON_WRAPPER_CLASS}
         onClick={() => props.onHightlightNext()}
-        tabIndex={7}
+        tabIndex={0}
       >
         <caretDownEmptyThinIcon.react
           className={classes(UP_DOWN_BUTTON_CLASS, BUTTON_CONTENT_CLASS)}
@@ -281,7 +281,7 @@ class FilterToggle extends React.Component<
       <button
         className={BUTTON_WRAPPER_CLASS}
         onClick={() => this.props.toggleEnabled()}
-        tabIndex={8}
+        tabIndex={0}
       >
         <ellipsesIcon.react
           className={className}
@@ -536,7 +536,7 @@ class SearchOverlay extends React.Component<
           <button
             className={TOGGLE_WRAPPER}
             onClick={() => this._onReplaceToggled()}
-            tabIndex={1}
+            tabIndex={0}
           >
             <icon.react
               className={`${REPLACE_TOGGLE_CLASS} ${BUTTON_CONTENT_CLASS}`}
@@ -579,7 +579,7 @@ class SearchOverlay extends React.Component<
         <button
           className={BUTTON_WRAPPER_CLASS}
           onClick={() => this._onClose()}
-          tabIndex={9}
+          tabIndex={0}
         >
           <closeIcon.react
             className="jp-icon-hover"

packages/filebrowser/src/listing.ts

@@ -1866,7 +1866,7 @@ export namespace DirListing {
       header.className = HEADER_CLASS;
       node.appendChild(header);
       node.appendChild(content);
-      node.tabIndex = 1;
+      node.tabIndex = 0;
       return node;
     }
 

packages/imageviewer/src/widget.ts

@@ -33,7 +33,7 @@ export class ImageViewer extends Widget implements Printing.IPrintable {
   constructor(context: DocumentRegistry.Context) {
     super();
     this.context = context;
-    this.node.tabIndex = -1;
+    this.node.tabIndex = 0;
     this.addClass(IMAGE_CLASS);
 
     this._img = document.createElement('img');

packages/launcher/src/index.tsx

@@ -439,7 +439,7 @@ function Card(
       title={title}
       onClick={onclick}
       onKeyPress={onkeypress}
-      tabIndex={100}
+      tabIndex={0}
       data-category={item.category || trans.__('Other')}
       key={Private.keyProperty.get(item)}
     >

packages/markdownviewer/src/widget.ts

@@ -54,7 +54,7 @@ export class MarkdownViewer extends Widget {
     this.translator = options.translator || nullTranslator;
     this._trans = this.translator.load('jupyterlab');
     this.renderer = options.renderer;
-    this.node.tabIndex = -1;
+    this.node.tabIndex = 0;
     this.addClass(MARKDOWNVIEWER_CLASS);
 
     const layout = (this.layout = new StackedLayout());

packages/notebook/src/widget.ts

@@ -869,7 +869,7 @@ export class Notebook extends StaticNotebook {
    */
   constructor(options: Notebook.IOptions) {
     super(Private.processNotebookOptions(options));
-    this.node.tabIndex = -1; // Allow the widget to take focus.
+    this.node.tabIndex = 0; // Allow the widget to take focus.
     // Allow the node to scroll while dragging items.
     this.node.setAttribute('data-lm-dragscroll', 'true');
   }

packages/toc/src/generators/notebook/tagstool/tag_list.tsx

@@ -91,7 +91,7 @@ class TagListComponent extends React.Component<IProperties, IState> {
           onClick={event => {
             selectedTagWithName(tag);
           }}
-          tabIndex={-1}
+          tabIndex={0}
         >
           <TagComponent
             selectionStateHandler={this.props.selectionStateHandler}

packages/tooltip/src/widget.ts

@@ -140,7 +140,7 @@ export class Tooltip extends Widget {
    * Handle `'activate-request'` messages.
    */
   protected onActivateRequest(msg: Message): void {
-    this.node.tabIndex = -1;
+    this.node.tabIndex = 0;
     this.node.focus();
   }