ImageAlternateText property added to various components

This commit is contained in:
Vladimir Enchev
2023-12-05 09:13:27 +02:00
parent ffbf4b07f1
commit 9a6fd69885
24 changed files with 116 additions and 17 deletions

View File

@@ -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))
{

View File

@@ -34,6 +34,13 @@ namespace Radzen.Blazor
[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>

View File

@@ -846,7 +846,7 @@ namespace Radzen.Blazor
}
else
{
return $"width: 320px; {contentStyle}";
return $"width: 320px !important; {contentStyle}";
}
}
}

View File

@@ -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>

View File

@@ -33,6 +33,13 @@ namespace Radzen.Blazor
[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>

View File

@@ -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()" />
}

View File

@@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
using System;
using System.Linq;
namespace Radzen.Blazor
@@ -20,6 +21,13 @@ namespace Radzen.Blazor
[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 @@ namespace Radzen.Blazor
}
}
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()
{

View File

@@ -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()" />
}

View File

@@ -1,5 +1,6 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System;
namespace Radzen.Blazor
{
@@ -20,6 +21,13 @@ namespace Radzen.Blazor
[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 @@ namespace Radzen.Blazor
{
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;
}
}
}

View File

@@ -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>

View File

@@ -19,6 +19,13 @@ namespace Radzen.Blazor
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>

View File

@@ -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)
{

View File

@@ -74,6 +74,13 @@ namespace Radzen.Blazor
[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>

View File

@@ -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)
{

View File

@@ -32,6 +32,13 @@ namespace Radzen.Blazor
[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>

View File

@@ -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>

View File

@@ -15,6 +15,13 @@ namespace Radzen.Blazor
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>

View File

@@ -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>
}

View File

@@ -36,6 +36,13 @@ namespace Radzen.Blazor
[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>

View File

@@ -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))
{

View File

@@ -25,7 +25,14 @@ namespace Radzen.Blazor
{
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>

View File

@@ -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))
{

View File

@@ -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>

View File

@@ -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>