Updating accessibility to components (#126)

vogtn · nmetulev · commit d71fa440e226 · 2019-08-22T11:43:09.000-07:00
* updating accessibility to components

* [contributing.md] updating documentation with accesibility guidelines

* [several components] adding aria-labels for meaningful context

* [contributing.md] adding examples to accessibility guidelines
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -122,6 +122,56 @@ We encourage developers to follow the following guidance when submitting new fea
 1. Update the [documentation](https://github.com/microsoftgraph/microsoft-graph-docs/tree/master/concepts/toolkit) when necessary
 1. Follow the [accessibility guidance](https://developer.mozilla.org/en-US/docs/Web/Accessibility) for web development
 
+
+### Accessibility Guidelines
+
+New features and components should folow 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):*
+
+```html
+    <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):*
+
+```html
+<mgt-person tabindex="0" ></mgt-person>
+```
+```css
+mgt-person:focus{
+    border-color: blue;
+}
+```
+
+- [ ] `alt` | *string*: "person icon" | - any `<img>` tag should contain `alt` text as well
+
+*example (mgt-person):*
+
+```html
+    <img
+        title=${this.personDetails.displayName}
+        aria-label=${this.personDetails.displayName}
+        alt=${this.personDetails.displayName}
+        src=${this.personDetails.image as string}
+    />
+```
+
+
 <!-- ### Testing
 
 Your changes should include tests to verify new functionality wherever possible.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
diff --git a/src/components/mgt-agenda/mgt-agenda.ts b/src/components/mgt-agenda/mgt-agenda.ts
@@ -200,7 +200,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
                   <div class="group">
                     ${this.renderTemplate('header', { header: header }, 'header-' + header) ||
                       html`
-                        <div class="header">${header}</div>
+                        <div class="header" aria-label="${header}">${header}</div>
                       `}
                     ${this.renderListOfEvents(grouped[header])}
                   </div>
@@ -257,7 +257,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
     return html`
       <div class="event">
         <div class="event-time-container">
-          <div class="event-time">${this.getEventTimeString(event)}</div>
+          <div class="event-time" aria-label="${this.getEventTimeString(event)}">${this.getEventTimeString(event)}</div>
         </div>
         <div class="event-details-container">
           <div class="event-subject">${event.subject}</div>
@@ -296,7 +296,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
             stroke="black"
           />
         </svg>
-        <div class="event-location">${event.location.displayName}</div>
+        <div class="event-location" aria-label="${event.location.displayName}">${event.location.displayName}</div>
       </div>
     `;
   }
diff --git a/src/components/mgt-login/mgt-login.ts b/src/components/mgt-login/mgt-login.ts
@@ -188,7 +188,7 @@ export class MgtLogin extends MgtBaseComponent {
 
     return html`
       <div class="root">
-        <button ?disabled="${this._loading}" class="login-button" @click=${this.onClick}>
+        <button ?disabled="${this._loading}" class="login-button" @click=${this.onClick} role="button">
           ${content}
         </button>
         ${this.renderMenu()}
@@ -199,7 +199,7 @@ export class MgtLogin extends MgtBaseComponent {
   renderLogIn() {
     return html`
       <i class="login-icon ms-Icon ms-Icon--Contact"></i>
-      <span>
+      <span aria-label="Sign In">
         Sign In
       </span>
     `;
@@ -233,7 +233,7 @@ export class MgtLogin extends MgtBaseComponent {
           <div class="popup-commands">
             <ul>
               <li>
-                <button class="popup-command" @click=${this.logout}>
+                <button class="popup-command" @click=${this.logout} aria-label="Sign Out">
                   Sign Out
                 </button>
               </li>
diff --git a/src/components/mgt-people-picker/mgt-people-picker.ts b/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -125,12 +125,16 @@ export class MgtPicker extends MgtTemplatedComponent {
     if (event.keyCode == 40 || event.keyCode == 38) {
       //keyCodes capture: down arrow (40) and up arrow (38)
       this.handleArrowSelection(event);
-      event.preventDefault();
+      if (this._userInput.length > 0) {
+        event.preventDefault();
+      }
     }
     if (event.code == 'Tab' || event.code == 'Enter') {
+      if (this.people.length) {
+        event.preventDefault();
+      }
       this.addPerson(this.people[this.arrowSelectionCount], event);
       event.target.value = '';
-      event.preventDefault();
     }
   }
 
@@ -186,7 +190,6 @@ export class MgtPicker extends MgtTemplatedComponent {
   }
 
   private async loadPersonSearch(name: string) {
-    console.log('here');
     if (name.length) {
       name = name.toLowerCase();
       let provider = Providers.globalProvider;
@@ -251,7 +254,9 @@ export class MgtPicker extends MgtTemplatedComponent {
   private renderErrorMessage() {
     return html`
       <div class="error-message-parent">
-        <div class="search-error-text">We didn't find any matches.</div>
+        <div label="search-error-text" aria-label="We didn't find any matches." class="search-error-text">
+          We didn't find any matches.
+        </div>
       </div>
     `;
   }
@@ -293,14 +298,17 @@ export class MgtPicker extends MgtTemplatedComponent {
       `;
     }
     return html`
-      <ul class="people-chosen-list">
+      <div class="people-chosen-list">
         ${peopleList}
         <div class="${inputClass}">
           <input
             id="people-picker-input"
             class="people-chosen-input"
             type="text"
             placeholder="Start typing a name"
+            label="people-picker-input"
+            aria-label="people-picker-input"
+            role="input"
             .value="${this._userInput}"
             @keydown="${(e: KeyboardEvent & { target: HTMLInputElement }) => {
               this.onUserKeyDown(e);
@@ -310,7 +318,7 @@ export class MgtPicker extends MgtTemplatedComponent {
             }}"
           />
         </div>
-      </ul>
+      </div>
     `;
   }
 
@@ -355,15 +363,15 @@ export class MgtPicker extends MgtTemplatedComponent {
     if (people) {
       if (people.length == 0 && this._userInput.length > 0 && this.isLoading == false) {
         return html`
-          <ul class="people-list">
+          <div class="people-list">
             ${this.renderErrorMessage()}
-          </ul>
+          </div>
         `;
       } else {
         return html`
-          <ul class="people-list">
+          <div class="people-list">
             ${this.renderPersons(people)}
-          </ul>
+          </div>
         `;
       }
     }
diff --git a/src/components/mgt-person/mgt-person.ts b/src/components/mgt-person/mgt-person.ts
@@ -169,6 +169,8 @@ export class MgtPerson extends MgtTemplatedComponent {
           <img
             class="user-avatar ${this.getImageRowSpanClass()} ${this.getImageSizeClass()}"
             title=${this.personDetails.displayName}
+            aria-label=${this.personDetails.displayName}
+            alt=${this.personDetails.displayName}
             src=${this.personDetails.image as string}
           />
         `;
@@ -177,8 +179,9 @@ export class MgtPerson extends MgtTemplatedComponent {
           <div
             class="user-avatar initials ${this.getImageRowSpanClass()} ${this.getImageSizeClass()}"
             title=${this.personDetails.displayName}
+            aria-label=${this.personDetails.displayName}
           >
-            <span class="initials-text">
+            <span class="initials-text" aria-label="${this.getInitials()}">
               ${this.getInitials()}
             </span>
           </div>
@@ -202,12 +205,12 @@ export class MgtPerson extends MgtTemplatedComponent {
 
     const nameView = this.showName
       ? html`
-          <div class="user-name">${this.personDetails.displayName}</div>
+          <div class="user-name" aria-label="${this.personDetails.displayName}">${this.personDetails.displayName}</div>
         `
       : null;
     const emailView = this.showEmail
       ? html`
-          <div class="user-email">${this.personDetails.email}</div>
+          <div class="user-email" aria-label="${this.personDetails.email}">${this.personDetails.email}</div>
         `
       : null;
 
diff --git a/src/components/mgt-tasks/mgt-tasks.ts b/src/components/mgt-tasks/mgt-tasks.ts
@@ -57,14 +57,31 @@ export class MgtTasks extends MgtBaseComponent {
     return styles;
   }
 
+  /**
+   * readOnly property, determines if tasks are un-editable
+   * @type {boolean}
+   */
   @property({ attribute: 'read-only', type: Boolean })
   public readOnly: boolean = false;
 
+  /**
+   * data-source property, determines which task source is loaded, either planner or todo
+   * @type {string}
+   */
   @property({ attribute: 'data-source', type: String })
   public dataSource: 'planner' | 'todo' = 'planner';
 
+  /**
+   * target-id property, allows developer to define location of task component
+   * @type {string}
+   */
   @property({ attribute: 'target-id', type: String })
   public targetId: string = null;
+
+  /**
+   * target-bucket-id property, allows developer to define specific bucket id
+   * @type {string}
+   */
   @property({ attribute: 'target-bucket-id', type: String })
   public targetBucketId: string = null;
 
@@ -76,23 +93,68 @@ export class MgtTasks extends MgtBaseComponent {
   @property({ attribute: 'hide-header', type: Boolean })
   public hideHeader: boolean = false;
 
+  /**
+   * _showNewTask property, determines if tasks needs to show new task
+   * @type {boolean}
+   */
   @property() private _showNewTask: boolean = false;
+  /**
+   * _newTaskBeingAdded property, determines that new task is currently being added
+   * @type {boolean}
+   */
   @property() private _newTaskBeingAdded: boolean = false;
+
+  /**
+   * _newTaskSelfAssigned property, determines if user assigned task to themselves
+   * @type {boolean}
+   */
   @property() private _newTaskSelfAssigned: boolean = true;
+
+  /**
+   * _newTaskName property, contains new user created task name
+   * @type {string}
+   */
   @property() private _newTaskName: string = '';
+
+  /**
+   * _newTaskDueDate property, contains user chosen date for new task due date
+   * @type {string}
+   */
   @property() private _newTaskDueDate: string = '';
+
+  /**
+   * _newTaskDresserId property, contains id for new user created task??
+   * @type {string}
+   */
   @property() private _newTaskDresserId: string = '';
+  /**
+   * _showNewTask property, determines if tasks needs to render new task
+   * @type {string}
+   */
   @property() private _newTaskDrawerId: string = '';
 
   @property() private _dressers: IDresser[] = [];
   @property() private _drawers: IDrawer[] = [];
+
+  /**
+   * _tasks property, contains all user tasks
+   * @type {string}
+   */
   @property() private _tasks: ITask[] = [];
 
   @property() private _currentTargetDresser: string = this.res.BASE_SELF_ASSIGNED;
   @property() private _currentSubTargetDresser: string = this.res.PLANS_SELF_ASSIGNED;
   @property() private _currentTargetDrawer: string = this.res.BUCKETS_SELF_ASSIGNED;
 
+  /**
+   * _hiddenTasks property, used for filter if task has been deleted
+   * @type {string[]}
+   */
   @property() private _hiddenTasks: string[] = [];
+  /**
+   * _loadingTasks property, determines if tasks are in loading state
+   * @type {string[]}
+   */
   @property() private _loadingTasks: string[] = [];
 
   @property() private _inTaskLoad: boolean = false;
@@ -499,6 +561,9 @@ export class MgtTasks extends MgtBaseComponent {
           type="text"
           placeholder="Task..."
           .value="${this._newTaskName}"
+          label="new-taskName-input"
+          aria-label="new-taskName-input"
+          role="input"
           @input="${(e: Event & { target: HTMLInputElement }) => {
             this._newTaskName = e.target.value;
           }}"
@@ -576,6 +641,9 @@ export class MgtTasks extends MgtBaseComponent {
         ${this.renderCalendarIcon()}
         <input
           type="date"
+          label="new-taskDate-input"
+          aria-label="new-taskDate-input"
+          role="input"
           .value="${this._newTaskDueDate}"
           @change="${(e: Event & { target: HTMLInputElement }) => {
             this._newTaskDueDate = e.target.value;
@@ -593,6 +661,8 @@ export class MgtTasks extends MgtBaseComponent {
                 <input
                   class="SelfAssign"
                   type="checkbox"
+                  label="self-assign-input"
+                  aria-label="self-assign-input"
                   .checked="${this._newTaskSelfAssigned}"
                   @change="${(e: Event & { target: HTMLInputElement }) => {
                     this._newTaskSelfAssigned = e.target.checked;
