Make input fields of components more accessible

[fengelniederhammer]

We are not that accessible with our components, but we could try to do better. Maybe not in this PR, but I saw a great talk https://www.youtube.com/watch?app=desktop&v=UHjt2A6CS6A
There she suggested, for input elements, where there should be no visible label to use this css:

.visually-hidden {
  position: aboslute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

and add it to the label we want to hide <label className='visually-hidden'>. This way the screen reader can determine what this component is about. Alternatively and easier, we could use the aria-label here, but she mentiones, that the area labels are sometimes not corerctly transalted by assisting technology. But It would be better than nothing :)

Originally posted by @JonasKellerer in #855 (comment)