MudText: `Typo.subtitle1` and `Typo.subtitle2` can no longer be centered using `Align.Center` about mudblazor HOT 8 OPEN

I'm not sure why I was tagged. As I said on #6061, it's critical that MudBlazor doesn't use semantic elements incorrectly. As a component library, developers are counting on it to build their apps quickly without introducing accessibility issues. Accessibility issues create legal liability, styling doesn't.

MudBlazor should not go back to using h6 just to make centering work again. That would cause an accessibility issue for the sake of styling. If it needs to be a block element, then the span should have display: block on it. Better yet, MudBlazor should allow developers to easily style it however they need.

from mudblazor.

The linked commit doesn't change body1 & body2 but instead updates subtitle1 & subtitle2

from mudblazor.

Good catch, I somehow got confused and actually meant to say subtitle1

from mudblazor.

The landing page uses subtitle1 heavily.

This makes me think most people use it just to have smaller text so it should be <p>. Not that they should necessarily be using it that way but it's the reality of it. Of course an option to decide this (span vs p etc) within MudText is still possible.

We could repurpose the Inline property (or add a new one) to let the user choose themselves what type of element it should be and take care of #5535 at the same time. It should be p by default for backwards compatibility. We also need to think about how the Align property will work with this because it is mutually exclusive with Inline.

MudText.razor.cs

-/// <summary>
-/// If true, Sets display inline
-/// </summary>
-[Parameter]
-[Category(CategoryTypes.Text.Appearance)]
-public bool Inline { get; set; }

+/// <summary>
+/// The HTML element that will be rendered (<c>span</c>, <c>p</c>, <c>h1</c>).
+/// <br/>
+/// If <c>null</c> it is automatically decided based on <see cref="Typo"/>.
+/// </summary>
+/// <remarks>
+/// This can be used to specify the type of content for accessibility and SEO more accurately.
+/// <br/>
+/// https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content
+/// </remarks>
+[Parameter]
+[Category(CategoryTypes.Text.Behavior)]
+public string? HtmlTag { get; set; }

from mudblazor.

@henon @danielchalmers @tpmccrary @lortimer

from mudblazor.

The problem is that, as a <span>, it no longer takes up a line so it can't text-align itself. display: block could work.
Or make it a <p>, though it would get picked up as paragraph by screen readers.

Could get creative and add a <MudSpan> as a building block

from mudblazor.

the span should have display: block on it

Sounds like an easy fix

from mudblazor.