[Cub] Input element for entering episode number does not have a label

[moody2times]

Description

The input element for entering episode number does not have a visible text label. According to the WCAG specification, an interactive element must be labeled. This is because it is intended for users to interact with. The label will help those using assistive technologies to become aware of the type of interaction required with the focused element.

To Reproduce

On firefox v81.0.2, right click the input element with the placeholder that says "Enter Episode Number" and click inspect accessibility properties and you will see that this element has a text label accessibility issue.

Expected Behavior

The input element should have a label that announces to the user the kind of interaction expected, in this case, to enter episode number.

Browser information

Firefox for Windows 10 v81.0.2

Possible Solution

A visible text labeling the input element does not fit into the design in this project. Therefore, the input element can be wrapped inside a label element. The label element should not be given a visible text, rather the aria-label attribute should be added to the input element and given the same value as the placeholder. Ordinarily, the voice-reader would read the text in the placeholder and that could serve as the name of the input element but it is generally advised not to use placeholder for assistive technology users because the text disappears when the user starts to interact with the element and that could cause some problems.

[moody2times]

Closed by #38