starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

HtmlEditor needs aria-labels on the Font, Font size, and Format block buttons for accessibility purposes #1926

New Issue
Closed
opened 2026-01-29 18:15:42 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:15:42 +00:00
Owner
Copy Link

Originally created by @WCWagers on GitHub (Dec 9, 2025).

The Font button renders like this, and the Font size and Format block buttons render similarly:

<div title="Font name" class="rz-html-editor-dropdown" _bl_051e04ce-46b0-49d8-8145-68b174551998=""><div class="rz-html-editor-dropdown-value">Font</div><!--!-->
    <button tabindex="-1" class="rz-html-editor-dropdown-trigger"><!--!--><i class="notranslate rzi"></i></button><!--!-->
    <!--!--><div class="rz-html-editor-dropdown-items" style="width: 200px; max-height: 200px; overflow: auto;" id="Ikwh2Rec40" _bl_678a7fe6-651c-4765-b680-257f72892d59=""><!--!--><!--!--><!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Arial">Arial</div><!--!-->
            <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Georgia">Georgia</div><!--!-->
            <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Helvetica">Helvetica</div><!--!-->
            <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: monospace">Monospace</div><!--!-->
            <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: &quot;Segoe UI&quot;">Segoe UI</div><!--!-->
            <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Tahoma">Tahoma</div><!--!-->
            <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: &quot;Times New Roman&quot;">Times New Roman</div><!--!-->
            <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Verdana">Verdana</div></div></div>

Accessibility Insights for Web returns this error:

Title: WCAG 4.1.2: Ensure buttons have discernible text (.rz-html-editor-dropdown-trigger)
Tags: Accessibility, WCAG 4.1.2, button-name

Issue: Ensure buttons have discernible text (button-name - https://accessibilityinsights.io/info-examples/web/button-name)

Element path: div[title="Font name"] > .rz-html-editor-dropdown-trigger

Snippet:

How to fix:
Fix any of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped)
Element does not have an explicit
Element's default semantics were not overridden with role="none" or role="presentation"

Is there any way to get an updated version where the Font, Font size, and Format block buttons have built-in aria-label values?

Originally created by @WCWagers on GitHub (Dec 9, 2025). The Font button renders like this, and the Font size and Format block buttons render similarly: ``` <div title="Font name" class="rz-html-editor-dropdown" _bl_051e04ce-46b0-49d8-8145-68b174551998=""><div class="rz-html-editor-dropdown-value">Font</div><!--!--> <button tabindex="-1" class="rz-html-editor-dropdown-trigger"><!--!--><i class="notranslate rzi"></i></button><!--!--> <!--!--><div class="rz-html-editor-dropdown-items" style="width: 200px; max-height: 200px; overflow: auto;" id="Ikwh2Rec40" _bl_678a7fe6-651c-4765-b680-257f72892d59=""><!--!--><!--!--><!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Arial">Arial</div><!--!--> <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Georgia">Georgia</div><!--!--> <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Helvetica">Helvetica</div><!--!--> <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: monospace">Monospace</div><!--!--> <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: &quot;Segoe UI&quot;">Segoe UI</div><!--!--> <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Tahoma">Tahoma</div><!--!--> <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: &quot;Times New Roman&quot;">Times New Roman</div><!--!--> <!--!--><!--!--><div class="rz-html-editor-dropdown-item" style="font-family: Verdana">Verdana</div></div></div> ``` Accessibility Insights for Web returns this error: > Title: WCAG 4.1.2: Ensure buttons have discernible text (.rz-html-editor-dropdown-trigger) > Tags: Accessibility, WCAG 4.1.2, button-name > > Issue: Ensure buttons have discernible text (button-name - https://accessibilityinsights.io/info-examples/web/button-name) > > Element path: div[title="Font name"] > .rz-html-editor-dropdown-trigger > > Snippet: <button tabindex="-1" class="rz-html-editor-dropdown-trigger"><!--!--><i class="notranslate rzi"></i></button> > > How to fix: > Fix any of the following: > Element does not have inner text that is visible to screen readers > aria-label attribute does not exist or is empty > aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty > Element has no title attribute > Element does not have an implicit (wrapped) <label> > Element does not have an explicit <label> > Element's default semantics were not overridden with role="none" or role="presentation" > Is there any way to get an updated version where the Font, Font size, and Format block buttons have built-in aria-label values?
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1926
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?