Alert and notification patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Rendering a success alert with Tailwind CSS

Which option correctly renders a green success alert with accessible roles and proper padding using Tailwind CSS?

A <div class="bg-green-500 text-white p-2 rounded">Success! Your action was completed.</div>

B <div role="alert" class="bg-green-200 text-green-900 p-1 rounded">Success! Your action was completed.</div>

C <div role="alert" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" aria-live="polite">Success! Your action was completed.</div>

D <div role="alert" class="bg-green-100 border-green-400 text-green-700 px-4 py-3 rounded">Success! Your action was completed.</div>

💡 Hint

Look for the option that uses role="alert" and includes padding and border classes for a clear alert box.

Option C uses role="alert" for screen readers, includes padding (px-4 py-3), border with color, background, and text colors for a clear success alert. It also uses aria-live="polite" for accessibility. Other options miss some accessibility or styling details.

❓ selector

intermediate

Selecting the correct Tailwind class for a dismissible alert close button

Which Tailwind CSS class combination is best for a close button inside an alert to ensure it is keyboard accessible and visually clear?

A focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 text-red-700 hover:text-red-900

B hover:bg-red-700 text-white p-1 rounded cursor-pointer

C text-red-500 cursor-pointer

D focus:ring-4 focus:ring-red-300 rounded-full p-2 text-red-600

💡 Hint

Focus styles help keyboard users see the button is focused.

Option A includes focus outlines and ring styles for keyboard accessibility, plus hover color changes for clarity. Others miss focus styles or have insufficient padding.

🧠 Conceptual

advanced

Understanding ARIA roles in alert notifications

What is the main purpose of adding role="alert" to an alert notification in HTML?

A It styles the alert with a red background automatically.

B It hides the alert from screen readers to avoid distraction.

C It delays the alert announcement until the user focuses on it.

D It makes the alert content immediately announced by screen readers without user interaction.

💡 Hint

Think about how screen readers handle urgent messages.

role="alert" tells screen readers to announce the content immediately as a live region. It does not affect styling or delay announcements.

❓ layout

advanced

Creating a responsive notification banner with Tailwind CSS

Which option correctly uses Tailwind CSS to create a notification banner that is horizontally centered, has space between icon and text, and stacks vertically on small screens?

A <div class="flex flex-col sm:flex-row items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

B <div class="flex items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

C <div class="flex flex-row items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

D <div class="block sm:flex items-center justify-center gap-4 bg-blue-100 p-4 rounded"> <svg class="w-6 h-6 text-blue-600"></svg> <p class="text-blue-800">This is a notification banner.</p> </div>

💡 Hint

Use flex direction column by default (small screens) and row on larger screens (sm:).

Option A uses flex-col by default (vertical stack on small screens) and switches to flex-row on larger screens (sm:flex-row). It centers items and adds gap for spacing. Others miss the responsive stacking or use fixed directions.

❓ accessibility

expert

Ensuring accessible live region updates for dynamic alerts

You have a notification area that updates dynamically with new alerts. Which ARIA attribute combination ensures screen readers announce new alerts only when they appear, without repeating old alerts?

A aria-live="off" aria-atomic="true"

B aria-live="polite" aria-atomic="true"

C aria-live="polite" aria-atomic="false"

D aria-live="assertive" aria-atomic="false"

💡 Hint

Consider polite announcements and whole region updates.

aria-live="polite" lets screen readers announce updates without interrupting. aria-atomic="true" ensures the entire alert content is read, preventing partial repeats. Other options either interrupt too aggressively, don't announce, or may cause partial announcements.