add progress to accent elements list

[dev-nicolaos]

Summary

Adds the HTML <progress> element to the list of elements that may make use of the CSS accent-color property.

Motivation

Inform people who might be learning about accent-color that it can be used for <progress> elements.

Supporting details

https://drafts.csswg.org/css-ui/#propdef-accent-color
https://web.dev/accent-color/#supported-elements

Related issues

None that I could find

Metadata

• Adds a new document
• Rewrites (or significantly expands) a document
• Fixes a typo, bug, or other error

[github-actions]

Preview URLs

• https://pr10646.content.dev.mdn.mozit.cloud/en-US/docs/Glossary/accent

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Glossary/accent
Title: accent
on GitHub

No new external URLs

(this comment was updated 2021-11-22 19:47:43.889862)

[wbamberg]

Thanks for this PR!

You've linked to the spec, but I don't see where in the spec supported elements are listed. Am I missing it here? Or is this just the implementation status of Firefox and Chrome? (not saying this isn't useful information, but it makes a difference to how we might express it)

Also (though I appreciate it wasn't introduced in this PR) I don't think this list of "HTML elements that may have an accent" should be listed in the "accent" glossary page at all. That page should just say:

• what an accent color is
• the fact that it can be set in CSS using accent-color

We should document "the set of HTML elements that can be styled using accent-color" in the page for accent-color: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color. Probably by removing the sentence "An accent appears in elements such as of type="checkbox", or type="radio"." and adding a new bit under the interactive example that lists supported elements.

If this set is not determined by the specification maybe it could say something like "Browsers that support accent-color currently apply it to the following HTML elements:"

[dev-nicolaos]

You've linked to the spec, but I don't see where in the spec supported elements are listed. Am I missing it here? Or is this just the implementation status of Firefox and Chrome? (not saying this isn't useful information, but it makes a difference to how we might express it)

According to the spec, this property can be applied to "all elements", though I think that just means its valid CSS and not necessarily that it will have any effect.

Beyond that the only element mentioned by the spec is radio buttons, and that is just used as an example. The way I read it, the spec doesn't mandate any list elements browsers are required to use accent-color for, rather it outlines how a browser should make use of the property when it does choose to apply it to an element. My guess is this is why the current list has the heading HTML elements that may have an accent, because it is left up to the browser which elements to implement it for.

If this set is not determined by the specification maybe it could say something like "Browsers that support accent-color currently apply it to the following HTML elements:"

Yeah IMO that's a clearer heading.

Also (though I appreciate it wasn't introduced in this PR) I don't think this list of "HTML elements that may have an accent" should be listed in the "accent" glossary page at all. That page should just say:

• what an accent color is
• the fact that it can be set in CSS using accent-color

We should document "the set of HTML elements that can be styled using accent-color" in the page for accent-color: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color. Probably by removing the sentence "An accent appears in elements such as of type="checkbox", or type="radio"." and adding a new bit under the interactive example that lists supported elements.

Makes sense. I'll see if I can get this PR adjusted to meet that outline.

[wbamberg]

I think this is a significant improvement, thank you @dev-nicolaos !