[v4] Improve accessibility for icon-only buttons

[SebastianEberlein-JUNO]

Description

Icon-only buttons get a title attribute, which is helpful for mouse interaction. But they also rather need an aria-label for better accessibility.

It is also not possible to add an aria-label to a <k-button> in a custom panel plugin. Probably because this attribute is not passed to the <component>?

Your setup

Kirby 4 beta 2

[SebastianEberlein-JUNO]

Here are some links about icon buttons and links:
https://www.sarasoueidan.com/blog/accessible-icon-buttons/
https://kittygiraudel.com/2020/12/10/accessible-icon-links/

About the title attribute and tooltips:
https://www.tpgi.com/using-the-html-title-attribute/
https://inclusive-components.design/tooltips-toggletips/
https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/

About the title and aria-label together:
https://www.deque.com/blog/text-links-practices-screen-readers/

Accessible UI component libraries for comparison:
https://react-spectrum.adobe.com/react-spectrum/Button.html#icon-only
https://bbc.github.io/gel/components/buttons-and-ctas/#labels
https://polaris.shopify.com/components/actions/button#labeling
https://carbondesignsystem.com/components/button/code/#live-demo (select the "Icon Button" variant)