Decorate variables that begin with %% in preview editors

[omarreiss]

In any CMS we have a good usecase for implementing some sort of variable system to dynamically insert text into title and metadescription. Based on such variables we can for instance have templates for metadata. We have currently implemented such a system in WordPress which allows for the following variables:

We want to make using such variables more intuitive and usable. Since we are switching to draft.js for our input fields (#111), we can now use Facebook style decorators (@-mentions) for autocompleting and highlighting variables.

After typing %% we want to autocomplete:

We need to find a good and accessible autocomplete library for this.

When a variable is selected, we want to highlight:

We can use draft.js decorators for this.

[hedgefield]

That's a cool idea. Facebook, twitter and instagram all use this pattern, so I think people will understand how this works - apart from the %% instead of the @ of course, but we'll teach them that.

The highlight seems fine (maybe purple), it should be light enough that the text remains readable (contrast ratio-wise) and that it doesn't get confused for a selection highlight.

The biggest concern is accessibility. In facebook, once you type @ and one additional letter, the autocomplete menu opens, and you can navigate it with the up and down arrow keys, while the left and right arrow keys navigate the cursor in the input field. Tab or enter triggers the first autocomplete result. Backspace removes the whole variable with one keypress. Voiceover cannot make heads or tails of this at all.

@afercia what do you think about this? Do you know any autocompletes like this that are accessible? Should we solve it a different way?

[omarreiss]

The draft.js plugin I would like to use for this also seems to have this problem: https://github.com/draft-js-plugins/draft-js-plugins/tree/master/draft-js-mention-plugin

In the online documentation, they say it should work well with screen readers, but I don't see how.

This is far from ideal. I searched for accessible alternatives to see what they do differently. The ones I found don't override native focus / controls, or at least not without making it known to the user. They announce the availability of an autocomplete list below the input by telling screen reader users they can autocomplete in different ways:

• In one you can use the up and down arrow keys to autocomplete, tab just tabs away from the element.
• In one you can use both up and down arrow keys and the tab key to traverse through the options and then autocomplete by hitting the enter key. When hitting the escape key, the focus returns to the input field and the autocompletion is removed. This feels quite intuitive.

[afercia]

Suggestions lists can be made accessible, in WP there are 2 of them: the links search in the classic editor and the Tags suggestions. In Gutenberg there's a React version of the Tags suggestions. Lots of ARIA roles and ARIA attributes are necessary to make this work 🙂 Will have a look at the plugin mentioned above.

[omarreiss]

@afercia there are demo's of that things here https://www.draft-js-plugins.com/plugin/mention

[omarreiss]

They seem to do quite some ARIA stuff, but voiceover with safari still doesn't really give a good experience.

[afercia]

From a first quick look, seems to me they do almost everything correctly. However, there are two big things missing and in its current implementation this plugin can't work in any screen reader I know of.

• they miss to set aria-selected="true" on the highlighted option
• the aria-activedescendant attribute on the element that has role "combobox" gets a new value while highlighting the options but this value must be the same value of the highlighted option ID attribute; as far as I see all the options completely miss an ID

As a result, neither Firefox+NVDA or Safari10+VoiceOver are able to announce the options. Let me know if I should test also on IE+JAWS.

(NVDA announces always the first option)

Haven't tested in depth other things like keyboard interaction, audible feedbacks on actions completion, etc.

[omarreiss]

@afercia could you create an issue for this on their repo? Thanks!

[afercia]

@omarreiss see https://github.com/draft-js-plugins/draft-js-plugins/issues/805