accessibility: add title for help and new connection link (#18)

CONTRIBUTING.md

@@ -72,6 +72,7 @@ Must be one of the following:
 * **refactor**: A code change that neither fixes a bug nor adds a feature
 * **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 * **test**: Adding missing tests or correcting existing tests
+* **accessibility**: Adding support for accessibility
 
 #### Short Description
 

src/common/localization/en-us.ts

@@ -177,6 +177,7 @@ export const english: IAppStrings = {
         details: "Connection Details",
         settings: "Connection Settings",
         instructions: "Please select a connection to edit",
+        new: "New Connection",
         save: "Save Connection",
         messages: {
             saveSuccess: "Successfully saved ${connection.name}",

src/common/localization/es-cl.ts

@@ -175,6 +175,7 @@ export const spanish: IAppStrings = {
     },
     connections: {
         title: "Conexiones",
+        new: "",
         save: "Guardar Conexión",
         details: "Detalles de Conexión",
         settings: "Configuración de Conexión",

src/common/strings.ts

@@ -177,6 +177,7 @@ export interface IAppStrings {
         details: string;
         settings: string;
         instructions: string;
+        new: string;
         save: string;
         messages: {
             saveSuccess: string;

src/react/components/common/condensedList/condensedList.tsx

@@ -11,6 +11,7 @@ import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
  * @member title - Title of condensed list
  * @member items - Array of items to be rendered
  * @member newLinkTo - Link for list items
+ * @member newLinkToTitle - Title of newLink
  * @member onClick - Function to call on clicking items
  * @member onDelete - Function to call on deleting items
  * @member Component - Component to be rendered for list items
@@ -20,6 +21,7 @@ interface ICondensedListProps {
     Component: any;
     items: any[];
     newLinkTo?: string;
+    newLinkToTitle?: string;
     onClick?: (item) => void;
     onDelete?: (item) => void;
 }
@@ -37,14 +39,14 @@ export default class CondensedList extends React.Component<ICondensedListProps>
     }
 
     public render() {
-        const { title, items, newLinkTo, Component } = this.props;
+        const { title, items, newLinkTo, newLinkToTitle, Component } = this.props;
 
         return (
             <div className="condensed-list">
                 <h6 className="condensed-list-header bg-darker-2 p-2">
                     <span>{title}</span>
                     {newLinkTo &&
-                        <Link to={newLinkTo} className="float-right">
+                        <Link to={newLinkTo} className="float-right" title={newLinkToTitle}>
                             <i className="ms-Icon ms-Icon--Add" />
                         </Link>
                     }

src/react/components/pages/connections/connectionsPage.tsx

@@ -94,6 +94,7 @@ export default class ConnectionPage extends React.Component<IConnectionPageProps
                     <CondensedList
                         title={strings.connections.title}
                         newLinkTo={"/connections/create"}
+                        newLinkToTitle={strings.connections.new}
                         onDelete={(connection) => this.confirmDelete.current.open(connection)}
                         Component={ConnectionItem}
                         items={this.props.connections} />

src/react/components/shell/helpMenu.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import React from "react";
+import { strings } from "../../../common/strings";
 import "./helpMenu.scss";
 
 export interface IHelpMenuProps {}
@@ -13,7 +14,12 @@ export class HelpMenu extends React.Component<IHelpMenuProps, IHelpMenuState> {
 
     public render() {
         return (
-            <a className={"help-menu-button"} href={this.akaMsLink} target="_blank" rel="noopener noreferrer">
+            <a
+                className={"help-menu-button"}
+                title={strings.titleBar.help}
+                href={this.akaMsLink}
+                target="_blank"
+                rel="noopener noreferrer">
                 <i className="ms-Icon ms-Icon--Help ms-Icon-18px"></i>
             </a>
         );