Spreed: Missing accessibility labels for all buttons in composer, and more.

[MarcoZehe]

Steps to reproduce

1. With a browser and screen reader such as VoiceOver on Mac or NVDA on Windows, bring up the Talk app and go into a chat.
2. Explore the vicinity of the input box.

Expected behaviour

Screen reader should be able to identify the input box and the buttons for what they do.

Actual behaviour

Screen Reader doesn't announce the input box as a textbox, and the buttons all are only announced as "button", but what they do is not spoken.

Browser

Microphone available: yes

Camera available: yes

Operating system: Windows

Browser name: Firefox

Browser version: 74.0.1

Browser log

Accessibility Inspector shows the name of all buttons to be "".

[MarcoZehe]

To solve:

1. Give all buttons meaningful localized labels.
2. For the element that has the contentEditable attribute, add role="textbox" aria-multiline="true" so screen readers reliably identify this as a multiline textbox.

[MarcoZehe]

When initiating a call, the mute, video, and all other buttons except "Leave Call" are also missing their labels.

There seems to have been a try to associate tooltips via aria-describedby. There are two problems with this approach:

1. aria-describedby is secondary information.
2. The tooltip only appears if you mouse over it. Something a blind person will never do unless they absolutely have to. If the mouse doesn't hover over it, the tooltip disappears, and so does the accessibility information.

So, the fix for all these buttons is a proper aria-label, which is primary information, with localized strings like "Mute", "Unmute", "Enable video", "Disable video" and other appropriate labels.

[MarcoZehe]

CC @nextcloud/accessibility

[tyrylu]

Confirmed. I thought that someone will make a PR sooner, but they did not...