Add localizable screen reader text to anchor links in RadzenText via AnchorAriaLabel

Radzen.Blazor.Tests/TextTests.cs

@@ -312,5 +312,38 @@ namespace Radzen.Blazor.Tests
             Assert.Contains("section-title", component.Markup);
             Assert.Contains("rz-link", component.Markup);
         }
+
+        [Fact]
+        public void Text_Anchor_Renders_DefaultScreenReaderText()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenText>(parameters =>
+            {
+                parameters.Add(p => p.TextStyle, TextStyle.H2);
+                parameters.Add(p => p.Text, "Section Title");
+                parameters.Add(p => p.Anchor, "section-title");
+            });
+
+            Assert.Contains(@"<span class=""rz-sr-only"">Link to this section</span>", component.Markup);
+        }
+
+        [Fact]
+        public void Text_Anchor_Renders_CustomScreenReaderText()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenText>(parameters =>
+            {
+                parameters.Add(p => p.TextStyle, TextStyle.H2);
+                parameters.Add(p => p.Text, "Section Title");
+                parameters.Add(p => p.Anchor, "section-title");
+                parameters.Add(p => p.AnchorAriaLabel, "Link to Section Title");
+            });
+
+            Assert.Contains(@"<span class=""rz-sr-only"">Link to Section Title</span>", component.Markup);
+        }
     }
 }

Radzen.Blazor/RadzenStrings.Designer.cs

@@ -603,6 +603,7 @@ namespace Radzen.Blazor {
         public static string TimeSpanPicker_SecondsUnitText { get { return ResourceManager.GetString("TimeSpanPicker_SecondsUnitText", resourceCulture); } }
         public static string TimeSpanPicker_MillisecondsUnitText { get { return ResourceManager.GetString("TimeSpanPicker_MillisecondsUnitText", resourceCulture); } }
         public static string TimeSpanPicker_MicrosecondsUnitText { get { return ResourceManager.GetString("TimeSpanPicker_MicrosecondsUnitText", resourceCulture); } }
+        public static string Text_AnchorAriaLabel { get { return ResourceManager.GetString("Text_AnchorAriaLabel", resourceCulture); } }
         public static string Upload_ImageAlternateText { get { return ResourceManager.GetString("Upload_ImageAlternateText", resourceCulture); } }
         public static string Upload_ChooseText { get { return ResourceManager.GetString("Upload_ChooseText", resourceCulture); } }
         public static string Upload_DeleteText { get { return ResourceManager.GetString("Upload_DeleteText", resourceCulture); } }

Radzen.Blazor/RadzenStrings.de.resx

@@ -2233,5 +2233,7 @@
   </data>
   <data name="HtmlEditorTable_MergeInvalidSelection" xml:space="preserve">
     <value>Die ausgewählten Zellen müssen einen gültigen rechteckigen Bereich bilden, bevor sie verbunden werden können.</value>
+  <data name="Text_AnchorAriaLabel" xml:space="preserve">
+    <value>Link zu diesem Abschnitt</value>
   </data>
 </root>

Radzen.Blazor/RadzenStrings.es.resx

@@ -2233,5 +2233,7 @@
   </data>
   <data name="HtmlEditorTable_MergeInvalidSelection" xml:space="preserve">
     <value>Las celdas seleccionadas deben formar un rango rectangular válido antes de poder combinarse.</value>
+  <data name="Text_AnchorAriaLabel" xml:space="preserve">
+    <value>Enlace a esta sección</value>
   </data>
 </root>

Radzen.Blazor/RadzenStrings.fr.resx

@@ -2233,5 +2233,7 @@
   </data>
   <data name="HtmlEditorTable_MergeInvalidSelection" xml:space="preserve">
     <value>Les cellules sélectionnées doivent former une plage rectangulaire valide avant de pouvoir être fusionnées.</value>
+  <data name="Text_AnchorAriaLabel" xml:space="preserve">
+    <value>Lien vers cette section</value>
   </data>
 </root>

Radzen.Blazor/RadzenStrings.it.resx

@@ -2233,5 +2233,7 @@
   </data>
   <data name="HtmlEditorTable_MergeInvalidSelection" xml:space="preserve">
     <value>Le celle selezionate devono formare un intervallo rettangolare valido prima di poter essere unite.</value>
+  <data name="Text_AnchorAriaLabel" xml:space="preserve">
+    <value>Collegamento a questa sezione</value>
   </data>
 </root>

Radzen.Blazor/RadzenStrings.ja.resx

@@ -2233,5 +2233,7 @@
   </data>
   <data name="HtmlEditorTable_MergeInvalidSelection" xml:space="preserve">
     <value>選択したセルを結合するには、有効な長方形の範囲になっている必要があります。</value>
+  <data name="Text_AnchorAriaLabel" xml:space="preserve">
+    <value>このセクションへのリンク</value>
   </data>
 </root>

Radzen.Blazor/RadzenStrings.resx

@@ -2243,5 +2243,7 @@
   </data>
   <data name="HtmlEditorTable_MergeInvalidSelection" xml:space="preserve">
     <value>The selected cells must form a valid rectangular range before they can be merged.</value>
+  <data name="Text_AnchorAriaLabel" xml:space="preserve">
+    <value>Link to this section</value>
   </data>
 </root>

Radzen.Blazor/RadzenText.cs

@@ -124,6 +124,9 @@ namespace Radzen.Blazor
             [Parameter]
             public string? Path { get; set; }
 
+            [Parameter]
+            public string? AriaLabel { get; set; }
+
             private string GetAnchor()
             {
                 if (string.IsNullOrEmpty(Path))
@@ -179,6 +182,10 @@ namespace Radzen.Blazor
                 builder.OpenComponent<RadzenIcon>(7);
                 builder.AddAttribute(8, "Icon", "link");
                 builder.CloseComponent();
+                builder.OpenElement(9, "span");
+                builder.AddAttribute(10, "class", "rz-sr-only");
+                builder.AddContent(11, AriaLabel);
+                builder.CloseElement();
 
                 builder.CloseElement();
             }
@@ -244,6 +251,20 @@ namespace Radzen.Blazor
         [Parameter]
         public string? Anchor { get; set; }
 
+        string? anchorAriaLabel;
+
+        /// <summary>
+        /// Gets or sets the visually hidden text of the anchor link rendered when <see cref="Anchor"/> is set.
+        /// Provides an accessible name for the anchor link. Localizable via the <c>Text_AnchorAriaLabel</c> resource key.
+        /// </summary>
+        /// <value>The anchor link label. Default is <c>"Link to this section"</c>.</value>
+        [Parameter]
+        public string AnchorAriaLabel
+        {
+            get => anchorAriaLabel ?? Localize(nameof(RadzenStrings.Text_AnchorAriaLabel));
+            set => anchorAriaLabel = value;
+        }
+
         /// <inheritdoc />
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
@@ -423,9 +444,10 @@ namespace Radzen.Blazor
                 {
                     builder.OpenComponent<RadzenTextAnchor>(6);
                     builder.AddAttribute(7, nameof(RadzenTextAnchor.Path), Anchor);
+                    builder.AddAttribute(8, nameof(RadzenTextAnchor.AriaLabel), AnchorAriaLabel);
                     builder.CloseComponent();
                 }
-                builder.AddElementReferenceCapture(8, capture => Element = capture);
+                builder.AddElementReferenceCapture(9, capture => Element = capture);
                 builder.CloseElement();
             }
         }