fix: use semantic elements

[mfranzke]

especially for accessibility reasons; to e.g. have those announced correctly by screenreaders and even also make them reachable on keyboard usage.

Resolves #335

Version

Published prerelease version: v0.8.2-next.0

Changelog

🐛 Bug Fix

• @code-hike/mdx
  • fix: use semantic elements #341 (@mfranzke @pomber)

Authors: 3

• Maximilian Franzke (@mfranzke)
• Rodrigo Pombo (@pomber)
• Yangshun Tay (@yangshun)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
chtest	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 5, 2023 11:37am
playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 5, 2023 11:37am

[pomber]

thanks, I'll take a look later.
(maybe you can search for examples of others resetting the button's browser default styles to see if anything is missing)

[Mantish]

Awesome, this is exactly what we need to fix #335

[pomber]

Sorry for the delay. I'll try to merge it this week.

[Mantish]

I can see that the copy button is also used with other classes like .ch-code-button.
While you can copy these reset styles into the appropriate scss file, another option would be to add the styles directly yo the button on the copy-buton.tsx file. Something like this:

<button
  style={{
    background: "none",
    border: 0,
    color: "inherit",
    fontSize: "inherit",
    padding: 0,
    ...style,
  }}
  ...

[pomber]

I added the button element to a few more buttons and created a reset-button mixin.
Also rolled back the changes to tabs, that's harder and we have another issue for that.

Thank you all.

[github-actions]

🚀 PR was released in v0.8.2 🚀