Better keyboard support for distributor admin menu

[samikeijonen]

Fixes #563

Description of the Change

• Use <button> instead of <div>.
• Use Core button styles where possible for consistency and better focus styles.
• Use disabled attribute when post have been syndicated.
• This is not full refactoring but first step in better accessibility.

Alternate Designs

None.

Benefits

Better keyboard support when using correct semantics out of the box.

Possible Drawbacks

Complex codebase, needs testing that nothing is broken.

Verification Process

Distribute and push article using only keyboard.

Checklist:

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests passed.

Applicable Issues

#563

[dinhtungdu]

The code looks good @samikeijonen. There is a small issue that internal connections can't be selected using keyboard because they're still using div. Can you please update?

[dinhtungdu]

we should keep the border-radius and text-shadow because they're overridden by admin bar style.

[samikeijonen]

@dinhtungdu Unfortunately I have zero hours for updates at the moment.

[dinhtungdu]

@samikeijonen no problem, I will take over this.

[dkotter]

@dinhtungdu Testing this locally, I'm seeing the connection list break if you have more than 4 connections:

I believe once there are 5 or more connections, we constrain those to a box that you can scroll through, to keep the list down. Looks like something changed here that is preventing that from working properly, so the entire connection list is shown and there's no way to scroll through them all.

[dinhtungdu]

Thank @dkotter, you're right, the style to handle overflow was removed. I added it again, the list is now working correctly with more than 4 connections.

[dkotter]

@dinhtungdu Looks good 👍