feat(material-experimental/mdc-chips): Make chips editable by connecting to the mdc web editing interface

[kowsen]

This connects MatChipRow to the new editable interface introduced in this PR so users can edit chips in a chip grid.

With these changes, when the "editable" input on a mat-chip-row is set to true, double clicking it or pressing enter when the chip's primary action is focused will switch it to an "editing" mode. When the user hits enter or removes focus from that chip, it will revert to its earlier state and emit the value that was modified by the user so the host components can handle updating the model.

I've also updated the demo page so developers can enable this flag there, and verified that the full test suite still passes.

[kowsen]

I did some thinking over the weekend and changed this over to use a directive for the input instead of a component to better match the way other things like matChipRemove work.

Sorry for the thrashing if you've already started taking a look at this - let me know if you'd like me to revert it to the old approach!

[mmalerba]

@jelbourn are you aware of any a11y issues with this?

[jelbourn]

I don't really know the a11y nuances of contenteditable, so this would require some manual testing

[mmalerba]

I've deployed this to my firebase instance to make it easier to test with different screenreaders: https://mmalerba-demo.firebaseapp.com/mdc-chips

[kowsen]

I deployed a version that uses an input instead of a contenteditable span to test a11y against, in case it's helpful to compare: https://kowsen-demo-ba72c.firebaseapp.com/mdc-chips

It seems to have identical behavior in Voiceover. The only potentially strange thing is that it doesn't announce when the chip has been edited (in either version), but I think it makes sense to leave that to the host component since they're the one that decides how to handle the "edited" event and if it should change the model.

[jelbourn]

@mmalerba I tried both in NVDA and they work the same. Neither gives the best indication that activating the "button" will edit the entry, but I'm not sure there's anything we can do for that at the library level

[mmalerba]

Yeah, I saw the same thing with ChromeVox on Chrome OS, so it seems like this approach should be fine.

@kowsen I do have a question though, is it possible for a selectable chip to be editable? In this case it seems like the "enter" key would be the trigger for both toggling selection and toggling edit mode

[kowsen]

No, that shouldn't be possible now - MatChipOption doesn't set the "mdc-chip--editable" class on the host, so the editable input will have no effect. If that isn't acceptable I could move the editable input and edited output into MatChipRow so it won't bleed into other MatChip subclasses.

[mmalerba]

Yeah, I don't think we want a useless input on the other chips, so I would move it to MatChipRow

[kowsen]

Moved it to MatChipRow.

[mmalerba]

Looks good overall, just a couple small nits

[mmalerba]

LGTM

[kowsen]

Is there anything more you need from me to get this merged in?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}