Components

Components

Accessibility Guidelines

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}
    />

Creating a new component (quick start)

The best way to get started with a new component is to use our snippets for scaffolding:

Note: The steps below assume you are using Visual Studio Code and you've installed all the recommended extensions.

1. Chose a name for your component. The component must be prefixed with mgt. For example mgt-component

2. Create a new folder for your new component under src \ components and name it with the name of your component.

3. Create a new typescript file in your new folder with the same name. Ex: mgt-component.ts

4. Open the file and use the mgtnew snippet to scaffold the new component.

   To use a snippet, start typing the name of the snippet (mgtnew) and press tab

5. Tab through the generated code to set the name of your component.

6. Add your code!