ImageAlternateText property added to various components

radzenhq · Dec 5, 2023 · 9a6fd69 · 9a6fd69
1 parent ffbf4b0
commit 9a6fd69
Show file tree

Hide file tree

Showing 24 changed files with 116 additions and 17 deletions.
diff --git a/Radzen.Blazor/RadzenButton.razor b/Radzen.Blazor/RadzenButton.razor
@@ -29,7 +29,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image))
                     {
-                        <img class="rz-button-icon-left rzi" src="@Image" />
+                        <img class="rz-button-icon-left rzi" src="@Image" alt="@ImageAlternateText" />
                     }
                     @if (!string.IsNullOrEmpty(Text))
                     {

diff --git a/Radzen.Blazor/RadzenButton.razor.cs b/Radzen.Blazor/RadzenButton.razor.cs
@@ -34,6 +34,13 @@ internal string getButtonSize()
         [Parameter]
         public string Text { get; set; } = "";
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "button";
+
         /// <summary>
         /// Gets or sets the icon.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenDatePicker.razor.cs b/Radzen.Blazor/RadzenDatePicker.razor.cs
@@ -846,7 +846,7 @@ private string PopupStyle
                 }
                 else
                 {
-                    return $"width: 320px; {contentStyle}";
+                    return $"width: 320px !important; {contentStyle}";
                 }
             }
         }

diff --git a/Radzen.Blazor/RadzenFileInput.razor b/Radzen.Blazor/RadzenFileInput.razor
@@ -23,7 +23,7 @@
                         <div>
                             @if (IsImage)
                             {
-                                <img style="@ImageStyle" src="@Value" @onclick="@OnImageClick">
+                                <img style="@ImageStyle" src="@Value" @onclick="@OnImageClick" alt="@ImageAlternateText" />
                             }
                         </div>
                         <div>

diff --git a/Radzen.Blazor/RadzenFileInput.razor.cs b/Radzen.Blazor/RadzenFileInput.razor.cs
@@ -33,6 +33,13 @@ public partial class RadzenFileInput<TValue> : FormComponent<TValue>
         [Parameter]
         public string ChooseText { get; set; } = "Choose";
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the title.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenGravatar.razor b/Radzen.Blazor/RadzenGravatar.razor
@@ -1,5 +1,5 @@
 @inherits RadzenComponent
 @if (Visible)
 {
-    <img @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" src="@Url" id="@GetId()" />
+    <img @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" src="@Url" id="@GetId()" alt="@GetAlternateText()" />
 }
diff --git a/Radzen.Blazor/RadzenGravatar.razor.cs b/Radzen.Blazor/RadzenGravatar.razor.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using System;
 using System.Linq;
 
 namespace Radzen.Blazor
@@ -20,6 +21,13 @@ public partial class RadzenGravatar : RadzenComponent
         [Parameter]
         public string Email { get; set; }
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string AlternateText { get; set; } = "gravatar";
+
         /// <summary>
         /// Gets gravatar URL.
         /// </summary>
@@ -36,6 +44,16 @@ protected string Url
             }
         }
 
+        string GetAlternateText()
+        {
+            if (Attributes != null && Attributes.TryGetValue("alt", out var @alt) && !string.IsNullOrEmpty(Convert.ToString(@alt)))
+            {
+                return $"{AlternateText} {@alt}";
+            }
+
+            return AlternateText;
+        }
+
         /// <inheritdoc />
         protected override string GetComponentCssClass()
         {

diff --git a/Radzen.Blazor/RadzenImage.razor b/Radzen.Blazor/RadzenImage.razor
@@ -2,5 +2,5 @@
 
 @if (Visible)
 {
-    <img @ref="@Element" src="@Path" style="@Style" @onclick="@((args) => OnClick(args))" @attributes="Attributes" class="@GetCssClass()" id="@GetId()"/>
+    <img @ref="@Element" src="@Path" style="@Style" @onclick="@((args) => OnClick(args))" @attributes="Attributes" class="@GetCssClass()" id="@GetId()" alt="@GetAlternateText()" />
 }
diff --git a/Radzen.Blazor/RadzenImage.razor.cs b/Radzen.Blazor/RadzenImage.razor.cs
@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using System;
 
 namespace Radzen.Blazor
 {
@@ -20,6 +21,13 @@ public partial class RadzenImage : RadzenComponentWithChildren
         [Parameter]
         public string Path { get; set; }
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string AlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the click callback.
         /// </summary>
@@ -35,5 +43,15 @@ protected async System.Threading.Tasks.Task OnClick(MouseEventArgs args)
         {
             await Click.InvokeAsync(args);
         }
+
+        string GetAlternateText()
+        {
+            if (Attributes != null && Attributes.TryGetValue("alt", out var @alt) && !string.IsNullOrEmpty(Convert.ToString(@alt)))
+            {
+                return $"{AlternateText} {@alt}";
+            }
+
+            return AlternateText;
+        }
     }
 }
diff --git a/Radzen.Blazor/RadzenLink.razor b/Radzen.Blazor/RadzenLink.razor
@@ -9,7 +9,7 @@
         }
         @if (!string.IsNullOrEmpty(Image))
         {
-            <img class="rzi" src="@Image" />
+            <img class="rzi" src="@Image" alt="@ImageAlternateText" />
         }
         <span @ref="@Element" class="rz-link-text">@if (ChildContent != null) {@ChildContent} else {@Text}</span>
     </NavLink>

diff --git a/Radzen.Blazor/RadzenLink.razor.cs b/Radzen.Blazor/RadzenLink.razor.cs
@@ -19,6 +19,13 @@ protected override string GetComponentCssClass()
             return "rz-link";
         }
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the child content.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenMenuItem.razor b/Radzen.Blazor/RadzenMenuItem.razor
@@ -13,7 +13,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image))
                     {
-                        <img class="rz-navigation-item-icon" src="@Image" />
+                        <img class="rz-navigation-item-icon" src="@Image" alt=@ImageAlternateText />
                     }
                     @if (Template != null)
                     {
@@ -38,7 +38,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image))
                     {
-                        <img class="rz-navigation-item-icon" src="@Image" />
+                        <img class="rz-navigation-item-icon" src="@Image" alt=@ImageAlternateText />
                     }
                     @if (Template != null)
                     {

diff --git a/Radzen.Blazor/RadzenMenuItem.razor.cs b/Radzen.Blazor/RadzenMenuItem.razor.cs
@@ -74,6 +74,13 @@ protected override string GetComponentCssClass()
         [Parameter]
         public string Image { get; set; }
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the navigation link match.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenPanelMenuItem.razor b/Radzen.Blazor/RadzenPanelMenuItem.razor
@@ -14,7 +14,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image) && (Parent?.DisplayStyle == MenuItemDisplayStyle.Icon || Parent?.DisplayStyle == MenuItemDisplayStyle.IconAndText))
                     {
-                        <img class="rz-navigation-item-icon" src="@Image" />
+                        <img class="rz-navigation-item-icon" src="@Image" alt=@ImageAlternateText />
                     }
                     @if (Template != null)
                     {
@@ -39,7 +39,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image) && (Parent?.DisplayStyle == MenuItemDisplayStyle.Icon || Parent?.DisplayStyle == MenuItemDisplayStyle.IconAndText))
                     {
-                        <img class="rz-navigation-item-icon" src="@Image" />
+                        <img class="rz-navigation-item-icon" src="@Image" alt=@ImageAlternateText />
                     }
                     @if (Template != null)
                     {

diff --git a/Radzen.Blazor/RadzenPanelMenuItem.razor.cs b/Radzen.Blazor/RadzenPanelMenuItem.razor.cs
@@ -32,6 +32,13 @@ protected override string GetComponentCssClass()
         [Parameter]
         public EventCallback<bool> ExpandedChanged { get; set; }
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the text.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenProfileMenuItem.razor b/Radzen.Blazor/RadzenProfileMenuItem.razor
@@ -13,7 +13,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image))
                     {
-                        <img class="rzi rz-navigation-item-icon" src="@Image" />
+                        <img class="rzi rz-navigation-item-icon" src="@Image" alt=@ImageAlternateText />
                     }
                     <span class="rz-navigation-item-text">@Text</span>
                 </NavLink>
@@ -27,7 +27,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image))
                     {
-                        <img class="rzi rz-navigation-item-icon" src="@Image" />
+                        <img class="rzi rz-navigation-item-icon" src="@Image" alt=@ImageAlternateText />
                     }
                     <span class="rz-navigation-item-text">@Text</span>
                 </div>

diff --git a/Radzen.Blazor/RadzenProfileMenuItem.razor.cs b/Radzen.Blazor/RadzenProfileMenuItem.razor.cs
@@ -15,6 +15,13 @@ protected override string GetComponentCssClass()
             return "rz-navigation-item";
         }
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the target.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenSelectBar.razor b/Radzen.Blazor/RadzenSelectBar.razor
@@ -17,6 +17,6 @@
     <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
         @foreach (var item in allItems.Where(i => i.Visible))
         {<div @ref="@item.Element" id="@item.GetItemId()" @onclick="@(args => SelectItem(item))" @onkeypress="@(async args => { if (args.Code == "Space") { await SelectItem(item); } })" @attributes="item.Attributes" style="@item.Style"
-              class=@ButtonClassList(item) aria-label="@item.Text" tabindex="@(Disabled || item.Disabled ? "-1" : $"{TabIndex}")">@if(item.Template != null){ @item.Template(item)}else{@if (!string.IsNullOrEmpty(item.Icon)){<i class="rzi rz-navigation-item-icon" style="margin-right:2px;@(!string.IsNullOrEmpty(item.IconColor) ? $"color:{item.IconColor}" : "")">@((MarkupString)item.Icon)</i>}@if (!string.IsNullOrEmpty(item.Image)){<img class="rz-navigation-item-icon" src="@item.Image" style="@item.ImageStyle"/>}<span class="rz-button-text">@item.Text</span>}</div>}
+              class=@ButtonClassList(item) aria-label="@item.Text" tabindex="@(Disabled || item.Disabled ? "-1" : $"{TabIndex}")">@if(item.Template != null){ @item.Template(item)}else{@if (!string.IsNullOrEmpty(item.Icon)){<i class="rzi rz-navigation-item-icon" style="margin-right:2px;@(!string.IsNullOrEmpty(item.IconColor) ? $"color:{item.IconColor}" : "")">@((MarkupString)item.Icon)</i>}@if (!string.IsNullOrEmpty(item.Image)){<img class="rz-navigation-item-icon" src="@item.Image" style="@item.ImageStyle" alt=@item.ImageAlternateText/>}<span class="rz-button-text">@item.Text</span>}</div>}
     </div>
 }
diff --git a/Radzen.Blazor/RadzenSelectBarItem.cs b/Radzen.Blazor/RadzenSelectBarItem.cs
@@ -36,6 +36,13 @@ public class RadzenSelectBarItem : RadzenComponent
         [Parameter]
         public string Image { get; set; }
 
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the image style.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenSplitButton.razor b/Radzen.Blazor/RadzenSplitButton.razor
@@ -21,7 +21,7 @@
                 }
                 @if (!string.IsNullOrEmpty(Image))
                 {
-                    <img class="rz-button-icon-left rzi" src="@Image" />
+                    <img class="rz-button-icon-left rzi" src="@Image" alt=@ImageAlternateText />
                 }
                 @if (!string.IsNullOrEmpty(Text))
                 {

diff --git a/Radzen.Blazor/RadzenSplitButton.razor.cs b/Radzen.Blazor/RadzenSplitButton.razor.cs
@@ -25,7 +25,14 @@ private string getButtonSize()
         {
             return Size == ButtonSize.Medium ? "md" : Size == ButtonSize.Large ? "lg" : Size == ButtonSize.Small ? "sm" : "xs";
         }
-
+
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Gets or sets the text.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenToggleButton.razor b/Radzen.Blazor/RadzenToggleButton.razor
@@ -32,7 +32,7 @@
                     }
                     @if (!string.IsNullOrEmpty(Image))
                     {
-                        <img class="rz-button-icon-left rzi" src="@Image" />
+                        <img class="rz-button-icon-left rzi" src="@Image" alt="@ImageAlternateText" />
                     }
                     @if (!string.IsNullOrEmpty(Text))
                     {

diff --git a/Radzen.Blazor/RadzenUpload.razor b/Radzen.Blazor/RadzenUpload.razor
@@ -26,7 +26,7 @@
                 @foreach (var file in files)
                 {
                 <div class="rz-fileupload-row" style="margin-bottom: 10px">
-                    <div><img src="@file.Url" width="50px" onerror="this.style.display='none';"></div>
+                    <div><img src="@file.Url" width="50px" onerror="this.style.display='none';" alt="@ImageAlternateText"></div>
                     <div>@file.Name</div>
                     <div>@(file.Size / 1024) KB</div>
                     <div>

diff --git a/Radzen.Blazor/RadzenUpload.razor.cs b/Radzen.Blazor/RadzenUpload.razor.cs
@@ -34,6 +34,13 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenUpload : RadzenComponent
     {
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string ImageAlternateText { get; set; } = "image";
+
         /// <summary>
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
-Original file line number
+Diff line change
@@ Expand Up / @@ -846,7 +846,7 @@ private string PopupStyle @@
                     }
                     else
                     {
-                        return $"width: 320px; {contentStyle}";
+                        return $"width: 320px !important; {contentStyle}";
                     }
                 }
             }
@@ Expand Down @@