Come up with a pleasing way to show sequences of UI menu item selections

[ptgott]

In our docs, we often need to guide a reader through a sequence of UI menu selections in a third-party product. We don't have a standard way to do this, and all available methods end up looking somewhat clunky.

Examples:

In the Desktop Access getting started guide, we use code style:

1. Open the program named `Group Policy Management` and find the GPO you just
   created
   (`$FOREST > Domains > $DOMAIN > Group Policy Objects > Block teleport-svc Interactive Login`),
   right-click on it and select `Edit...` from the context menu.

2. Select:

```text
Computer Configuration > Policies > Windows Settings > Security Settings > Local Policies > User Rights Assignment

In our [AzureAD guide](https://github.com/gravitational/teleport/blame/4baf68a4f10a11c3ca16dc1571530d3ea0851660/docs/pages/enterprise/sso/azuread.mdx), we use bolded arrows:

```markdown
1. Select **Azure AD -> Enterprise Applications**

In our ADFS SSO guide, we use italicized arrows:

Lastly, ensure the user you create in Active Directory has an email address
associated with it. To check this open Server Manager then
*"Tools -> Active Directory Users and Computers"* and select the user and right

Are there any more elegant ways to achieve this? I think we could either:

• come up with a standard recommendation for using Markdown for this in our style guide
• come up with a custom inline component for showing sequences of menu options

[ptgott]

I like the way PagerDuty's docs do this (https://support.pagerduty.com/docs/services-and-integrations):

The HTML/CSS are interesting:

<ol>
<li>Navigate to <strong>Services</strong> <i class="fa fa-arrow-right"></i> <strong>Service Directory</strong> <i class="fa fa-arrow-right"></i> select or search for your desired <strong>service</strong>.</li>
<li>Select the <strong>Settings</strong> tab and click <strong>Edit</strong> to the right of <strong>Assign and Notify</strong>.</li>
<li>Under <strong>Assign to escalation policy</strong>, search and select an <strong>escalation policy</strong>.</li>
<li>Click <strong>Save changes</strong>.</li>
</ol>

The fa-arrow-right CSS rule looks like this:

.fa-arrow-right:before {
    content: "\f061";
}