Blazor Ramp Core

The Blazor Ramp project aims to provide a suite of modular, accessibility-first Blazor components. This Core package includes the LiveRegionService, which enables you to make announcements using the aria-live API via elements with the aria-live attribute, utilising the values polite and assertive to indicate the urgency of each announcement.

The Core package also includes the <AnnouncementHistory /> component, which allows users to view and/or clear a rolling log of the last twenty announcements stored in browser memory.

In addition to the service and component mentioned above, the Core project provides a common set of CSS custom properties that all future components will utilise for their styling. Overriding these CSS properties will therefore update the appearance of all components that rely on them. Each component also exposes non-scoped CSS classes, enabling you to apply custom style overrides where necessary.

Full documentation available at: https://docs.blazorramp.uk

Installation

Add the BlazorRamp.Core nuget package to your project using the Nuget Package Manager or the dotnet CLI.

dotnet add package BlazorRamp.Core

Add the following Core stylesheet reference to the <head> section of your application:

Blazor Web App / Blazor Server → App.razor
Blazor WebAssembly → wwwroot/index.html

<head>
	<link rel="stylesheet" href="_content/BlazorRamp.Core/assets/css/core.min.css" />
</head>

Add the following Blazor Ramp Core live region script after Blazors script, as follows:

Blazor Web App / Blazor Server → App.razor
Blazor WebAssembly → wwwroot/index.html

<script src="_framework/blazor.web.js"></script>
<script type="module" src="_content/BlazorRamp.Core/assets/js/core-live-region.js"></script>

Register BlazorRamp services in the Program.cs file (Both server and client if using Server and WebAssembly interactive rendermode)

Add the following line to the service registration section:

@using BlazorRamp.Core.Common.Extensions;

builder.Services.AddBlazorRampCore();

Add the <AnnouncementHistory /> component with your parameter values above the Router component contained in either:

Blazor Web App / Blazor Server → Routes.razor
Blazor WebAssembly → App.razor

<AnnouncementHistory RefreshText="Refresh" ClearCloseText="Clear & Close" CloseText="Close" NoDataText="No announcements" 
Title="Recent Announcements" TriggerVisible="true" TriggerText="Alerts" />

<Router AppAssembly . . .

Using the Live Region Service

Inject the ILiveRegionService into your desired component or class and make the appropriate calls by passing the ILiveRegionSerivce.MakeAnnouncement method an announcement object.

@inject ILiveRegionService _liveRegionService

@code{

	private async Task MakeAnnouncement()
	{
		var announcement = new Announcement("The site is now using a dark coloured theme.", AnnouncementType.Info, "Dark Theme Switch", LiveRegionType.Polite);
		await _liveRegionService.MakeAnnouncement(announcement);
	}
}

Note: Where possible make announcements using LiveRegionType.Polite and keep your messages brief and to the point. Long verbose messages are annoying and just slow the user down.

The announcement object has the following constructor parameters:

Message - a string value containing the message to be announced.
AnnouncementType - an enumerated type describing the type category of announcement (for future use) the default is AnnoucementType.Info,
AnnouncementTrigger - an optional string value with the user friendly display name of the element that triggered the announcement such as 'Save Button'
LiveRegionType - the urgency of the announcement. Polite announcements wait for the screen reader to finish current speech before announcing where as assertive announcements interrupt the screen reader immediately.

Full documentation available at: https://docs.blazorramp.uk

Screen Reader Browser Combination Tests:

On Windows 11 - JAWS, NVDA and Narrator each paired with Chrome, Edge and Firefox.
On macOS (Sequoia) VoiceOver was paired with Safari
On iPhone, VoiceOver was paired with Safari
On Android, TalkBack was paired with Chrome

Blazor Ramp Core

The Core package also includes the <AnnouncementHistory /> component, which allows users to view and/or clear a rolling log of the last twenty announcements stored in browser memory.

Full documentation available at: https://docs.blazorramp.uk

Installation

Add the BlazorRamp.Core nuget package to your project using the Nuget Package Manager or the dotnet CLI.

dotnet add package BlazorRamp.Core

Add the following Core stylesheet reference to the <head> section of your application:

Blazor Web App / Blazor Server → App.razor
Blazor WebAssembly → wwwroot/index.html

<head>
	<link rel="stylesheet" href="_content/BlazorRamp.Core/assets/css/core.min.css" />
</head>

Add the following Blazor Ramp Core live region script after Blazors script, as follows:

Blazor Web App / Blazor Server → App.razor
Blazor WebAssembly → wwwroot/index.html

<script src="_framework/blazor.web.js"></script>
<script type="module" src="_content/BlazorRamp.Core/assets/js/core-live-region.js"></script>

Register BlazorRamp services in the Program.cs file (Both server and client if using Server and WebAssembly interactive rendermode)

Add the following line to the service registration section:

@using BlazorRamp.Core.Common.Extensions;

builder.Services.AddBlazorRampCore();

Add the <AnnouncementHistory /> component with your parameter values above the Router component contained in either:

Blazor Web App / Blazor Server → Routes.razor
Blazor WebAssembly → App.razor

<AnnouncementHistory RefreshText="Refresh" ClearCloseText="Clear & Close" CloseText="Close" NoDataText="No announcements" 
Title="Recent Announcements" TriggerVisible="true" TriggerText="Alerts" />

<Router AppAssembly . . .

Using the Live Region Service

Inject the ILiveRegionService into your desired component or class and make the appropriate calls by passing the ILiveRegionSerivce.MakeAnnouncement method an announcement object.

@inject ILiveRegionService _liveRegionService

@code{

	private async Task MakeAnnouncement()
	{
		var announcement = new Announcement("The site is now using a dark coloured theme.", AnnouncementType.Info, "Dark Theme Switch", LiveRegionType.Polite);
		await _liveRegionService.MakeAnnouncement(announcement);
	}
}

Note: Where possible make announcements using LiveRegionType.Polite and keep your messages brief and to the point. Long verbose messages are annoying and just slow the user down.

The announcement object has the following constructor parameters:

Message - a string value containing the message to be announced.
AnnouncementType - an enumerated type describing the type category of announcement (for future use) the default is AnnoucementType.Info,
AnnouncementTrigger - an optional string value with the user friendly display name of the element that triggered the announcement such as 'Save Button'
LiveRegionType - the urgency of the announcement. Polite announcements wait for the screen reader to finish current speech before announcing where as assertive announcements interrupt the screen reader immediately.

Full documentation available at: https://docs.blazorramp.uk

Screen Reader Browser Combination Tests:

On Windows 11 - JAWS, NVDA and Narrator each paired with Chrome, Edge and Firefox.
On macOS (Sequoia) VoiceOver was paired with Safari
On iPhone, VoiceOver was paired with Safari
On Android, TalkBack was paired with Chrome

code-dispenser/BlazorRamp.Corev1.0.7

Get Started

Readme

Blazor Ramp Core

Installation

Using the Live Region Service

code-dispenser/BlazorRamp.Corev1.0.7

Get Started

Readme

Blazor Ramp Core

Installation

Using the Live Region Service