Button is not accessible and not focused on tab key

Question

I have below code to show buttons in a multi select dropdown. I have used tabindex="0" for each

tag. Also added focus in CSS.

.btn-clear-all:focus {
  outline: -webkit-focus-ring-color auto 1px;
  outline: 1px solid black;
}

<div class="form-group-multi__MultiControls">
<p tabindex="0" class="btn-tertiary--light">Cancel</p>
<p tabindex="0" class="btn-clear-all">Clear all</p>
<p tabindex="0" class="btn-secondary">Apply</p>
</div>

My problem here is 'Cancel' button is accessible on tab key, but not other two - Clear all and Apply.

Answer 1

You are missing an extremely obvious thing (I mean, for semantics and accessibility).
Look at your buttons and pay attention to what you see. Do you see buttons?

Correct answer: No. You see paragraphs (<p>s, not <button>s).

There are two solutions, one best and one not so good:

1. The best solution. Change all of your <p>s to <button>s. You already have Bootstrap's btn-secondary class applied to them, so I'm pretty confident your styling won't suffer in any way.
2. Add role="button" to your <p>s. Again, as the first rule of ARIA states that you mustn't use ARIA if you absolutely haven't to, it's a not too good solution.

Answer 2

<div class="form-group-multi__MultiControls">
<button type="button" tabindex="0" class="btn-tertiary--light">Cancel</button >
<button type="button"  tabindex="0" class="btn-clear-all">Clear all</button>
<button type="button" tabindex="0" class="btn-secondary">Apply</button>
</div>

This might help.