From 37f5760df2203592eaa994281b8fc03e367e3ec2 Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:26:19 +0300 Subject: [PATCH 1/2] SEO-187125 Image Alt Blazor --- blazor/appbar/design.md | 12 ++++++------ ...debar.png => blazor-appbar-designed-sidebar.png} | Bin blazor/button/how-to/customize-button-appearance.md | 2 +- blazor/button/how-to/set-the-disabled-state.md | 2 +- blazor/button/style-and-appearance.md | 2 +- blazor/button/types-and-styles.md | 12 ++++++------ 6 files changed, 15 insertions(+), 15 deletions(-) rename blazor/appbar/images/{blazor-appbar-sidebar.png => blazor-appbar-designed-sidebar.png} (100%) diff --git a/blazor/appbar/design.md b/blazor/appbar/design.md index 46d25f9b5b..d91db44b9b 100644 --- a/blazor/appbar/design.md +++ b/blazor/appbar/design.md @@ -30,7 +30,7 @@ The following example depicts the code to provide spacing between the home and p ``` -![Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png) +![Blazor AppBar with spacer.](./images/blazor-appbar-spacer.png) {% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Separator @@ -68,7 +68,7 @@ The following example depicts the code to provide a vertical line between a grou ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor AppBar with Separator.](./images/blazor-appbar-separator.png) +![Blazor AppBar with separator.](./images/blazor-appbar-separator.png) ## Media Query @@ -114,7 +114,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t ``` -![Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png) +![Blazor AppBar with media query.](./images/blazor-appbar-media-quary.png) {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Designing AppBar with Menu @@ -173,7 +173,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t ``` -![Blazor AppBar with Menu.](./images/blazor-appbar-menu.png) +![Blazor AppBar with menu.](./images/blazor-appbar-menu.png) {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Designing AppBar with Buttons @@ -209,7 +209,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t ``` -![Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png) +![Blazor AppBar with buttons.](./images/blazor-appbar-buttons.png) {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Designing AppBar with SideBar @@ -370,6 +370,6 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba } ``` -![Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png) +![Designed AppBar with sidebar in Blazor.](./images/blazor-appbar-designed-sidebar.png) {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/appbar/images/blazor-appbar-sidebar.png b/blazor/appbar/images/blazor-appbar-designed-sidebar.png similarity index 100% rename from blazor/appbar/images/blazor-appbar-sidebar.png rename to blazor/appbar/images/blazor-appbar-designed-sidebar.png diff --git a/blazor/button/how-to/customize-button-appearance.md b/blazor/button/how-to/customize-button-appearance.md index 5ea9aacd07..1444f0bb70 100644 --- a/blazor/button/how-to/customize-button-appearance.md +++ b/blazor/button/how-to/customize-button-appearance.md @@ -34,4 +34,4 @@ You can customize the appearance of the Button by using the Cascading Style Shee {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLKMBBBsmGcZMPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Customizing Blazor Button Appearance](./../images/blazor-button-customization.png) \ No newline at end of file +![Customizing Blazor Button appearance.](./../images/blazor-button-customization.png) \ No newline at end of file diff --git a/blazor/button/how-to/set-the-disabled-state.md b/blazor/button/how-to/set-the-disabled-state.md index 21b7a8a507..e801334bd7 100644 --- a/blazor/button/how-to/set-the-disabled-state.md +++ b/blazor/button/how-to/set-the-disabled-state.md @@ -32,4 +32,4 @@ The following example demonstrates Button in `Disabled` state. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBqiBVhMGkwXmsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Disable State in Blazor Button](./../images/blazor-button-disable-state.png) \ No newline at end of file +![Disable state in Blazor Button.](./../images/blazor-button-disable-state.png) \ No newline at end of file diff --git a/blazor/button/style-and-appearance.md b/blazor/button/style-and-appearance.md index 81911f31b3..6e03fc8083 100644 --- a/blazor/button/style-and-appearance.md +++ b/blazor/button/style-and-appearance.md @@ -46,4 +46,4 @@ Use the following CSS to customize the background color of button while clicking {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLKMVhVimxEUqsl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Button with Style and Appearance](./images/blazor-button-style-and-appearance.gif) \ No newline at end of file +![Blazor Button with style and appearance.](./images/blazor-button-style-and-appearance.gif) \ No newline at end of file diff --git a/blazor/button/types-and-styles.md b/blazor/button/types-and-styles.md index 2742bd71db..07f5701e45 100644 --- a/blazor/button/types-and-styles.md +++ b/blazor/button/types-and-styles.md @@ -39,7 +39,7 @@ The Blazor Button has the following predefined styles that can be defined using {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVgChrhiGfocEOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Button Component with different Styles](./images/blazor-button-with-different-style.png) +![Blazor Button Component with different styles.](./images/blazor-button-with-different-style.png) N> Predefined Button styles provide only the visual indication. So, Button content should define the Button style for the users of assistive technologies such as screen readers. @@ -81,7 +81,7 @@ A Round Button is circular in shape. Usually, it contains an icon representing i {% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsBLBsQJYnPIv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Button with different Types](./images/blazor-button-types.png) +![Blazor Button with different types.](./images/blazor-button-types.png) ### Primary Button @@ -95,7 +95,7 @@ The primary button is styled with background color and it is used to represent a {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgCVrLWmyJUodV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Primary Button](./images/blazor-primary-button.png) +![Blazor Primary Button.](./images/blazor-primary-button.png) ### Toggle Button @@ -142,7 +142,7 @@ A toggle Button allows you to change between the two states. The Button is activ {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAiVVrMGexGnCy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Toggle Button](./images/blazor-toggle-button.png) +![Blazor Toggle Button.](./images/blazor-toggle-button.png) ## Icons @@ -170,7 +170,7 @@ The Button can have an icon to provide the visual representation of the action. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUCVrVscdsTwUD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Button with Icon](./images/blazor-button-icon.png) +![Blazor Button with icon.](./images/blazor-button-icon.png) ## Button size @@ -187,4 +187,4 @@ The two types of Button sizes are default and small. To change the size of the d {% previewsample "https://blazorplayground.syncfusion.com/embed/rXLAWLVrWcxyVIJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Button with different Size](./images/blazor-button-with-different-size.png) \ No newline at end of file +![Blazor Button with different size.](./images/blazor-button-with-different-size.png) \ No newline at end of file From 2e8afdc9eabc269c1875cb150e98bb2cafef7aec Mon Sep 17 00:00:00 2001 From: Yvone-Atieno <95272306+Yvone-Atieno@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:29:15 +0300 Subject: [PATCH 2/2] made changes --- blazor/chart/chart-types/line.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/chart/chart-types/line.md b/blazor/chart/chart-types/line.md index f2cd4ae268..03e96e79b5 100644 --- a/blazor/chart/chart-types/line.md +++ b/blazor/chart/chart-types/line.md @@ -53,7 +53,7 @@ documentation: ug ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrKiVhdhoVJjpOZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Line Chart](../images/chart-types-images/blazor-line-chart.png) +![Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.png) N> Refer to our [Blazor Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) to know how to represent time-dependent data, showing trends at equal intervals. @@ -96,7 +96,7 @@ To render a multicolored line series, specify the [Type](https://help.syncfusion ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rZhqiBrHryhdGmHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Multicolored Line Chart](../images/chart-types-images/blazor-multicolor-line-chart.png) +![Blazor Multicolored Line Chart.](../images/chart-types-images/blazor-multicolor-line-chart.png) ## Series customization @@ -148,7 +148,7 @@ The following properties can be used to customize the [Line](https://help.syncfu ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgsBVRheBaFjKV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Line Chart with Custom Series](../images/chart-types-images/blazor-line-chart-custom-series.png) +![Blazor Line Chart with custom series.](../images/chart-types-images/blazor-line-chart-custom-series.png) N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.