Skip to content

Updated the UG Documentation for Colorpicker #6916

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 15, 2025
Merged

Updated the UG Documentation for Colorpicker #6916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions blazor/color-picker/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Accessibility in Blazor Color Picker Component

The Blazor Color Picker component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The Blazor Color Picker component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.

The accessibility compliance for the Blazor Color Picker component is outlined below.

Expand Down Expand Up @@ -39,36 +39,36 @@ The accessibility compliance for the Blazor Color Picker component is outlined b

## WAI-ARIA attributes

The Blazor Color Picker component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ColorPicker component:
The Blazor Color Picker component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/) practices to support assistive technologies. The following ARIA attributes are used in the Blazor Color Picker component:

| Attributes | Purpose |
| --- | --- |
| `role` | Indicates the Color Picker component as `color`and the tiles as `gridcell` in the color palette. |
| `aria-label` | Indicates the accessible name for the tiles. |
| `aria-selected` | Indicates the current selected state of the tile. |
| `aria-haspopup` | Indicates the availability of the popup element. |
| `aria-expanded` | Indicates whether the popup can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. |
| `aria-owns` | Identifies an elements in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
| `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
| `role` | Identifies interactive elements (for example, `grid` for the palette and `gridcell` for tiles) to convey structure to assistive technologies. |
| `aria-label` | Provides accessible names for interactive elements such as tiles and buttons. |
| `aria-selected` | Indicates the current selection state of a tile in the palette. |
| `aria-haspopup` | Indicates the availability of the popup element when applicable. |
| `aria-expanded` | Indicates whether the popup is currently expanded or collapsed. |
| `aria-owns` | Establishes relationships between popup and trigger elements when DOM hierarchy alone is insufficient. |
| `aria-disabled` | Conveys that the element is disabled and not operable. |

## Keyboard interaction

The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ColorPicker component.
The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ColorPicker component.

| Windows | Mac | Actions |
| --- | --- | --- |
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the handler/tile up from the current position. |
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the handler/tile down from the current position. |
| <kbd>←</kbd> | <kbd>←</kbd> | Moves the handler/tile left from the current position. |
| <kbd>→</kbd> | <kbd>→</kbd> | Moves the handler/tile right from the current position. |
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Apply the selected color value. |
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | To focus the next focusable element in the ColorPicker popup. |
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Applies the selected color value. |
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next focusable element in the Color Picker popup. |

## Ensuring accessibility

The Blazor Color Picker component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
The Blazor Color Picker component's accessibility levels are validated with [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) using Playwright-based tests.

The accessibility compliance of the Blazor Color Picker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the accessibility of the Color Picker Blazor component with accessibility tools.
The accessibility compliance of the Blazor Color Picker component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the component with accessibility tools.

{% previewsample "https://ej2.syncfusion.com/accessibility/color-picker.html" %}

Expand Down
22 changes: 11 additions & 11 deletions blazor/color-picker/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ control: Colorpicker
documentation: ug
---

# Events in Blazor ColorPicker Component
# Events in Blazor Color Picker Component

This section explains the list of events of the Colorpicker component which will be triggered for appropriate Colorpicker actions.
This section lists the events in the Color Picker component and when they are triggered during user interaction.

## Closed

`Closed` event triggers after the popup has been closed.
`Closed` triggers after the popup has been closed.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -31,7 +31,7 @@ This section explains the list of events of the Colorpicker component which will

## Opened

`Opened` event triggers when the popup Open.
`Opened` triggers when the popup Open.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -49,7 +49,7 @@ This section explains the list of events of the Colorpicker component which will

## OnClose

`OnClose` event triggers before the popup closed.
`OnClose` triggers before the popup closed.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -67,7 +67,7 @@ This section explains the list of events of the Colorpicker component which will

## OnOpen

`OnOpen` event triggers when the popup is Opened.
`OnOpen` triggers when the popup is Opened.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -85,7 +85,7 @@ This section explains the list of events of the Colorpicker component which will

## ValueChange

`ValueChange` event triggers when changing the colors.
`ValueChange` triggers when changing the colors.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -103,7 +103,7 @@ This section explains the list of events of the Colorpicker component which will

## Created

`Created` event triggers when the component is created.
`Created` triggers when the component is created.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -121,7 +121,7 @@ This section explains the list of events of the Colorpicker component which will

## OnModeSwitch

`OnModeSwitch` event triggered before the mode switching is performed in the component.
`OnModeSwitch` triggers before the mode is switched in the component.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -139,7 +139,7 @@ This section explains the list of events of the Colorpicker component which will

## ModeSwitched

`ModeSwitched` event triggered after the mode switching is performed in the component.
`ModeSwitched` triggers after the mode switching is completed.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand All @@ -157,7 +157,7 @@ This section explains the list of events of the Colorpicker component which will

## OnTileRender

`OnTileRender` event triggered after the rendering of each color tile in the component is completed.
`OnTileRender` triggers after rendering of each color tile is completed.

```cshtml
@using Syncfusion.Blazor.Inputs
Expand Down
33 changes: 16 additions & 17 deletions blazor/color-picker/getting-started-with-web-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ layout: post
title: Getting Started with Syncfusion Blazor ColorPicker Component in WebApp
description: Checkout and learn about the documentation for getting started with Blazor ColorPicker Component in Blazor Web App.
platform: Blazor
component: ColorPicker
control: Color Picker
documentation: ug
---

# Getting Started with Blazor ColorPicker Component in Web App

This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
This section explains how to include the [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.

{% tabcontents %}

Expand All @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor ColorPicker](https://

## Create a new Blazor Web App in Visual Studio

You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).

You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the Blazor Web App

To add **Blazor ColorPicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
To add the **Blazor ColorPicker** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).

If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.

Alternatively, you can utilize the following package manager command to achieve the same.
Alternatively, run the following Package Manager commands:

{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
Expand All @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.

{% endtabcontent %}

Expand All @@ -54,9 +54,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa

## Create a new Blazor Web App in Visual Studio Code

You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).

You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App.

For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.

Expand All @@ -74,11 +74,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App

If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.

* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
* Ensure you’re in the project root directory where your `.csproj` file is located.
* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
* Ensure the terminal is at the project root directory where the `.csproj` file is located.
* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.

{% tabs %}

Expand All @@ -92,7 +92,7 @@ dotnet restore

{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.

{% endtabcontent %}

Expand All @@ -103,7 +103,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
| Interactive Render Mode | Description |
| -- | -- |
| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.|

Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.

Expand Down Expand Up @@ -231,5 +231,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-

1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)

3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
Loading