Accessibility improvement for the add question button

[koenvangeert]

[Issue]
There is button "Add Question" available on main content without appropriate role information.

[User Impact]
Screen reader users will be unable to determine that this content is interactive.

[Code Reference]

<div class="svc-page__add-new-question svc-btn" tabindex="0">
<span class="svc-text svc-text--normal svc-text--bold">Add Question</span>
(...)
</div>

[Recommendation]
Ensure custom controls provide proper textual name, role, and state information.

The best way to do this is to use native controls, as they come with this information built in. In this case, elements would be most appropriate.

If conversion to native buttons is not possible, developers must add role="button" to these controls. If the buttons have insufficient internal text, developers must add an aria-label attribute or an aria-labelledby attribute to provide a name.

Additionally, the developer should take the button of more option on Add Question outside the

of Add Question, remove tabindex="0" from the

& modify the CSS properties.

[Compliant Code Example]

<div class="svc-page__add-new-question svc-btn">
<button class="svc-text svc-text--normal svc-text--bold">Add Question</button>
(...)
</div>