Can't add a post title using speech recognition software

[afercia]

Highly recommended video (only 3 minutes) to understand how building non-native interfaces can easily break the most obvious features. /cc @karmatosed @jasmussen @mtias @aduth @youknowriad

Adding a title to a Wordpress post using Gutenberg 2.3 and Dragon 14 https://www.youtube.com/watch?v=w7uG17NvHLQ

Thanks to Eric Wright for the excellent video and to Rian Rietveld for involving assistive technologies testers.

Gutenberg Version 2.3 Dragon 14 Chrome latest

Two issues:

1 (minor) Saying "click Add Title" won't set my focus there This is because the title textarea doesn't have a properly associated label. This is one of the reasons why form fields should always have visible associated labels. Annoying issue, but at least users can tab to the title.

2 (major) when tabbing away from the title, the dictated text disappears completely. I have no idea why. Of course, this doesn't happen on a simple textarea. I can only guess there's some conflict between the events Gutenberg uses on this textarea and events triggered by Dragon.

@rianrietveld any chance to involve the Dragon team here for some feedback?

[aduth]

Very informative video. Thanks for sharing.

Saying "click Add Title" won't set my focus there

In saying "click Add Title" or otherwise using voice dictation to navigate to a field, what are the attributes that these tools are using to determine where the field is on that page? Is this something we could "fake" with an attribute of "Add Title" which is not the placeholder? A hidden label?

Aside: Should software like this be taking placeholder into consideration?

when tabbing away from the title, the dictated text disappears completely.

This looked particularly bad. Digging into the implementation of PostTitle, it's responding to the change event from a textarea field. I'm curious if this would be handled any better on an input event (which is probably the more appropriate event to be using anyways).

[aduth]

From: http://supportcontent.nuance.com/kbfiles/2626_DNS_HTML.pdf

NAVIGATION (VOICE COMMANDS)

[...]

Text Areas ()</strong> You can assign an ALT or TITLE attribute to a text area. As with edit controls, you need to find a way to make the associated text apparent to the user, and the text should conform to the general recommendations.</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>what are the attributes that these tools are using to determine where the field is on that page? Is this something we could "fake" with an attribute of "Add Title" which is not the placeholder? A hidden label?</p> </blockquote> <p>Normally, that would be a properly associated, <em>visible</em> label. Software can easily check when a <code><label></code> has a for attribute, grab the value, search for an element with that ID. Or, check if a label wraps an element. This is also used to give a field a so called "accessible name".</p> <p>Of course, the label needs to be visible to the user, otherwise the user wouldn't know what to say.</p> <p>Even using an alt or title attribute as suggested in the note you posted above, there's the need to "<em>find a way to make the associated text apparent to the user</em>" before the field is focused.</p> <p>That said, this is a minor issue because it is still possible to tab to the field, although that's slower for speech recognition software users.</p> <p>As a last resource, Dragon can split the screen in a "grid" with 9 cells see <a href="http://nuance.custhelp.com/app/answers/detail/a_id/3430/~/information-on-the-mousegrid-command">http://nuance.custhelp.com/app/answers/detail/a_id/3430/~/information-on-the-mousegrid-command</a> but that's a very slow process and not relevant here.</p> <blockquote> <p>Aside: Should software like this be taking placeholder into consideration?</p> </blockquote> <p>Apparently they don't and I doubt they will. As the accessibility team is trying to communicate, placeholders shouldn't be use as replacement for labels. For many reasons, including that in the near future placeholder attributes won't contribute any longer to the "accessible name" calculation, see <a href="https://core.trac.wordpress.org/ticket/40331#comment:3">https://core.trac.wordpress.org/ticket/40331#comment:3</a></p> <blockquote> <p>I'm curious if this would be handled any better on an input event </p> </blockquote> <p>I really have no idea why the text disappears, and really don't know if an input field or the planned title block would behave better.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/StommePoes"><img src="https://avatars.githubusercontent.com/u/136210?v=4" />StommePoes</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Yup, visible labels that actually <em>are</em> the label are a major thing for voice users.</p> <p>I could see AT taking in placeholders as part of the accessible-name algorithm-- I've seen some screen readers do it, though what they announce when sometimes depends on how the user got to the input (by tabbing in a focus mode or by arrowing in a browsing mode for example). But I wouldn't want to encourage placeholder use even if they did start taking it into consideration.</p> <blockquote> <p>You can assign an ALT or TITLE attribute to a text area.</p> </blockquote> <p>Alt doesn't make any sense to me. Is that a WP thing? In HTML alt's an image-only thing. </p> <p>I am in general wary of onchange listeners on inputs (browsers do differ on when something counts as onchange-- for example on select elements, IE considers merely arrowing around the options in order to see them as a change, while other browsers don't), and it does sound like something to try (changing the listener from onchange to oninput, which I also like for inputs. The last thing I remember not working with oninput was IE9 wouldn't count hitting the delete key on that one). If listeners are conflicting with each other, that can be an easy way to stop that.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>In HTML alt's an image-only thing.</p> </blockquote> <p>Actually, that's not completely exact 😉 It can be used on other elements too, though I wouldn't consider it in this specific case. <a href="https://www.w3.org/TR/html52/sec-forms.html#the-input-element">https://www.w3.org/TR/html52/sec-forms.html#the-input-element</a></p> <p>Worth reminding the React <code>onchange</code> is something a bit different from the native change event. Not sure how this could relate to text disappearing issue though.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Just came into my mind: as far as I can tell, Dragon should be able to get <code>aria-label</code> attributes, at least in its latest versions /cc @grahamarmfield</p> <p>Since there's already a visible "Add title", the aria-label should give the same accessible name: <code>aria-label="Add title"</code> and hopefully help.</p> <p>This won't help when the title is already populated with some text, unless users remember the field name is "Add title". Note: it's a workaround, not the best example of accessible labeling 🙂 </p> <p>The second issue, the disappearing text, is still a mystery to me.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aduth"><img src="https://avatars.githubusercontent.com/u/1779930?v=4" />aduth</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I'd be happy to put together a test branch changing the PostTitle to react to a textarea's <code>input</code> event instead of <code>change</code>, but I don't have a means to test myself whether it has any impact (no access to Dragon).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rianrietveld"><img src="https://avatars.githubusercontent.com/u/2351479?v=4" />rianrietveld</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aduth give me a ping when you have a PR ready, then I'll organize the Dragon troops for a test.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aduth"><img src="https://avatars.githubusercontent.com/u/1779930?v=4" />aduth</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@rianrietveld I've not made a pull request for it (yet), but you can use the branch <code>try/post-title-input</code> (aa2ba67d70aed34628bac4bf270e5e8f612105c6) to test.</p> <p>Let me know if you need any help setting this up.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/akorik"><img src="https://avatars.githubusercontent.com/u/37221221?v=4" />akorik</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Hi Everyone,</p> <p>I took a look at the video Eric Wright put together and I have a couple of comments and a workaround. In the video Eric is tabbing down to the Title field...I know you guys are discussing using the mouse grid and that is a great Dragon feature but may I suggest instead you try using the (show links) command. Since you are using Dragon with Chrome you should have our <a href="https://chrome.google.com/webstore/detail/dragon-web-extension/ddaloccgjfibfpkalenodgehlhkgoahe">Dragon Web Extension</a> installed.</p> <p>Example: Navigate to the post-new.php page. <strong>Turn on your mic and say "show links"</strong> - you will see a bunch of green squares with numbers in them <strong>With the mic still on say "choose 23"</strong> - 23 is the number on my page that correlates to the Title field. </p> <p>As far as the dictated title text disappearing - That is an interesting bug. You guys already know that if you key in the title it remains (great clue). My workaround isn't elegant but it will do the job.</p> <p>Prerequisite: <strong>Copy a word to your clipboard</strong> Example: Navigate to the post-new.php page. <strong>Turn on your mic and say "show links"</strong> - you will see a bunch of green squares with numbers in them. <strong>With the mic still on say "choose 23"</strong> - 23 is the number on my page that correlates to the Title field. <strong>Say "paste that"</strong> - The word from your clipboard will be pasted into the Title field. <strong>Now say "delete that"</strong> - The word will be deleted. <strong>Now dictate your title and say "tab key"</strong> - Your title will remain and your cursor will to the next block.</p> <p>Hope this helps, Alex</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rianrietveld"><img src="https://avatars.githubusercontent.com/u/2351479?v=4" />rianrietveld</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aduth I made an install on <a href="http://wpaccess.org/gutenberg-git/">http://wpaccess.org/gutenberg-git/</a> with the try/post-title-input branch and asked the Dragon testers to have a look at adding a title to test. Will report back when they tested.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ewaccess"><img src="https://avatars.githubusercontent.com/u/5042637?v=4" />ewaccess</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I was able to test the latest install. Dragon still did not recognize "click Add title," but it might be an issue with Dragon. I wrote some simple HTML5 pages with nothing but a <textarea> and an aria-label, and Dragon focus those either.</p> <p>@akorik, thank you for the pointer on "Show links!" I've been using "click [element]" for decades, but I had no idea "Show links" existed. I was able to set focus to the title block using that. Once I had it in my head that the basic HTML navigation commands were available in Gutenberg, I was also able to set focus to the title block using "click Edit" and "click Text."</p> <p>Initially I was unsure how to set focus because Gutenberg struck me as an app, so I thought I only had the desktop commands available to me, in other words "click [accessible name]"</p> <p>Unfortunately, text is still not persistent when dictating directly into the Title block. It is if I use Alex's workaround above (or the Dictation Box). Dictated text is persistent when dictating into the text block below the Title block. </p> <p>Thank you for your work on this!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/StommePoes"><img src="https://avatars.githubusercontent.com/u/136210?v=4" />StommePoes</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I've not seen anywhere in Dragon command lists "show links" nor would I think of an input as a link. Is this more like "Show Numbers" in Windows Speech Rec (shows all "clickables" regardless of type)?</p> <p>So while there's now a type of solution, it's not really since then Gutenberg would need to include such instructions to speech users.</p> <blockquote> <p>I wrote some simple HTML5 pages with nothing but a <textarea> and an aria-label, and Dragon focus those either.</p> </blockquote> <p>Eric, is that it <em>did</em> or <em>did not</em> focus?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ewaccess"><img src="https://avatars.githubusercontent.com/u/5042637?v=4" />ewaccess</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@StommePoes Yikes, sorry for the critical omission there. That's <em>did not</em> focus. I know Dragon recognizes aria-label on some inputs, but apparently not on textarea. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@ewaccess thanks so much for all your testing and feedback! And the excellent videos :) Unfortunately I can't test with Dragon :( When you have a chance, would you mind trying to add a <code>role="textbox"</code> to the textarea in your HTML test to see if the <code>aria-label</code> is recognized?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ewaccess"><img src="https://avatars.githubusercontent.com/u/5042637?v=4" />ewaccess</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Good idea, but unfortunately Dragon doesn't recognize it. Here's a simple pen: <a href="https://codepen.io/ewaccess/pen/zWrPeq">https://codepen.io/ewaccess/pen/zWrPeq</a> </p> <p>To confirm, I do have "show links" and "click Edit" at my disposal to set focus the title block. Neither occurred to me at the time because I was thrown by the app-like nature of Gutenberg and thought I could only say a name.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks @ewaccess. Hm... new attempt: with a visually hidden <code><label></code> element, see this pen forked from your one: <a href="https://codepen.io/afercia/pen/LdGXQR">https://codepen.io/afercia/pen/LdGXQR</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ewaccess"><img src="https://avatars.githubusercontent.com/u/5042637?v=4" />ewaccess</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@afercia success! The visually hidden label works. Confirmed with Dragon 14 and 15 (latest version).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Yay! 🎉 So, aria-label doesn't work at all on textarea elements with Dragon. I'd be curious to know if there's some documentation about Dragon support for ARIA. Maybe @grahamarmfield ?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/StommePoes"><img src="https://avatars.githubusercontent.com/u/136210?v=4" />StommePoes</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>if there's not, perhaps Eric and I could make such documentation? Eric's shown several other issues that developers don't tend to know about (and can't do so much about either) such as the problem with using input type=number.</p> <p>Edit I don't mean to sign Eric up for volunteer work :P But I'm very much a Dragon newb, I mostly only use it in IE to play with web pages.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ewaccess"><img src="https://avatars.githubusercontent.com/u/5042637?v=4" />ewaccess</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@StommePoes that sounds like a great idea. Happy to document Dragon accessibility support with you. The more the merrier!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Re: the "click Add title" issue, there's now a PR to use a visually hidden <code><label></code> for the post title: <a href="https://github.com/WordPress/gutenberg/pull/5669">https://github.com/WordPress/gutenberg/pull/5669</a></p> <p>Re: the disappearing dictated text, I've prepared two pens to quickly test what happens using <code>onInput</code> instead of <code>onChange</code>. While in React these are basically equivalent, the event name the browser exposes to assistive technologies could play a role. It's' just a guess, but worth testing.</p> <p>Textarea: <a href="https://codepen.io/afercia/full/EEgGWY/">https://codepen.io/afercia/full/EEgGWY/</a></p> <p>Search field (to cover the case of the insert link issue): <a href="https://codepen.io/afercia/full/QmKZeE/">https://codepen.io/afercia/full/QmKZeE/</a></p> <p>Some testing with Dragon would be greatly appreciated :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ewaccess"><img src="https://avatars.githubusercontent.com/u/5042637?v=4" />ewaccess</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>All inputs successful! Each field has Full Text Control. I was able to dictate text into and manipulate text within all four inputs. Text was persistent when tabbing and shift tabbing into the fields.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/grahamarmfield"><img src="https://avatars.githubusercontent.com/u/2565505?v=4" />grahamarmfield</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Hi Andrea, and Everyone.</p> <p>I have tested the two Codepens in both IE11 and Chrome 64 on a Windows 10 machine, with Dragon NaturallySpeaking v14.</p> <p>On both browsers, and in both Codepens, I was able to enter dictate text into both fields. It was harder to reference the field with the label of onChange directly but onInput usually could be referenced directly.</p> <p>Voicing "Press tab" and "Press shift tab" allowed me to move between the fields.</p> <p>BUT, neither dictating the text, nor using voice commands to tab around seemed to fire either the onchange or input event handlers. Interestingly, issuing the "Backspace" command did fire both the events.</p> <p>Couldn't test with Firefox as there currently isn't a Dragon plugin compatible with Firefox 58.</p> <p>Hope this helps.</p> <p>Regards Graham Armfield</p> <p>coolfields.co.uk <a href="http://www.coolfields.co.uk/">http://www.coolfields.co.uk/</a> M:07905 590026 T: 01483 856613 @coolfields <a href="https://twitter.com/coolfields">https://twitter.com/coolfields</a></p> <p>On Sat, Mar 17, 2018 at 7:24 PM, Eric Wright <a href="mailto:notifications@github.com">notifications@github.com</a> wrote:</p> <blockquote> <p>All inputs successful! Each field has Full Text Control. I was able to dictate text into and manipulate text within all four inputs. Text was persistent when tabbing and shift tabbing into the fields.</p> <p>— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <a href="https://github.com/WordPress/gutenberg/issues/5468#issuecomment-373946138">https://github.com/WordPress/gutenberg/issues/5468#issuecomment-373946138</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/ACclgeL7M2gmkFpqu-giI6GC1k7M5UQgks5tfWL6gaJpZM4SgT6Q">https://github.com/notifications/unsubscribe-auth/ACclgeL7M2gmkFpqu-giI6GC1k7M5UQgks5tfWL6gaJpZM4SgT6Q</a> .</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@ewaccess @grahamarmfield thanks so much for testing. Sorry for the onChange / onInput labels, I've used them just for testing purposes.</p> <blockquote> <p>neither dictating the text, nor using voice commands to tab around seemed to fire either the onchange or input event handlers</p> </blockquote> <p>Hm do you mean the text below the fields didn't update? That's weird. Makes me wonder which event gets fired when Dragon populates the field with the dictated text.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>While testing, I've noticed some inconsistencies in the way the Undo/Redo commands work. I'm going to open a separate issue for this. One possible reason for the disappearing dictated text here is that, for some reason, using Dragon triggers the "Undo" in Gutenberg so the text gets removed.</p> <p>One way to test this would be trying to dictate text in a post title that already contains some text:</p> <ul> <li>create a post, add a title and a short text in a paragraph without using Dragon</li> <li>publish</li> <li>navigate away</li> <li>reopen the post</li> <li>using Dragon, add some text to the existing post title</li> <li>tab away with Dragon and see what happens</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ewaccess"><img src="https://avatars.githubusercontent.com/u/5042637?v=4" />ewaccess</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Hi @afercia, I just followed the steps above (Dragon 15/Chrome 65) and recorded a 2-minute video. <a href="https://www.youtube.com/watch?v=VToDhQOQdSQ">https://www.youtube.com/watch?v=VToDhQOQdSQ</a> </p> <p>Result: The dictated text disappears when I tab away. The typed text remains. Anecdotally, this supports what I saw earlier with the Ctrl+Z shortcut not working as expected. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Thanks again @ewaccess for your testing :) That's very interesting and it seems to me we can now exclude some kind of bug that "empties" the title content. Instead, seems to me what's happening here is that, for some reason, tabbing away while using Dragon triggers the Gutenberg "Undo" command so only the last added text gets removed. Now we have just to understand <em>why</em> :) </p> <p>On a side note, can I publish somewhere the full 48 minutes video of your testing session? I'd really like to make it available to all the people in the team.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>For reference:</p> <p><em>What we learned from getting our autocomplete tested for accessibility</em> <a href="https://accessibility.blog.gov.uk/2018/05/15/what-we-learned-from-getting-our-autocomplete-tested-for-accessibility/">https://accessibility.blog.gov.uk/2018/05/15/what-we-learned-from-getting-our-autocomplete-tested-for-accessibility/</a></p> <blockquote> <p>When she dictated ‘France’, the text would appear as normal. When she tried to continue, the field would go blank. Later we found out this was because Dragon uses a special way to input the text, and autocomplete wasn’t expecting this.</p> </blockquote> <p>Maybe someone at gov.uk knows the answer.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I've tweeted about the "disappearing" text and got a helpful hint from the UK gov digital service team, see <a href="https://twitter.com/tvararu/status/999758793276829700">https://twitter.com/tvararu/status/999758793276829700</a> They faced a very similar issue for their <a href="https://accessibility.blog.gov.uk/2018/05/15/what-we-learned-from-getting-our-autocomplete-tested-for-accessibility/">autocompleter implementation</a> and ended up with a solution where they "poll" the input field. See <a href="https://github.com/alphagov/accessible-autocomplete/pull/15/files">https://github.com/alphagov/accessible-autocomplete/pull/15/files</a></p> <p>@aduth when you have a chance: does it shed some light on what's going on with the disappearing text?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aduth"><img src="https://avatars.githubusercontent.com/u/1779930?v=4" />aduth</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>To be honest, polling is an imperfect solution, and isn't so much a compatibility solution as it is abandoning there being any possibility of interpreting the change intent from Dragon directly†. </p> <p>The costs of polling are:</p> <ul> <li>Performance impact of code running on an interval. This should be limited as much as possible.</li> <li>Changes are not reflected immediately, which could manifest itself in various negative experiences: <ul> <li>Flickering UI as changes take effect</li> <li>Race conditions between the user's intended input and the polled interpretation of the value</li> </ul></li> </ul> <p>Based on <a href="https://twitter.com/tvararu/status/999758793276829700">the previous-mentioned Tweet</a> describing Dragon's behavior of modifying the value property, some options we could potentially explore include:</p> <ul> <li>Intercept setting of <code>HTMLInputElement.value</code> via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a> <ul> <li>Caveat: Unsure if this is possible for DOM interfaces, or if it's frozen/blocked from manipulation</li> <li>This is similar to how <a href="https://vuejs.org/v2/guide/reactivity.html">Vue tracks property changes</a> in 2.x</li> </ul></li> <li>Intercept setting of <code>HTMLInputElement.value</code> via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy"><code>Proxy</code></a> <ul> <li>Caveat: Requires a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Browser_compatibility">browser which supports Proxy</a> (not Internet Explorer). It cannot be polyfilled.</li> <li>This is similar to how <a href="https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf">Vue is expected to track property changes</a> in 3.x</li> </ul></li> </ul> <p><em>† For all I know, there is no way to interpret this change directly, in which case polling may be the only option. And it is certainly a short-term resolution, but one which we should acknowledge comes at the cost of future maintainability. Which is to say: I don't mean to slander with the phrase "imperfect"; sometimes an imperfect solution is the correct solution.</em></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tvararu"><img src="https://avatars.githubusercontent.com/u/1650875?v=4" />tvararu</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aduth that's a solid writeup! I don't recall us considering <code>Object.defineProperty</code>, that definitely seems worth exploring as it's compatible back to IE9. 👍 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aduth"><img src="https://avatars.githubusercontent.com/u/1779930?v=4" />aduth</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Another idea I considered which unfortunately won't work: If <code>value</code> was a <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes">reflective property</a>, meaning it sets the equivalent <code>value</code> attribute when changed, then a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> object</a> observing with an <code>attributes: true</code> options value could detect the change in <code>value</code> attribute. However, from what I can tell, <code>value</code> property changes do <em>not</em> reflect back to the attribute.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aduth"><img src="https://avatars.githubusercontent.com/u/1779930?v=4" />aduth</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p><code>Object.defineProperty</code> looks promising:</p> <ul> <li>Without fix: <a href="https://codepen.io/aduth/pen/ZREvXX">https://codepen.io/aduth/pen/ZREvXX</a></li> <li>With fix: <a href="https://codepen.io/aduth/pen/XYWVeZ">https://codepen.io/aduth/pen/XYWVeZ</a></li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aduth"><img src="https://avatars.githubusercontent.com/u/1779930?v=4" />aduth</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I guess it should be stated: Dragon is partly at fault here with setting the property explicitly, since it doesn't trigger any corresponding events, requiring us to resort to such workarounds. Ideally they'd set the value in a fashion more in line with default browser behaviors (where events would be triggered).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aduth"><img src="https://avatars.githubusercontent.com/u/1779930?v=4" />aduth</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I don't recall us considering Object.defineProperty, that definitely seems worth exploring as it's compatible back to IE9. 👍</p> </blockquote> <p>To the point of compatibility, it should only need to go back so far as you intend to support a browser <strong>with Dragon dictation</strong>, if it's assumed you can rely on <code>input</code> / <code>change</code> events for all other usage.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/afercia"><img src="https://avatars.githubusercontent.com/u/1682452?v=4" />afercia</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I guess it should be stated: Dragon is partly at fault here </p> </blockquote> <p>Welcome to my world, where fighting with assistive technologies is like fighting with the browsers we used to have 15 years ago 😬That's one of the reasons I always try to recommend to keep things as simple and "standard" as possible. Dragon has clear responsibilities in what's going on here. On the other hand, maybe the post title textarea is going a bit beyond what can be considered "standard".</p> <p>Aside: why the <code>isSelected</code> state is set to false at any keypress event?</p> <p>Thanks again to @tvararu @aduggin and all at the gov.uk digital service. (Love open source ❤️)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/annezazu"><img src="https://avatars.githubusercontent.com/u/26996883?v=4" />annezazu</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Just looping back on this open issue to close it out in light of this PR being merged: <a href="https://github.com/WordPress/gutenberg/pull/5669">https://github.com/WordPress/gutenberg/pull/5669</a> If this is incorrect, feel free to re-open of course :) </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>