Accessible EmptyContent component

[Pytal]

Close #2500

To Do

• Require accessible https://github.com/robcresswell/vue-material-design-icons exclusively with the icon slot and drop class based icons
  • Icons use inline svg markup https://github.com/robcresswell/vue-material-design-icons/blob/5.1.2/build.ts#L20-L28
  • Icons have role="img" https://github.com/robcresswell/vue-material-design-icons/blob/5.1.2/build.ts#L18
  • Icons are decorative so they have the aria-hidden attribute https://github.com/robcresswell/vue-material-design-icons/blob/5.1.2/build.ts#L15
• Remove mandatory title requirement
  • Allow more flexibility in component usage without a title e.g https://github.com/nextcloud/nextcloud-vue/blob/498364d197c5257d758a48853abf87f71ba1d8d2/src/components/DashboardWidget/DashboardWidget.vue#L143-L149

[Pytal]

Would it make sense to recommend adding the accessible title prop to EmptyContent icons @nimishavijay?

It would show a tooltip like below whenever you hover over the icon

[nimishavijay]

Would it make sense to recommend adding the accessible title prop to EmptyContent icons?
It would show a tooltip like below whenever you hover over the icon

I would say this image is decorative, as all the information required by a person on this page is given through the text.

If the purpose of a title prop here is to make the page screen-reader friendly, I would day we don't need to include it here because there should be a some supporting text under the icon, and that works for a screenreader also :)

cc @jancborchardt

[jancborchardt]

Yep, as so often the icon is decorative and has its text there as h2, and thus should have empty alt text alt="" to designate that it's decorative and no title to prevent duplication.