Child pages
  • Simple Text Inline Edit solutions considered

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

Goals of inline edit

High-level goal

Making quick, on-the-fly edits to [fluid:small bits of] text.

Core interaction model

In-focus to edit, out-of-focus to save/finish

Solutions considered

Solution #1: No buttons (not really, at least)

To edit:
- Any focus on editable text: click using mouse, or tab to and press enter

To save:
- Press enter, or
- Unfocus/blur: click outside using mouse, or tab out

Notes:
- No visual buttons, but the editable text reads as a button to screen readers

Pros:
- Maintained the core interaction model (in-focus to edit, out-of-focus to finish)

Cons:
- Editable text reading as a button is semantically confusing/inaccurate
- Screen reader users may not know how to save edits

Solution #2: Hidden buttons

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to hidden edit button and press enter

To save:
- Press enter, or
- Tab to hidden save button and press enter, or
- Unfocus/blur: tab twice to get out of edit mode, or click outside using mouse

Notes:
- Hidden edit button has aria-role of button

Pros:
- Fixes "editable text as button" semantics problem from solution #1
- Screen reader users know to save by focusing on the save button and pressing enter

Cons:
- For visual users, first tab goes nowhere, and two tabs are needed to get out of focus
- Screen readers users have no foreknowledge that there's a save button after the text field

Solution #3: Visible buttons

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to visible edit area (hidden edit button) and press enter

To save:
- Press enter, or
- Tab to visible save button and press enter, or
- Click save button, or
- Unfocus/blur: tab twice to get out of edit mode, or click outside

Pros:
- More transparent and honest to the user
- Makes affordances for edits and saves very explicit

Cons:
- Users are trained to use inline edit with button clicks, which breaks core interaction model of a quick in-focus to edit and out-of-focus to save

Solution #4: aria describedby

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to visible edit area (hidden edit button) and press enter

To save:
- Press enter, or
- Unfocus/blur: tab once or click outside using mouse

Notes:
- No save button
- Edit button/icon has aria-role of button
- Edit area has an aria describedby which gives instructions to screen reader users ("Press ESC to cancel, and enter or tab to finish")

Solution #5: aria tooltip + describedby

To edit:
- Mouse focus on editable text: click using mouse, or
- Tab to visible edit area (hidden edit button) and press enter

To save:
- Press enter, or
- Unfocus/blur: tab once or click outside using mouse

Notes:
- No save button
- Edit button/icon has aria-role of button
- Edit area has a tooltip with instructions
- Edit area has an aria describedby which points to an aria tooltip which gives instructions to screen reader users ("Press ESC to cancel, and enter or tab to finish")

On this page
  • No labels