Emojis not rendering in .mdx or .md files

[st3phhays]

What You Are Seeing?

In .mdx or .md files, emojis are not rendering when using the shorthand syntax, like :floppy_disk:.

What is Expected?

These emojis should be rendered to the emoji and not plain text.

How Did You Get This To Happen? (Steps to Reproduce)

1. Go to https://docs.chocolatey.org/en-us/central-management/usage/website/groups/
2. Search for :floppy_disk: on the page. This should be an emoji, not text.

[st3phhays]

After some discussion, it has been decided that instead of fixing the issue above, we will either:

1. Remove the emoji entirely or
2. Replace the emoji with an accessible form of a Font Awesome icon.
3. Update the README or design system stating the we will not be using emojis going forward.

A lot of times, emojis are not even needed, and they can become inaccessible to screen readers or interpreted differently to different users.

Some reading about emojis and accessibility:

• https://uxcontent.com/accessible-content-design-for-emojis/
• https://www.tiny.cloud/blog/emojis-and-accessibility/

[LeaDevelop]

You could use unicode emojis as well 💾. I volunteer to take care of this issue in case you don't have one yet :)

[LeaDevelop]

I'm on it, feel free to assign issue to me.
Went with unicode emojis, but can replace it with font awesome as well, just send me expected design for :gear:, :floppy_disk:, :mag:, :heavy_plus_sign:, :calendar, :wastebasket:

[LeaDevelop]

Submit of PR is WIP, will test changes over the weekend & double check if I missed anything.

[st3phhays]

See comment #1072 (review)

[LeaDevelop]

Do you have specific font awesome design in mind already that should be taken from free or pro license?
I can prepare a draft upon which you can then build further if that's to your liking.

[LeaDevelop]

Had a further look, font awesome is already present in the yarn.lock so we can go forth and simply insert icons into pages. I got that in progress currently, will finish it up in coming days.

Notes for future documentation writing, I simply followed official font awesome documentation it has it all nicely explained - https://docs.fontawesome.com/web/dig-deeper/accessibility. When writing documentation one simply needs to know if the icon has decorative meaning or semantic. In cases of decorative we set aria-hidden flag to true aria-hidden="true" and the screen reader will not read the icon for example, <i class="fa-regular fa-floppy-disk" aria-hidden="true"></i>

[LeaDevelop]

@st3phhays ready for review, we can build further but the base has now been replaced with font awesome and considering screen readers #1076 so if there is icon and the description of it, it won't duplicate it but it'll only read text and skip icon.