[Callout] Setup component

[jtalen]

Provide a general summary of the issue here

Until yesterday the inline message had the possibility to include an action button. Due to accessibility reasons (live region) you have decided to remove interactive elements from the inline message. I believe I've reasonable arguments to bring this action button back

🤔 Expected Behavior?

I would expect to have an action button in the message. From an UX Designer perspective I want to have the opportunity to convey a message and have a supportive action to give the user the possibility to do an follow up action. For example "Go to a different page", "Try again", etc.

😯 Current Behavior

The button is removed because interactive elements are not accessible and the screenreader will read the label of the button but not describe it as a button. So the user will not able to focus or trigger this action.

💁 Possible Solution

I believe an inline message doesn't always have to be a live region, because you have two types of inline messages:

Inline message types

1. Static Inline Messages Messages that are visible when the page loads and do not require dynamic updates.

Examples:

• Confirmation after submitting a form.
• Informational message when opening a page.

Accessibility:

✅ No live region needed. ✅ Action buttons are allowed.

2. Dynamic Inline Messages Messages that appear asynchronously on a page where the user is already present.

Examples:

• Validation message after filling out a field.
• Error message after a failed API call.

Accessibility:

✅ Live region required (aria-live="polite" or aria-live="assertive"). ⚠️ Avoid action buttons unless properly implemented.

Live regions

✅ When to use a live region:

If the inline message appears asynchronously on a page where the user already is, for example:

• A validation message after filling out a field.
• An error message after a failed API call without a page reload.
• A status update (e.g., “You are now offline”).

❌ When not necessary: If the inline message is visible when the page loads, for example:

You return to page 1 after submitting a form, and a confirmation or error message is shown there. In that case, it’s not a dynamic update, so a live region is not required.

Solution 1

Create 2 variants of the inline message: a static and a dynamic one. And write proper documentation when to use which type (static or dynamic)

Solution 2

Create a versatile component that always works. When you split the message part from the action button part, it will be accessible and user friendly. Benefits are:

• There is visual grouping because the message and button are grouped together.
• Screen readers will able to read the message and the button is accessible (outside of the live region)

<div class="inline-message error">
  <div id="error-text" role="alert" aria-live="polite">
    An error occurred while loading the data.
  </div>
  <button aria-describedby="error-text">
    Try again
  </button>
</div>

🖥️ Steps to Reproduce

N/A

What browsers are you seeing the problem on? (only for bugs in code)

Other

If other, please specify.

No response

What operating system are you using?

Mac

👤 Your name

Jeremy Talen

🧢 Your product/team

Magister

🎨 Your Theme(s)

Magister

[Diaan]

We discussed this with our accessibility expert and will keep the current inline message as is, and will create another component, with the functionality described in the "Static inline message". So that will be able to contain buttons, links, or even input fields like in this scenario ( a reproduction of an issue Magister ran into):

This new component won't use live-aria

[jtalen]

@DanielleRameau What is the status? Is this planned after the roadmap or in paralel?

[DanielleRameau]

@jtalen After our meeting I discussed it with the team and created the stories. The status is changed to 'next' on the roadmap.