a11y: va-badge

[kushich]

• step 1: investigate a11y guides for this component;
• step 2: discuss with team;
• step 3: implement required functionality;
• step 4: add docs page section about a11y.

[kushich]

Right now we are using role="alert" for our badge component. Looks like this is not correct (1):

I think we should use role="status" instead (2):

According to role="status" docs page (3) we should use aria-labelledby if text is visible. In our case I think we should pass value of text prop into this attribute.

Here is an implementation example on w3 (4).

[rustem-nasyrov]

Right now I'm working on va-badge component, I can handle this issue, after discussion.