Improve milestone title

[Gusted]

• Don't use h2 for the title, instead use font-size and font-weight to make the title look better.
• Forgejo issue: https://codeberg.org/forgejo/forgejo/issues/348

Pulled from:

gitea/web_src/less/shared/issuelist.less

Lines 30 to 32 in affdd40

	font-size: 16px;
	min-width: 0;
	font-weight: 600;

Before:

After:

[fsologureng]

Removing item headings prevents screen readers from navigating easily. Improving size should not go against semantics. DIV is one of the least meaningful elements in an HTML structure.

The H1 should wrap the Labels|Milestones button, as in Releases (which should have an H1 and not an H2).

[fsologureng]

If you still want to change to div, could add role="heading" aria-level="2" to preserve aria behavior.

[lafriks]

I don't think they can really be defined as headers. Probably role listitem would be more appropriate

[fsologureng]

I don't think they can really be defined as headers. Probably role listitem would be more appropriate

That's for the <li> which has the listitem role by default. I mean the content inside each list item, which have a title and a content. It's not very well structured but it's a unit. For that kind of content, a screen reader sequentially goes through the list reading headings until the user hears which one he wants to select to inspect its full content.
Navigation is through landmarks and by levels, and the headings serve as elements of an index.

[Gusted]

This is no different than the issue list. If there's a good a11y solution, it also should be applied to the lists (in another PR). The milestone one is currently standing out at the moment with its <h2> (for no good documented reason).

[wxiaoguang]

You can just use a h3 tag (or even h4), then no need to add more CSS styles.

The pre-defined styles are good enough and more general.

Screenshot: the first one is h3, the second one is h2

[Gusted]

You can just use a h3 tag (or even h4), then no need to add more CSS styles.

That's misusing the heading elements(which currently is already happening), they should follow in logical order. MDN confirms this. Best solution is to figure out which aria attributes must be set and also apply them to the issue/pull list.

[fsologureng]

You can just use a h3 tag (or even h4), then no need to add more CSS styles.

That's misusing the heading elements(which currently is already happening), they should follow in logical order. MDN confirms this. Best solution is to figure out which aria attributes must be set and also apply them to the issue/pull list.

Misused or not, they are useful right now and they are going to be removed. That's a degradation of the poor accessibility of this page, and for a solution that only improves the appearance.

If there is another lack of a11y (with a fix in progress) it doesn't mean that the criteria should bring everything towards that state, that would be levelling down.

Fixing the bad HTML structure with aria markup is the last solution to apply for accessibility, the first one (literaly) is to use the HTML elements made for it.

[wxiaoguang]

I also agree that it's not worth to follow the standard concerns (MDN heading order, well, not the standard) too strictly. I care more about making the code clearer and easier to be maintained, and be functional enough for various situations, like a11y.

[Gusted]

Closing.

[wxiaoguang]

Thank you Gusted. Since this PR is closed, there is a new one #22863 , and the new one fixes one more milestone <h2> problem (on the user dashboard, the same problem)

According to the previous comments (#22853 (comment) , #22853 (comment) ), and confirmed with fsologureng , nothing is changed, so the new PR still uses the <h?> tag to keep the current a11y behavior, to prevent from uncertain changes. The a11y related problems could be fixed together in the future by new PRs.

[Gusted]

Fine with me, issue is fixed. I don't follow what to know what to follow.