RESULTS SUMMARY COMPONENT 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]

Hi @0xAbdulKhalid, congrats on your solution; here are some comments that might help you to improve it:

• You defined a really nice semantic component, I like it.
• As a suggestion for your next solutions, push not only your minified files, so people can give you feedback on some other practices or process you're using, like your commitizen config, even the prettier or linters setup you may be using.
• Around BEM, sr-only might have a better scope if treated as a modifier, instead of a block, like main--sr-only, which is totally valid, or even as an independent or utility class: sr-only.
• You can create more granulated components, not only main, so you may avoid complex names like main__summary-xxx, and instead, have summary__xxx.
• Meta keywords are no longer important from the SEO standpoint; they had been abused so much that they are irrelevant from many years ago. You can read more about it in this blog post or in this one.
• Using colour variables linked to colour names, like red or yellow may take you to unnecessary refactors if the colour changes; instead, try to use variables scoped to features or categories using tokens.
• There are 9 serious accessibility issues, all regarding colour contrast, here is one of them:

Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
To solve this problem, you need to fix the following:
Element has insufficient color contrast of 2.9 (foreground color: #ff5757, background color: #fff5f5, font size: 13.2pt (17.6px), font weight: bold). Expected contrast ratio of 4.5:1

Related Nodes
<li class="main__summary-topic" style="background-color: hsla(0, 100%, 67.1%, 0.06)">

I hope you find it useful. I'm happy to take another look at your solution if you make some other changes.