[web] Adds a core/Selector component

[dgdavid]

Adds a core/Selector component and uses it to render suitable selectors across Agama codebase instead of defining almost the same code repeatedly.

Note that, while it was originally intended to have a fully accessible selector, time and priority constraints (among other reasons) forced to just centralize the repetitive code for rendering selectors with an small approach change.

Once priorities permit, work on a better, fully accessible selector will be resumed.

---

Adapted selectors:

• L10n: Language, Keymap, Timezone
• Storage: Disk selectors, Space policy
• Product: product selection

Toggle screenshots

---

Before	After

---

Related to #786 (comment)

[coveralls]

coverage: 74.031% (+0.02%) from 74.011%
when pulling a7a88a5 on better-selector
into 9b6654b on master.

[dgdavid]

⚠️ NOTE: This made me realize that Agama is doing wrong in terms of accessibility and usability by not using proper <label>s for no other reason than visual aesthetic. This test example is working just because there is only one input with the "search" role, but it would fail trying to get it by its name/label too, which helps to reveal the underlying problem:

-   const filterInput = screen.getByRole("search");
+   const filterInput = screen.getByRole("search", { name: /Filter by language/ } );

TestingLibraryElementError: Unable to find an accessible element with the role "search" and name `/Filter by language/`

    Here are the accessible roles:

      search:

      Name "":
      <input
        placeholder="Filter by language, territory or locale code"
        role="search"
        type="text"
      />

      --------------------------------------------------

Of course, taking a look at the UI, for us and thanks to the placeholder it's clear the input functionality

but it might not be as obvious to other users.

Something to work on. But in a different PR.

---

From W3c (https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text)

While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels

From MDN (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder)

Warning: Using a placeholder instead of a visible label harms accessibility and usability for many users including older users and users with cognitive, mobility, fine motor skill and vision impairments. Labels are better: they are always visible and they provide for a larger hit region to focus on the control.
...
Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they don't replace a proper label.

Other links,

https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research

---

/cc @joseivanlopez, @imobachgs

[joseivanlopez]

Good point! Definitely, "innovative" UI approaches are quite ... dangerous :)

[joseivanlopez]

LGTM