How to add an aria-label attribute to a custom angular component?

I want to add an aria-label attribute to an external Angular component (<code-input>), as shown below:

<code-input [isCodeHidden]="true" [code-length]="2" [attr.aria-label]="Test">


I attempted to add the aria-label using the [attr.aria-label] attribute and aria-labelledby. However, when I inspect the page with the EqualWeb accessibility checker tool, I receive errors indicating that the <code-input> component is missing an aria-label for the input fields.

The <code-input> component captures user input, such as a PIN. Given a code-length of 2, it renders two input boxes.

Expected Outcome: The custom Angular component should render two input boxes with the aria-label applied to each input field individually. Upon inspecting the component with the EqualWeb accessibility checker tool, there should be no AODA compliance errors.

Actual Outcome: The aria-label is applied only to the outer HTML block of the <code-input> component. The individual input boxes within the component do not have the aria-label attribute, resulting in AODA compliance errors when inspected.

How can I apply the aria-label attribute to each input field within a custom Angular component like <code-input>?

Continue reading...