Accessibility: Create drop down can't be accessed via keyboard

[BatJan]

Prerequisites

• I have added steps to test this contribution in the description below

This fixes issue 61and 86 from #5277

Description

This affects the "Create" button in "Content" section (When list views are in use) and in the "Media" section. In the "Content" section it can do different things depending on what's been configured as follows

• List view where it's possible to create a single document type (Acts like a button)
• List view where it's possible to create multiple document types (Acts like a dropdown)
• List view where it's possible to create a single document type, where a blueprint has also been configured (Acts like a dropdown)
• List view where it's possible to create multiple document types, where blueprints have been setup for the one or more of the document types.

In all of the above scenarios the "Create" button is now possible to tab to. If it's in a state where it has a dropdown it can be opened using the keyboard as well and it's possible to tab through the list of items that appears - The dropdown is closed when it's being tabbed past. In order to achieve this I added a "deep-blur" directive in the events.directive and added a leaveDropdown() method.

The deep-blur directive is a modified version of https://github.com/myplanet/angular-deep-blur/blob/master/angular-deep-blur.js

Apart from fixing the accessibility issues with the listview dropdown feature it appears to have also changed some UX in the scenario where it's possible to insert a single document type or a blueprint for that single document type. Before when you clicked the "Create..." text a new document type would be created immediately and if you clicked the caret you would see a dropdown showing the blueprint, which you could then click in order to create your document type. Since the caret is a <span> with it does not have any focus events and is not reachable using the keyboard. I have done 2 before GIF's of this scenario and one after GIF showing my fix for it. In short I've made it act like the scenario where multiple document types are possible to create - See more comments on the GIF's 😃

Before a caret would be displayed but when clicking on it a new document type would be created instead of showing the option of creating the document type, or create the document type based on a blueprint. This has now been fixed too. The difference shows in the before/after GIF's below.

Ok, I think it have it all covered now - I hope it's easier to test than it has been for me to describe things properly 😅 Enjoy!

Content Create Single Doctype - Before

Content Create Single Doctype - After

Content Create Single Doctype With Blueprint- Before part 1
This part show how the "Create" button is not possible to tab to using the keyboard.

Content Create Single Doctype With Blueprint- Before part 2
This part shows how the creation of either normal document type or the blueprint of the document type where it's necessary to click the little "Caret" icon to have it appear - In my humble opinion that does not make much sense. Therefore I have changed it in the after GIF to act like it does when it's possible to create multiple document types and blueprints, which also aligns the overall user experience making it easier for the editors to learn and remember.

Content Create Single Doctype With Blueprint - After

Content Create Multiple Doctype With Blueprint - Before

Content Create Multiple Doctype With Blueprint - After

Media Create - Before

Media Create - After

[emmaburstow]

Thanks for this work Jan. Interesting side-effect you've detailed here. We'll have a good look at this one. Thanks for the detail, as ever. We'll ask if we need to,

Em

[nul800sebastiaan]

Awesome, this is a great bit of work @BatJan - top job! 🎉