Skip to main content
AI Assist is now on Stack Overflow. Start a chat to get instant answers from across the network. Sign up to save and share your chats.
Add more detail and code example
Source Link
DumbDevGirl42069
  • 969
  • 5
  • 25
  • 56

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>

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?

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>
Source Link
DumbDevGirl42069
  • 969
  • 5
  • 25
  • 56

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

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?