Clarify labels for user inputs and link dangling labels (jupyterlab#1…

…5222) * Updated input field with more descriptive aria-labels and placeholders * Package integrity updates * Run integrity * Move ID generation to improve render flow * Use ellipsis character for consistency * Add error indicator in Table of Contents (jupyterlab#14784) * feat: add error indicator in toc * test: for error indicator * Update Playwright Snapshots * style: make the error symbol colorblind-accessible * Update Playwright Snapshots * fix: remove from _errorCells when cell is rerun * perf: update error to -0.5 for api compatibility * test: update error status to -0.5 * Update Playwright Snapshots * Force text symbol * Update Playwright Snapshots * Update Playwright Snapshots * Update Playwright Snapshots * Revert notebook-panel-1 snapshot update * Robustify test by defining notebook a priori * Update Playwright Snapshots --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: Frédéric Collonval <[email protected]> * Remove unnecessary requirement from servicesPlugin (jupyterlab#15362) * [pre-commit.ci] pre-commit autoupdate (jupyterlab#15358) * [pre-commit.ci] pre-commit autoupdate updates: - [github.com/pre-commit/pre-commit-hooks: v4.4.0 → v4.5.0](pre-commit/pre-commit-hooks@v4.4.0...v4.5.0) - [github.com/python-jsonschema/check-jsonschema: 0.27.0 → 0.27.1](python-jsonschema/check-jsonschema@0.27.0...0.27.1) - [github.com/psf/black: 23.9.1 → 23.10.1](psf/black@23.9.1...23.10.1) - [github.com/astral-sh/ruff-pre-commit: v0.0.292 → v0.1.4](astral-sh/ruff-pre-commit@v0.0.292...v0.1.4) * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Alig ruff version * Add ruff exception --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Frédéric Collonval <[email protected]> * Update notebook window on resize if height changes (jupyterlab#15357) * Add a test for resizing notebook (should fail) * Update window on resize * Polish the test * Add the test notebook * Use throttler to limit the number of updates Using throttler over debouncer proposed in jupyterlab#15109 because debouncer would not show cells progressively during resize until user has stopped resizing. * Open files from errors (jupyterlab#13390) * Create renderer to render errors * WIP tests scaffold * Implement opening files from paths in error renderer * Finish sentence in a comment * Apply suggestions from code review Co-authored-by: Frédéric Collonval <[email protected]> * Improve RFC 5147 adherence for ranges * Switch to 0-based line numbers based on RFC5147 2.2.3: "Line position counting starts with zero, so the line position before the first line of a text/plain MIME entity has the line position zero" * Fix undefined check after adding `parseInt` --------- Co-authored-by: krassowski <[email protected]> Co-authored-by: Frédéric Collonval <[email protected]> * Bump tj-actions/changed-files from 39.2.0 to 40.0.2 (jupyterlab#15342) Bumps [tj-actions/changed-files](https://github.com/tj-actions/changed-files) from 39.2.0 to 40.0.2. - [Release notes](https://github.com/tj-actions/changed-files/releases) - [Changelog](https://github.com/tj-actions/changed-files/blob/main/HISTORY.md) - [Commits](tj-actions/changed-files@v39.2.0...v40.0.2) --- updated-dependencies: - dependency-name: tj-actions/changed-files dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix scrolling past long outputs in presence of un-rendered headings (jupyterlab#15356) * Add a test for smooth scrolling over long outputs * Do no scroll when setting the cursor position in md cells * Adjust test name to clarify the test case * Add the test notebook * Clean up the test directory * Fix overreactive scrolling to next cell after `Shift + Enter` (jupyterlab#15288) * Add a test case for jupyterlab#14878 * Fix the smart/auto scrolling logic for long items Items larger than the size of the viewport were not considered by the scroll logic leading to bad UX when smart/auto scroll was requested on certain operations. * Use pixel-based, cell-height-derived threshold for scrolling * Implement dual behaviour, simplify code, account for top padding * Use greater or equal to avoid scrolling if item fully visible * Update tests to reflect new expectations * Clean up the temp directory after tests * Fix scrolling when dragging files in the file browser (jupyterlab#15318) * Fix scrolling on edges in file browser * Add a simple test * Fix update button in extension manager (jupyterlab#15331) * Fix update button in extension manager * Apply suggestions from code review Make action options more flexible Co-authored-by: Frédéric Collonval <[email protected]> * Fix docs and make install options optional * Add test for update button * Update Playwright Snapshots * Revert spurious snapshot updates --------- Co-authored-by: Frédéric Collonval <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: krassowski <[email protected]> * added default property (jupyterlab#15346) * Exclude ipynb files in prettier pre-commit (jupyterlab#15378) * Update @jupyter/ydoc in dev_mode (jupyterlab#15383) * Define cells to run as independent of selection (jupyterlab#14996) * Define cells to run as independent of selection * Restore side effects of `runAll()` * Skip optional `slice` argument Co-authored-by: Frédéric Collonval <[email protected]> * Restore previous behaviour of `runAllBelow()` by making last cell active. --------- Co-authored-by: Frédéric Collonval <[email protected]> * Fix highlighting search in an out-of-viewport cell (jupyterlab#15376) * Fix highlighting search in an out-of-viewport cell * Update cells count * Don't show default value for objects in Settings Editor (jupyterlab#15380) * Don't show default value if schema type is `object` * Prettier * Bump axios from 1.3.4 to 1.6.1 (jupyterlab#15385) Bumps [axios](https://github.com/axios/axios) from 1.3.4 to 1.6.1. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](axios/axios@v1.3.4...v1.6.1) --- updated-dependencies: - dependency-name: axios dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix connection loop issue with standalone foreign document in LSP (jupyterlab#15262) * Populate * Improve VirtualDocument * Add test * Update packages/lsp/test/document.spec.ts Co-authored-by: Michał Krassowski <[email protected]> --------- Co-authored-by: Michał Krassowski <[email protected]> * Update to TypeScript 5.1 (jupyterlab#14638) * Bump typescript to 5.1.6 and rimraf to 5.0.5 * Dedupe the yarn.lock --------- Co-authored-by: Frédéric Collonval <[email protected]> * Resolved merge conflict * Package integrity updates Merged changes from main * Package integrity updates * Package integrity updates * Update Playwright Snapshots * Fixed integrity * Update Playwright Snapshots * Update Playwright Snapshots * Remove spurious snapshot updates * Update the test to reflect the new wording --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: EC2 Default User <[email protected]> Co-authored-by: Michał Krassowski <[email protected]> Co-authored-by: Tian Wang <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Frédéric Collonval <[email protected]> Co-authored-by: Paul Kim <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Divyansh Choudhary <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Nate Bowditch <[email protected]> Co-authored-by: LJMP <[email protected]> Co-authored-by: Nicolas Brichet <[email protected]> Co-authored-by: firai <[email protected]> Co-authored-by: Duc Trung Le <[email protected]> Co-authored-by: Jeremy Tuloup <[email protected]> Co-authored-by: Frédéric Collonval <[email protected]>
krassowski · Dec 15, 2023 · 8eb902e · 8eb902e
1 parent 98d1e06
commit 8eb902e
Show file tree

Hide file tree

Showing 21 changed files with 45 additions and 9 deletions.
diff --git a/galata/test/documentation/extension_manager.test.ts b/galata/test/documentation/extension_manager.test.ts
@@ -87,7 +87,7 @@ test.describe('Extension Manager', () => {
     await openExtensionSidebar(page);
 
     await page.fill(
-      '.jp-extensionmanager-view >> [placeholder="Search"]',
+      '.jp-extensionmanager-view >> [placeholder="Search extensions"]',
       'drawio'
     );
 

diff --git a/.../extension_manager.test.ts-snapshots/extensions-default-documentation-linux.png b/.../extension_manager.test.ts-snapshots/extensions-default-documentation-linux.png
diff --git a/...extension_manager.test.ts-snapshots/extensions-disabled-documentation-linux.png b/...extension_manager.test.ts-snapshots/extensions-disabled-documentation-linux.png
diff --git a/.../extension_manager.test.ts-snapshots/extensions-enabled-documentation-linux.png b/.../extension_manager.test.ts-snapshots/extensions-enabled-documentation-linux.png
diff --git a/...est.ts-snapshots/opened-sidebar-extensionmanager-main-view-jupyterlab-linux.png b/...est.ts-snapshots/opened-sidebar-extensionmanager-main-view-jupyterlab-linux.png
diff --git a/packages/codeeditor/package.json b/packages/codeeditor/package.json
@@ -44,6 +44,7 @@
   "dependencies": {
     "@codemirror/state": "^6.2.0",
     "@jupyter/ydoc": "^1.1.1",
+    "@jupyterlab/apputils": "^4.2.0-alpha.4",
     "@jupyterlab/coreutils": "^6.1.0-alpha.4",
     "@jupyterlab/nbformat": "^4.1.0-alpha.4",
     "@jupyterlab/observables": "^5.1.0-alpha.4",

diff --git a/packages/codeeditor/src/lineCol.tsx b/packages/codeeditor/src/lineCol.tsx
@@ -16,6 +16,7 @@ import {
 } from '@jupyterlab/ui-components';
 import React from 'react';
 import { CodeEditor } from './editor';
+import { DOMUtils } from '@jupyterlab/apputils';
 
 /**
  * A namespace for LineFormComponent statics.
@@ -60,6 +61,10 @@ namespace LineFormComponent {
      * Whether the form has focus.
      */
     hasFocus: boolean;
+    /**
+     * A generated ID for the input field
+     */
+    textInputId: string;
   }
 }
 
@@ -79,7 +84,8 @@ class LineFormComponent extends React.Component<
     this._trans = this.translator.load('jupyterlab');
     this.state = {
       value: '',
-      hasFocus: false
+      hasFocus: false,
+      textInputId: DOMUtils.createDomID() + '-line-number-input'
     };
   }
 
@@ -106,6 +112,7 @@ class LineFormComponent extends React.Component<
           >
             <input
               type="text"
+              id={this.state.textInputId}
               className="jp-lineFormInput"
               onChange={this._handleChange}
               onFocus={this._handleFocus}
@@ -127,7 +134,10 @@ class LineFormComponent extends React.Component<
               />
             </div>
           </div>
-          <label className="jp-lineFormCaption">
+          <label
+            className="jp-lineFormCaption"
+            htmlFor={this.state.textInputId}
+          >
             {this._trans.__(
               'Go to line number between 1 and %1',
               this.props.maxLine

diff --git a/packages/codeeditor/style/index.css b/packages/codeeditor/style/index.css
@@ -7,5 +7,6 @@
 @import url('~@lumino/widgets/style/index.css');
 @import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/statusbar/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@lumino/dragdrop/style/index.css');
 @import url('./base.css');
diff --git a/packages/codeeditor/style/index.js b/packages/codeeditor/style/index.js
@@ -7,6 +7,7 @@
 import '@lumino/widgets/style/index.js';
 import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/statusbar/style/index.js';
+import '@jupyterlab/apputils/style/index.js';
 import '@lumino/dragdrop/style/index.js';
 
 import './base.css';
diff --git a/packages/codeeditor/tsconfig.json b/packages/codeeditor/tsconfig.json
@@ -6,6 +6,9 @@
   },
   "include": ["src/*"],
   "references": [
+    {
+      "path": "../apputils"
+    },
     {
       "path": "../coreutils"
     },

diff --git a/packages/codeeditor/tsconfig.test.json b/packages/codeeditor/tsconfig.test.json
@@ -2,6 +2,9 @@
   "extends": "../../tsconfigbase.test",
   "include": ["src/*", "test/*"],
   "references": [
+    {
+      "path": "../apputils"
+    },
     {
       "path": "../coreutils"
     },

diff --git a/packages/extensionmanager/src/widget.tsx b/packages/extensionmanager/src/widget.tsx
@@ -366,7 +366,7 @@ class Header extends ReactWidget {
           )}
         </div>
         <FilterBox
-          placeholder={this.trans.__('Search')}
+          placeholder={this.trans.__('Search extensions')}
           disabled={!this.model.isDisclaimed}
           updateFilter={(fn, query) => {
             this.model.query = query ?? '';

diff --git a/packages/json-extension/src/component.tsx b/packages/json-extension/src/component.tsx
@@ -75,7 +75,7 @@ export class Component extends React.Component<IProps, IState> {
         <InputGroup
           className="filter"
           type="text"
-          placeholder={trans.__('Filter…')}
+          placeholder={trans.__('Find…')}
           onChange={this.handleChange}
           value={this.state.value}
           rightIcon="ui-components:search"

diff --git a/packages/lsp-extension/package.json b/packages/lsp-extension/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^4.1.0-alpha.4",
+    "@jupyterlab/apputils": "^4.2.0-alpha.4",
     "@jupyterlab/lsp": "^4.1.0-alpha.4",
     "@jupyterlab/running": "^4.1.0-alpha.4",
     "@jupyterlab/settingregistry": "^4.1.0-alpha.4",

diff --git a/packages/lsp-extension/src/renderer.tsx b/packages/lsp-extension/src/renderer.tsx
@@ -6,7 +6,8 @@ import { ITranslator, TranslationBundle } from '@jupyterlab/translation';
 import { closeIcon } from '@jupyterlab/ui-components';
 import { UUID } from '@lumino/coreutils';
 import { Debouncer } from '@lumino/polling';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import { DOMUtils } from '@jupyterlab/apputils';
 
 import type { FieldProps } from '@rjsf/utils';
 type TDict = { [key: string]: any };
@@ -203,6 +204,9 @@ function BuildSettingForm(props: ISettingFormProps): JSX.Element {
     any,
     [hash: string, property: ISettingProperty]
   >(setProperty);
+  const textInputId = useRef<string>(
+    DOMUtils.createDomID() + '-line-number-input'
+  );
   return (
     <div className="array-item">
       <div className="form-group ">
@@ -212,11 +216,15 @@ function BuildSettingForm(props: ISettingFormProps): JSX.Element {
               <div className="form-group small-field">
                 <div className="jp-modifiedIndicator jp-errorIndicator"></div>
                 <div className="jp-FormGroup-content">
-                  <h3 className="jp-FormGroup-fieldLabel jp-FormGroup-contentItem">
+                  <label
+                    htmlFor={textInputId.current}
+                    className="jp-FormGroup-fieldLabel jp-FormGroup-contentItem"
+                  >
                     {props.trans.__('Server name:')}
-                  </h3>
+                  </label>
                   <div className="jp-inputFieldWrapper jp-FormGroup-contentItem">
                     <input
+                      id={textInputId.current}
                       className="form-control"
                       type="text"
                       required={true}

diff --git a/packages/lsp-extension/style/index.css b/packages/lsp-extension/style/index.css
@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@jupyterlab/ui-components/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/lsp/style/index.css');
 @import url('~@jupyterlab/running/style/index.css');

diff --git a/packages/lsp-extension/style/index.js b/packages/lsp-extension/style/index.js
@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 import '@jupyterlab/ui-components/style/index.js';
+import '@jupyterlab/apputils/style/index.js';
 import '@jupyterlab/application/style/index.js';
 import '@jupyterlab/lsp/style/index.js';
 import '@jupyterlab/running/style/index.js';

diff --git a/packages/lsp-extension/tsconfig.json b/packages/lsp-extension/tsconfig.json
@@ -9,6 +9,9 @@
     {
       "path": "../application"
     },
+    {
+      "path": "../apputils"
+    },
     {
       "path": "../lsp"
     },

diff --git a/packages/settingeditor/src/pluginlist.tsx b/packages/settingeditor/src/pluginlist.tsx
@@ -451,7 +451,7 @@ export class PluginList extends ReactWidget {
         <FilterBox
           updateFilter={this.setFilter}
           useFuzzyFilter={false}
-          placeholder={trans.__('Search…')}
+          placeholder={trans.__('Search settings…')}
           forceRefresh={false}
           caseSensitive={false}
           initialQuery={this._query}

diff --git a/packages/shortcuts-extension/src/components/TopNav.tsx b/packages/shortcuts-extension/src/components/TopNav.tsx
@@ -162,6 +162,7 @@ export class TopNav extends React.Component<ITopNavProps> {
           <Symbols />
           <InputGroup
             className="jp-Shortcuts-Search"
+            aria-label={trans.__('Search shortcuts')}
             type="text"
             onChange={event => this.props.updateSearchQuery(event)}
             placeholder={trans.__('Search…')}

diff --git a/yarn.lock b/yarn.lock
@@ -2506,6 +2506,7 @@ __metadata:
   dependencies:
     "@codemirror/state": ^6.2.0
     "@jupyter/ydoc": ^1.1.1
+    "@jupyterlab/apputils": ^4.2.0-alpha.4
     "@jupyterlab/coreutils": ^6.1.0-alpha.4
     "@jupyterlab/nbformat": ^4.1.0-alpha.4
     "@jupyterlab/observables": ^5.1.0-alpha.4
@@ -3820,6 +3821,7 @@ __metadata:
   resolution: "@jupyterlab/lsp-extension@workspace:packages/lsp-extension"
   dependencies:
     "@jupyterlab/application": ^4.1.0-alpha.4
+    "@jupyterlab/apputils": ^4.2.0-alpha.4
     "@jupyterlab/lsp": ^4.1.0-alpha.4
     "@jupyterlab/running": ^4.1.0-alpha.4
     "@jupyterlab/settingregistry": ^4.1.0-alpha.4
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,9 @@ @@
         {
           "path": "../application"
         },
+        {
+          "path": "../apputils"
+        },
         {
           "path": "../lsp"
         },
@@ Expand Down @@