How can I resolve the accesibility error for "Have an accessible name" on a toast?

Question

What is the correct way to resolve this error on a toast (popup notification)? eg name? aria-labelledby? Is the to describe what is in the notification or what the component is?

I'm using https://bootstrap-vue.org/docs/components/toast

This renders something like this

<div role="alert" aria-live="assertive" aria-atomic="true">
    <div tabindex="0">
        <button type="button" aria-label="Close">×</button>
        <div>
            <p>Some notification text</p>
        </div>
    </div>
</div>

Answer 1

Here are the two ways to resolve it:

1. if you have a specific HTML element that holds the title of the toast, give the element an id and use the id as the value of aria-labelledby in the parent elementNode e.g

<div aria-labelledby="title" role="alert" aria-live="assertive" aria-atomic="true">
  <h3 id="title">I am the title</h3>
  ...
</div>

2. you can just use the aria-label attribute on the parent nodeElement e,g:

<div aria-label="Your subscription is about to expire" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

In summary, what this does is; it tells the screen-reader what the pop-up is about as a kind of summary just the way we get a quick grasp of what an input field is all about when a label is added.