Accessibility in components

New features and components should follow the following accessibility implementation guidelines:

(for ease of use)

1. Visit the following location: https://accessibilityinsights.io/en/
2. Install the extension, and test

required:

• aria-label | string: "Login Button", "Megan Bowen" | - meaningful text should have identifiable labels for screen readers

example (mgt-login):

    <button 
        class="popup-command"
        @click=${this.logout} 
        aria-label="Sign Out">       
        Sign Out
    </button>

• tab-index/focus | string: "0", "-1" | - components that are interactive or display information should be visibilly navigatable by tab key control. Additional information in the aria label should be displayed when this feature is used.

example (mgt-people):

<mgt-person tabindex="0" ></mgt-person>

mgt-person:focus{
    border-color: blue;
}

• alt | string: "person icon" | - any <img> tag should contain alt text as well

example (mgt-person):

    <img
        title=${this.personDetails.displayName}
        aria-label=${this.personDetails.displayName}
        alt=${this.personDetails.displayName}
        src=${this.personDetails.image as string}
    />