Fix rendering of error in case of no quota space

[ishank011]

When web calls the /ocs/v1.php/cloud/users/$username endpoint, it returns back the home quota of the user. If the user doesn't have enough quota, the 'Upload' button is disabled, but no error message is shown. If you inspect the element, you can see the error 'You don't have enough quota to upload' but it's not displayed to the user.

[pascalwengerter]

@tbsbdr needs concepting (not a lot, but anything to make it actionable 🙏🏽 )

[tbsbdr]

proposal:

• show notification on click of the disabled button like "no quota ...."
• add contextual helper with same message as in the notification

[AlexAndBear]

@tbsbdr
We currently have a tooltip on the button which shows the message, I'd vote for this is enough?

Having click events on a disabled button is not the best way to go, as some browsers doesn't emit those events:
Akryum/floating-vue#125 (comment)

There is still a little bug tough, that's why the tooltip wasn't shown in the first place.
https://github.com/owncloud/web/pull/7376/files

[tbsbdr]

Tooltip-information should be optional as they are not accessible. I treat them as optional, , meaning: they are nice to have and enhance ux, but the ui must be usable if they were not there. this is at least my understanding, is this correct @kulmann 

If we can't rely on tooltip information, we would need an accessible solution which would contextual help or notification.

[AlexAndBear]

@tbsbdr If it comes down to a11y, we also have area descriptors on those buttons.

[kulmann]

Well, the linked PR fixes that the tooltips are shown (they were there before but not rendered on disabled buttons). Good first step. For making the information accessible we should just add the information via aria-describedby like we already do in other situations. @janackermann could you do those adjustments as well please?

[kulmann]

If we can't rely on tooltip information, we would need an accessible solution which would contextual help or notification.

That's not needed. Tooltip for visuals, aria-describedby for screen readers solves the job well.