Skip to content

feat!: make field-multilineinput keyboard navigable and accessible#2729

Merged
maribethb merged 7 commits into
RaspberryPiFoundation:v13from
maribethb:worktree-field-multilineinput-keyboard-nav
Jun 25, 2026
Merged

feat!: make field-multilineinput keyboard navigable and accessible#2729
maribethb merged 7 commits into
RaspberryPiFoundation:v13from
maribethb:worktree-field-multilineinput-keyboard-nav

Conversation

@maribethb

@maribethb maribethb commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

The basics

The details

Resolves

Fixes field-multilineinput not keyboard accessible

Proposed Changes

  • Makes Enter commit edits, like all other input fields (this is a breaking behavioral change).
  • Adds a Shift+Enter handler that adds newlines.
  • Adds a hint UI that explains these options, with translatable hints + fallbacks because these aren't in core yet.
  • Adds 2 new APIs that allow you to control this behavior. if you want enter to add a newline like it used to, you can do that, in which case shift+enter will commit the change.
  • Updates the readme with this information.
  • Adds the missing keyboard focus ring indicator.
  • Adds 2 options in the test playground page UI that control the 2 settings.
  • Edits the eslint config to allow UPPER_CASE for static readonly class members, and removes some eslint silencing on existing ones

Reason for Changes

This plugin couldn't be used with only the keyboard as there was no way to commit a change.

Test Coverage

Tested manually and added additional unit tests.

Documentation

updated the readme already

Additional Information

Screenshot 2026-06-24 at 1 10 39 PM

@maribethb maribethb requested a review from a team as a code owner June 24, 2026 17:44
@maribethb maribethb requested review from gonfunko and removed request for a team June 24, 2026 17:44
Comment thread plugins/field-multilineinput/src/field_multilineinput.ts Outdated
Comment thread plugins/field-multilineinput/src/field_multilineinput.ts
* @returns The keycap element.
*/
private createHintKeycap(label: string): HTMLSpanElement {
const key = document.createElement('span');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could use the <kbd> element to be fancy

Comment thread plugins/field-multilineinput/src/field_multilineinput.ts Outdated
Comment thread plugins/field-multilineinput/test/field_multilineinput_test.mocha.js Outdated
Comment thread plugins/field-multilineinput/test/field_multilineinput_test.mocha.js Outdated
this.textarea.value = 'hello world';
this.textarea.selectionStart = 5;
this.textarea.selectionEnd = 11;
this.field['insertNewline']();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this tortured syntax to get around it being private?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol yeah which tbh i prefer over the TEST_ONLY nonsense we sometimes do

Comment thread plugins/field-multilineinput/test/field_multilineinput_test.mocha.js Outdated
@maribethb maribethb merged commit 1bfe535 into RaspberryPiFoundation:v13 Jun 25, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants