Add aria-label to arrow dropdown for accesibility

[tdrayson]

When using a screen reader, you should be able to tab to the dropdown to be able to enter.

It should clearly explain what the button group you is/does. Adding an aria label will read $title: submenu.

Example: Equalize digital use an aria label on the dropdown arrow with the same markup to clearly explain to the user what the button does. https://equalizedigital.com/

[tdrayson]

Improvement on previous PR:

• Added aria label to dropdown arrow
• Moved 'click-arrow ' outside <a>, but inside <li> in navigation
• Added generate_dropdown_arrow_markup()
• Refactored code for dropdown arrow to share new markup function

Might need to be checked over and improved on, but it's a good start and will make a big improvement for screen readers and keyboard navigation

Note: Wasn't sure how to build all.css file to view the new changes.

[tomusborne]

@tdrayson Thanks for this! We've made some changes in https://github.com/tomusborne/generatepress/pull/628 that address this. It's not perfect (using role="button" inside the <a>), but I think it ticks most of the boxes. It would be good to eventually refactor this to use a <button> outside of the <a>, but that will take special care to make sure we don't break thousands of websites.

https://github.com/tomusborne/generatepress/pull/628 will be merged into 3.5.0, so would love feedback if possible.

Thanks again!