adding labels to user input #14987

s596757 · 2023-08-17T09:31:50Z

Text Issue #6

In order to provide meaningful labels for user input, as per #9399,

I have done the following:

Search fields have been changed to specify what they are searching e.g. shortcuts.
added type=text to find/replace
added aria-labels to user inputs
added aria labels and type to Line Column Form
Labelled top nav bar and updated placeholder text

jupyterlab-probot · 2023-08-17T09:31:52Z

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

fcollonval

Thanks @s596757

I made a couple of suggestions to improve this.

packages/documentsearch/src/searchview.tsx

packages/extensionmanager/src/widget.tsx

packages/json-extension/src/component.tsx

packages/codeeditor/src/lineCol.tsx

packages/lsp-extension/src/renderer.tsx

packages/settingeditor/src/pluginlist.tsx

packages/shortcuts-extension/src/components/TopNav.tsx

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

s596757 · 2023-08-17T14:37:19Z

Thanks @s596757

I made a couple of suggestions to improve this.

Changes made, please review again. Thank you :)

packages/documentsearch/src/searchview.tsx

packages/shortcuts-extension/src/components/TopNav.tsx

packages/lsp-extension/src/renderer.tsx

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

gabalafou · 2023-08-25T11:15:26Z

packages/codeeditor/src/lineCol.tsx

@@ -107,6 +107,7 @@ class LineFormComponent extends React.Component<
            <input
              type="text"
              className="jp-lineFormInput"
+              aria-label={this._trans('Line Column form')}


I think it would be better to give this text input an id and connect it to the label below, e.g.:

const textInputId = DOMUtils.createDomID() + '-line-number-input'; <input id={textInputId} ... /> ... <label for={textInputId}

This would be htmlFor={textInputId} because React.

packages/extensionmanager/src/widget.tsx

gabalafou · 2023-08-25T11:19:31Z

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')}


Yeah I agree. This is more like "Find" (Ctrl + F) functionality than filter.

gabalafou · 2023-08-25T11:33:17Z

packages/lsp-extension/src/renderer.tsx

@@ -218,6 +218,7 @@ function BuildSettingForm(props: ISettingFormProps): JSX.Element {
                  <div className="jp-inputFieldWrapper jp-FormGroup-contentItem">
                    <input
                      className="form-control"
+                      aria-label={props.trans.__('Server name')}


Here too, I think it would be better to connect this input with the "Server name" above. Will probably need to change the <h3> to a <label>

packages/settingeditor/src/pluginlist.tsx

packages/shortcuts-extension/src/components/TopNav.tsx

gabalafou

These are good improvements, but they need to be implemented slightly differently in a few places, I think, to avoid duplication of code, as well as translation strings.

Also please update the PR description so that it links to the appropriate issue. I think there's a typo currently.

Co-authored-by: gabalafou <gabriel@fouasnon.com>

krassowski · 2023-10-05T21:48:18Z

Closing in favour of #15222

s596757 added 2 commits August 17, 2023 07:46

initial commit

2e2da72

updated find/replace type

0697f6a

github-actions bot assigned s596757 Aug 17, 2023

github-actions bot added pkg:codeeditor pkg:shortcuts pkg:settingeditor pkg:json pkg:extensionmanager pkg:documentsearch pkg:lsp labels Aug 17, 2023

fcollonval added bug tag:Accessibility labels Aug 17, 2023

fcollonval added this to the 4.0.x milestone Aug 17, 2023

fcollonval requested changes Aug 17, 2023

View reviewed changes

s596757 changed the title ~~initial commit~~ adding labels to user input Aug 17, 2023

s596757 and others added 8 commits August 17, 2023 14:29

Update packages/codeeditor/src/lineCol.tsx

cbe7a6d

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/documentsearch/src/searchview.tsx

de01b1f

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/extensionmanager/src/widget.tsx

491be14

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/json-extension/src/component.tsx

904fae1

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/lsp-extension/src/renderer.tsx

ce04b25

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/settingeditor/src/pluginlist.tsx

4410936

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/shortcuts-extension/src/components/TopNav.tsx

3c2a01a

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

removed unnecessary text

192f42b

s596757 requested a review from fcollonval August 17, 2023 14:37

krassowski requested changes Aug 18, 2023

View reviewed changes

s596757 and others added 3 commits August 18, 2023 16:05

Update packages/lsp-extension/src/renderer.tsx

715e03a

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

Update packages/shortcuts-extension/src/components/TopNav.tsx

91d6631

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

Update packages/documentsearch/src/searchview.tsx

637e751

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

s596757 and others added 2 commits August 18, 2023 16:06

Update packages/documentsearch/src/searchview.tsx

df5b139

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

Update packages/documentsearch/src/searchview.tsx

4341b94

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

github-actions bot removed the pkg:documentsearch label Aug 18, 2023

s596757 requested a review from krassowski August 18, 2023 16:08

gabalafou reviewed Aug 25, 2023

View reviewed changes

gabalafou requested changes Aug 25, 2023

View reviewed changes

s596757 and others added 3 commits September 4, 2023 09:56

Update packages/extensionmanager/src/widget.tsx

ee09032

Co-authored-by: gabalafou <gabriel@fouasnon.com>

Update packages/settingeditor/src/pluginlist.tsx

7c86c58

Co-authored-by: gabalafou <gabriel@fouasnon.com>

Update packages/shortcuts-extension/src/components/TopNav.tsx

c52b9e3

Co-authored-by: gabalafou <gabriel@fouasnon.com>

m158261 mentioned this pull request Oct 4, 2023

Clarify labels for user inputs and link dangling labels #15222

Merged

krassowski closed this Oct 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

adding labels to user input #14987

adding labels to user input #14987

s596757 commented Aug 17, 2023

jupyterlab-probot bot commented Aug 17, 2023

fcollonval left a comment

s596757 commented Aug 17, 2023

gabalafou Aug 25, 2023

krassowski Aug 27, 2023

gabalafou Aug 25, 2023

gabalafou Aug 25, 2023

gabalafou left a comment

krassowski commented Oct 5, 2023

adding labels to user input #14987

adding labels to user input #14987

Conversation

s596757 commented Aug 17, 2023

jupyterlab-probot bot commented Aug 17, 2023

fcollonval left a comment

Choose a reason for hiding this comment

s596757 commented Aug 17, 2023

gabalafou Aug 25, 2023

Choose a reason for hiding this comment

krassowski Aug 27, 2023

Choose a reason for hiding this comment

gabalafou Aug 25, 2023

Choose a reason for hiding this comment

gabalafou Aug 25, 2023

Choose a reason for hiding this comment

gabalafou left a comment

Choose a reason for hiding this comment

krassowski commented Oct 5, 2023