Skip to content

Click event on underlying hidden field should focus editor #1

@urbanautomaton

Description

@urbanautomaton

In GroupWorkspaceForm we have a visually-hidden label whose purpose appears to be screenreader accessibility; when clicked, it focuses the editor (using functionality provided by this package) and sets the cursor position (using custom prosemirror trickery).

However, the jsx-a11y eslint rules complain if you add click handlers to non-interactive elements, including label. This seems fair enough.

Ideally we'd apply this handler to the label's related input element, which also receives a click event if its associated label is clicked, and is an interactive element. In this case the related input element is a hidden input rendered by the markdown-editor tool.

It seems reasonable to build this functionality into markdown-editor; if the hidden field receives a click event, that means someone's clicked on an associated label, so we should focus the editor. This means clients can use the editor more like a regular input element and still have expectations met.

The editor does expose a focus() method (I believe this is provided by prosemirror?), however GroupWorkspaceForm doesn't purely use this; it also does some extra prosemirror magic to set the cursor to the start of the text box. Presumably that's perfectly doable here, too.

In summary: let's do that thing that I said.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions