Accessibility (keyboard navigation): The 'Content' drop down menu opens automatically when tabbing

[glombek]

Prerequisites

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

If there's an existing issue for this PR then this fixes https://trello.com/c/pd2QnSjI/17-the-content-drop-down-menu-opens-automatically-when-tabbing

Description

The drop down for 'Content' (within the 'Content' tab) opens when user is tabbing through.

This behaviour differs from all other drop downs on the CMS (that remain closed until user opens).

I replaced the custom markup with the umb-dropdown directive, but also allowed the existing hover functionality to remain.

To test:
Open up a content node and tab from the name field over to the content tab. Tabbing again will take you to the next tab (Info) rather than entering the dropdown. Hit space/enter to open while the Content tab button is selected. Then tabbing will take you into the dropdown menu.

Hitting Esc or tabbing past the bottom item in the dropdown will close the dropdown.

The Content button will now be announced as expanded/collapsed when using a screen reader.

Hover and click functionality is maintained.

[OwainWilliams]

Tested and works as expected without impacting the expected functionality e.g. hover states or mouse usage. Thanks @glombek 👍

[umbrabot]

Hi there @glombek,

First of all: A big #H5YR for making an Umbraco related contribution during Hacktoberfest! We are very thankful for the huge amount of PRs submitted, and all the amazing work you've been doing 🥇

Due to the amazing work you and others in the community have been doing, we've had a bit of a hard time keeping up. 😅 While all of the PRs for Hacktoberfest might not have been merged yet, you still qualify for receiving some Umbraco swag, congratulations! 🎉

In the spirit of Hacktoberfest we've prepared some exclusive Umbraco swag for all our contributors - including you!

As a new choice this year, you can opt-out of receiving anything and ask us to improve the planet instead by planting a tree on your behalf. 🌳

Receive your swag or plant a tree! 👈 Please follow this link to fill out and submit the form, before February 26, 2021.

Following this date we'll be sending out all the swag, which also means that it might not reach your doorstep before April, so please bear with us and be patient 🙏

The only thing left to say is thank you so much for participating in Hacktoberfest! We really appreciate the help!

Kind regards,
The various Umbraco Teams