[Outreachy Task Submission] Accessibility Issue with screen readers not working on 'Collections' screen

[Chiemezuo]

Intro

In the 'Collections' screen, screen readers cannot accurately read out the content of the screen for a host of factors. Some of these factors are:

• The edit and delete buttons have no aria-label elements, and therefore cannot be read out by a screen reader.
• There is no semantic (or well-defined) separation between the collection-item title and description, and will therefore get mumbled together.
• The + icon in the add button at the top right has no alt text (a problem not exclusive to screen readers).
• The add button itself has no aria-label attribute.
• The search icon and info icon have no alt text or aria-label attributes.
• The search form has no corresponding label.
• The buttons are empty and have no value text.

Issue

Unlike in most of the other screens where there was partial readability, screen readers here will not be able to render any content whatsoever. Also, users with settings to disable images will not have alt texts their machines can fall back on.

Fix

• I will add aria-label elements to both the edit and delete SVGs.
• I'll need to add logical separations or identifiers between titles and descriptions.
• I will add an alt text to the add, edit, delete, 'info', and search SVGs.
• I will add a label to the form.
• I'll make a way around the buttons having no value (they can still be left as is, because they won't affect core screen-reading functionality)

Pre-requisite

Fixing the aforementioned problems will not be enough to automatically make the 'Collections' page screen-reader compliant. Keyboard navigation must work for the full functionality to happen. However, I have brought up that topic in a separate issue of its own: #4777, and I have also raised a PR that fixes that issue: #842