Fix titles for FontAwesomeIcon (#4838)

2019-04-09 10:24:47 -07:00 · 2019-04-09 10:24:47 -07:00 · e5fb5d61af
--- a/ui/job-view/CustomJobActions.jsx
+++ b/ui/job-view/CustomJobActions.jsx
@ -273,7 +273,7 @@ class CustomJobActions extends React.PureComponent {
              <FontAwesomeIcon
                icon={faCheckSquare}
                className="mr-1"
-                aria-hidden="true"
+                title="Check"
              />
              <span>{triggering ? 'Triggering' : 'Trigger'}</span>
            </Button>
--- a/ui/job-view/details/BugFiler.jsx
+++ b/ui/job-view/details/BugFiler.jsx
@ -557,6 +557,7 @@ export class BugFilerClass extends React.Component {
                      icon={faSpinner}
                      pulse
                      className="th-spinner-lg"
+                      title="Searching..."
                    />
                    Searching {productSearch}
                  </div>
@ -642,6 +643,7 @@ export class BugFilerClass extends React.Component {
                  size="lg"
                  className="pointable align-bottom pt-2 ml-1"
                  id="toggle-failure-lines"
+                  title={isFilerSummaryVisible ? 'collapse' : 'expand'}
                />
                <span
                  id="summaryLength"
--- a/ui/job-view/details/PinBoard.jsx
+++ b/ui/job-view/details/PinBoard.jsx
@ -402,7 +402,7 @@ class PinBoard extends React.Component {
                    onClick={() => unPinJob(job)}
                    title="un-pin this job"
                  >
-                    <FontAwesomeIcon icon={faTimes} />
+                    <FontAwesomeIcon icon={faTimes} title="Unpin job" />
                  </span>
                </span>
              ))}
@ -421,6 +421,7 @@ class PinBoard extends React.Component {
                <FontAwesomeIcon
                  icon={faPlusSquare}
                  className="add-related-bugs-icon"
+                  title="Add related bugs"
                />
              </span>
              {!this.hasPinnedJobBugs() && (
@ -468,7 +469,7 @@ class PinBoard extends React.Component {
                      onClick={() => removeBug(bug.id)}
                      title="remove this bug"
                    >
-                      <FontAwesomeIcon icon={faTimes} />
+                      <FontAwesomeIcon icon={faTimes} title="Remove bug" />
                    </span>
                  </span>
                </span>
--- a/ui/job-view/details/summary/ActionBar.jsx
+++ b/ui/job-view/details/summary/ActionBar.jsx
@ -321,7 +321,7 @@ class ActionBar extends React.PureComponent {
                className="btn icon-blue"
                onClick={() => pinJob(selectedJob)}
              >
-                <FontAwesomeIcon icon={faThumbtack} />
+                <FontAwesomeIcon icon={faThumbtack} title="Pin job" />
              </Button>
            </li>
            <li>
@ -336,19 +336,22 @@ class ActionBar extends React.PureComponent {
                disabled={!user.isLoggedIn}
                onClick={() => this.retriggerJob([selectedJob])}
              >
-                <FontAwesomeIcon icon={faRedo} />
+                <FontAwesomeIcon icon={faRedo} title="Retrigger job" />
              </Button>
            </li>
            {isReftest(selectedJob) &&
              jobLogUrls.map(jobLogUrl => (
                <li key={`reftest-${jobLogUrl.id}`}>
                  <a
-                    title="Launch the Reftest Analyser in a new window"
+                    title="Launch the Reftest Analyzer in a new window"
                    target="_blank"
                    rel="noopener noreferrer"
                    href={getReftestUrl(jobLogUrl.url)}
                  >
-                    <FontAwesomeIcon icon={faChartBar} />
+                    <FontAwesomeIcon
+                      icon={faChartBar}
+                      title="Reftest analyzer"
+                    />
                  </a>
                </li>
              ))}
@ -363,7 +366,7 @@ class ActionBar extends React.PureComponent {
                  className={user.isLoggedIn ? 'hover-warning' : 'disabled'}
                  onClick={() => this.cancelJob()}
                >
-                  <FontAwesomeIcon icon={faTimesCircle} />
+                  <FontAwesomeIcon icon={faTimesCircle} title="Cancel job" />
                </Button>
              </li>
            )}
@ -378,7 +381,7 @@ class ActionBar extends React.PureComponent {
                className="btn btn-sm dropdown-toggle bg-transparent border-0 pr-2 py-0 m-0"
                data-toggle="dropdown"
              >
-                <FontAwesomeIcon icon={faEllipsisH} aria-hidden="true" />
+                <FontAwesomeIcon icon={faEllipsisH} title="Other job actions" />
              </Button>
              <ul className="dropdown-menu actionbar-menu" role="menu">
                <li>
--- a/ui/job-view/details/summary/ClassificationsPanel.jsx
+++ b/ui/job-view/details/summary/ClassificationsPanel.jsx
@ -20,7 +20,11 @@ export default function ClassificationsPanel(props) {
    <React.Fragment>
      <li>
        <span title={classificationName.name}>
-          <FontAwesomeIcon icon={icon} className={iconClass} />
+          <FontAwesomeIcon
+            icon={icon}
+            className={iconClass}
+            title={iconClass}
+          />
          <span className="ml-1">{classificationName.name}</span>
        </span>
        {!!bugs.length && (
--- a/ui/job-view/details/summary/LogUrls.jsx
+++ b/ui/job-view/details/summary/LogUrls.jsx
@ -78,7 +78,7 @@ export default function LogUrls(props) {
            href={jobLogUrl.url}
            copy-value={jobLogUrl.url}
          >
-            <FontAwesomeIcon icon={faFileAlt} size="lg" />
+            <FontAwesomeIcon icon={faFileAlt} size="lg" title="Raw Log" />
          </a>
        </li>
      ))}
@ -89,7 +89,7 @@ export default function LogUrls(props) {
            title="No logs available for this job"
            aria-label="No logs available for this job"
          >
-            <FontAwesomeIcon icon={faFileAlt} />
+            <FontAwesomeIcon icon={faFileAlt} title="No logs" />
          </Button>
        </li>
      )}
--- a/ui/job-view/details/summary/SummaryPanel.jsx
+++ b/ui/job-view/details/summary/SummaryPanel.jsx
@ -56,6 +56,7 @@ class SummaryPanel extends React.PureComponent {
                    icon={faSpinner}
                    pulse
                    className="th-spinner-lg"
+                    title="Loading..."
                  />
                </div>
              </div>
--- a/ui/job-view/details/tabs/AnnotationsTab.jsx
+++ b/ui/job-view/details/tabs/AnnotationsTab.jsx
@ -34,7 +34,7 @@ function RelatedBugSaved(props) {
        onClick={() => deleteBug(bug)}
        title={`Delete relation to bug ${bug_id}`}
      >
-        <FontAwesomeIcon icon={faTimesCircle} />
+        <FontAwesomeIcon icon={faTimesCircle} title="Delete" />
      </span>
    </span>
  );
@ -85,7 +85,10 @@ function TableRow(props) {
        {/* TODO: the classification label & star has been used in the job_details_pane.jxs
            so it should probably be made its own component when we start using import */}
        <span title={name}>
-          <FontAwesomeIcon icon={icon} />
+          <FontAwesomeIcon
+            icon={icon}
+            title={failureId === 7 ? 'Auto classified' : 'Classified'}
+          />
          <span className="ml-1">{classificationName.name}</span>
        </span>
      </td>
@ -96,7 +99,7 @@ function TableRow(props) {
          className="classification-delete-icon hover-warning pointable"
          title="Delete this classification"
        >
-          <FontAwesomeIcon icon={faTimesCircle} />
+          <FontAwesomeIcon icon={faTimesCircle} title="Delete classification" />
        </span>
      </td>
    </tr>
--- a/ui/job-view/details/tabs/SimilarJobsTab.jsx
+++ b/ui/job-view/details/tabs/SimilarJobsTab.jsx
@ -314,6 +314,7 @@ class SimilarJobsTab extends React.Component {
                icon={faSpinner}
                pulse
                className="th-spinner-lg"
+                title="Loading..."
              />
            </div>
          </div>
--- a/ui/job-view/details/tabs/TabsPanel.jsx
+++ b/ui/job-view/details/tabs/TabsPanel.jsx
@ -190,6 +190,7 @@ class TabsPanel extends React.Component {
                )}
                <FontAwesomeIcon
                  icon={isPinBoardVisible ? faAngleDown : faAngleUp}
+                  title={isPinBoardVisible ? 'expand' : 'collapse'}
                  className="ml-1"
                />
              </Button>
@ -198,7 +199,7 @@ class TabsPanel extends React.Component {
                className="btn details-panel-close-btn bg-transparent border-0"
                aria-label="Close"
              >
-                <FontAwesomeIcon icon={faTimes} />
+                <FontAwesomeIcon icon={faTimes} title="Close" />
              </Button>
            </span>
          </TabList>
--- a/ui/job-view/details/tabs/autoclassify/AutoclassifyTab.jsx
+++ b/ui/job-view/details/tabs/autoclassify/AutoclassifyTab.jsx
@ -332,6 +332,7 @@ class AutoclassifyTab extends React.Component {
                  icon={faSpinner}
                  pulse
                  className="th-spinner-lg"
+                  title="Loading..."
                />
              </div>
            </div>
--- a/ui/job-view/details/tabs/autoclassify/ErrorLine.jsx
+++ b/ui/job-view/details/tabs/autoclassify/ErrorLine.jsx
@ -570,6 +570,7 @@ class ErrorLine extends React.Component {
                        onClick={() =>
                          this.setState({ messageExpanded: !messageExpanded })
                        }
+                        title="Expand/Collapse"
                      />
                      {messageExpanded ? (
                        <span className="failure-line-message-expanded">
@ -640,6 +641,7 @@ class ErrorLine extends React.Component {
              <FontAwesomeIcon
                icon={faStar}
                className="best-classification-star"
+                title="Classified"
              />
              {errorLine.bugNumber && (
                <span className="line-option-text">
--- a/ui/job-view/details/tabs/autoclassify/LineOption.jsx
+++ b/ui/job-view/details/tabs/autoclassify/LineOption.jsx
@ -112,7 +112,7 @@ class LineOption extends React.Component {
                    }
                    title="add to list of bugs to associate with all pinned jobs"
                  >
-                    <FontAwesomeIcon icon={faThumbtack} />
+                    <FontAwesomeIcon icon={faThumbtack} title="Select bug" />
                  </Button>
                )}
                {!!option.bugResolution && (
@ -170,7 +170,7 @@ class LineOption extends React.Component {
                  onClick={() => this.fileBug()}
                  title="File a bug for this failure"
                >
-                  <FontAwesomeIcon icon={faBug} />
+                  <FontAwesomeIcon icon={faBug} title="Select bug" />
                </Button>
                {option.id === 'manual' && !!option.manualBugNumber && (
                  <a
--- a/ui/job-view/details/tabs/autoclassify/StaticLineOption.jsx
+++ b/ui/job-view/details/tabs/autoclassify/StaticLineOption.jsx
@ -51,7 +51,7 @@ function StaticLineOption(props) {
              onClick={() => addBug({ id: option.bugNumber }, selectedJob)}
              title="add to list of bugs to associate with all pinned jobs"
            >
-              <FontAwesomeIcon icon={faThumbtack} />
+              <FontAwesomeIcon icon={faThumbtack} title="Select bug" />
            </Button>
          )}
          {!!option.bugResolution && (
--- a/ui/job-view/details/tabs/failureSummary/BugListItem.jsx
+++ b/ui/job-view/details/tabs/failureSummary/BugListItem.jsx
@ -21,7 +21,7 @@ function BugListItem(props) {
        onClick={() => addBug(bug, selectedJob)}
        title="add to list of bugs to associate with all pinned jobs"
      >
-        <FontAwesomeIcon icon={faThumbtack} />
+        <FontAwesomeIcon icon={faThumbtack} title="Select bug" />
      </button>
      <a
        className={`${bugClassName} ml-1`}
--- a/ui/job-view/details/tabs/failureSummary/FailureSummaryTab.jsx
+++ b/ui/job-view/details/tabs/failureSummary/FailureSummaryTab.jsx
@ -136,6 +136,7 @@ class FailureSummaryTab extends React.Component {
                  icon={faSpinner}
                  pulse
                  className="th-spinner-lg"
+                  title="Loading..."
                />
              </div>
            </div>
--- a/ui/job-view/details/tabs/failureSummary/SuggestionsListItem.jsx
+++ b/ui/job-view/details/tabs/failureSummary/SuggestionsListItem.jsx
@ -33,7 +33,7 @@ export default class SuggestionsListItem extends React.Component {
            onClick={() => toggleBugFiler(suggestion)}
            title="file a bug for this failure"
          >
-            <FontAwesomeIcon icon={faBug} />
+            <FontAwesomeIcon icon={faBug} title="File bug" />
          </span>
          <span>{suggestion.search}</span>
        </div>
--- a/ui/job-view/headerbars/ActiveFilters.jsx
+++ b/ui/job-view/headerbars/ActiveFilters.jsx
@ -88,7 +88,10 @@ export default class ActiveFilters extends React.Component {
              title="Clear all of these filters"
              onClick={filterModel.clearNonStatusFilters}
            >
-              <FontAwesomeIcon icon={faTimesCircle} />{' '}
+              <FontAwesomeIcon
+                icon={faTimesCircle}
+                title="Clear all these filters"
+              />{' '}
            </span>
            <span className="active-filters-title">
              <b>Active Filters</b>
@ -106,7 +109,10 @@ export default class ActiveFilters extends React.Component {
                      filterModel.removeFilter(filter.field, filterValue)
                    }
                  >
-                    <FontAwesomeIcon icon={faTimesCircle} />
+                    <FontAwesomeIcon
+                      icon={faTimesCircle}
+                      title={`Clear filter: ${filter.field}`}
+                    />
                    &nbsp;
                  </span>
                  <span title={`Filter by ${filter.field}: ${filterValue}`}>
--- a/ui/job-view/headerbars/HelpMenu.jsx
+++ b/ui/job-view/headerbars/HelpMenu.jsx
@ -69,7 +69,11 @@ export default function HelpMenu() {
        data-toggle="dropdown"
        className="btn btn-view-nav nav-help-btn dropdown-toggle"
      >
-        <FontAwesomeIcon icon={faQuestionCircle} className="lightgray mr-1" />
+        <FontAwesomeIcon
+          icon={faQuestionCircle}
+          className="lightgray mr-1"
+          title="Treeherder help"
+        />
      </button>
      <ul
        className="dropdown-menu nav-dropdown-menu-right icon-menu"
--- a/ui/job-view/headerbars/NotificationsMenu.jsx
+++ b/ui/job-view/headerbars/NotificationsMenu.jsx
@ -40,7 +40,11 @@ class NotificationsMenu extends React.Component {
          data-toggle="dropdown"
          className="btn btn-view-nav nav-menu-btn"
        >
-          <FontAwesomeIcon icon={faBell} className="lightgray" />
+          <FontAwesomeIcon
+            icon={faBell}
+            className="lightgray"
+            title="Recent notifications"
+          />
        </button>
        <ul
          id="notification-dropdown"
@ -77,6 +81,7 @@ class NotificationsMenu extends React.Component {
                  <FontAwesomeIcon
                    icon={this.getIcon(notification.severity)}
                    className={`text-${notification.severity}`}
+                    title={notification.severity}
                  />
                  &nbsp;
                  <small className="text-muted">
--- a/ui/job-view/headerbars/ReposMenu.jsx
+++ b/ui/job-view/headerbars/ReposMenu.jsx
@ -58,7 +58,8 @@ export default function ReposMenu(props) {
                  className="dropdown-header"
                  title={group.name}
                >
-                  {group.name} <FontAwesomeIcon icon={faInfoCircle} />
+                  {group.name}{' '}
+                  <FontAwesomeIcon icon={faInfoCircle} title={group.name} />
                </li>
                {!!group.repos &&
                  group.repos.map(repo => (
--- a/ui/job-view/headerbars/SecondaryNavBar.jsx
+++ b/ui/job-view/headerbars/SecondaryNavBar.jsx
@ -321,7 +321,11 @@ class SecondaryNavBar extends React.PureComponent {
                onClick={toggleFieldFilterVisible}
                title="Filter by a job field"
              >
-                <FontAwesomeIcon icon={faFilter} size="sm" />
+                <FontAwesomeIcon
+                  icon={faFilter}
+                  size="sm"
+                  title="Filter by a job field"
+                />
              </span>
            </span>

--- a/ui/job-view/headerbars/UpdateAvailable.jsx
+++ b/ui/job-view/headerbars/UpdateAvailable.jsx
@ -9,7 +9,7 @@ export default function UpdateAvailable(props) {
  // Show this when the Treeherder server has updated
  return (
    <div className="alert alert-info update-alert-panel">
-      <FontAwesomeIcon icon={faInfoCircle} aria-hidden="true" />
+      <FontAwesomeIcon icon={faInfoCircle} />
      Treeherder has updated. To pick up the changes, you can reload the page
      &nbsp;
      <button
--- a/ui/job-view/headerbars/WatchedRepo.jsx
+++ b/ui/job-view/headerbars/WatchedRepo.jsx
@ -138,7 +138,6 @@ export default class WatchedRepo extends React.Component {
            size="sm"
            className={color}
            pulse={pulseIcon}
-            aria-label={status}
          />{' '}
          {watchedRepo}
        </a>
@ -149,7 +148,7 @@ export default class WatchedRepo extends React.Component {
          aria-label={`${watchedRepo} info`}
          data-toggle="dropdown"
        >
-          <FontAwesomeIcon icon={faInfoCircle} />
+          <FontAwesomeIcon icon={faInfoCircle} title={`${watchedRepo} info`} />
        </button>
        {watchedRepo !== repoName && (
          <button
@ -159,7 +158,7 @@ export default class WatchedRepo extends React.Component {
            title={`Unwatch ${watchedRepo}`}
            aria-label={`Unwatch ${watchedRepo}`}
          >
-            <FontAwesomeIcon icon={faTimes} />
+            <FontAwesomeIcon icon={faTimes} title="Unwatch" />
          </button>
        )}

--- a/ui/job-view/pushes/JobButton.jsx
+++ b/ui/job-view/pushes/JobButton.jsx
@ -131,7 +131,11 @@ export default class JobButtonComponent extends React.Component {
      <button type="button" {...attributes}>
        {job_type_symbol}
        {classifiedIcon && (
-          <FontAwesomeIcon icon={classifiedIcon} className="classified-icon" />
+          <FontAwesomeIcon
+            icon={classifiedIcon}
+            className="classified-icon"
+            title="classified"
+          />
        )}
      </button>
    );
--- a/ui/job-view/pushes/PushHeader.jsx
+++ b/ui/job-view/pushes/PushHeader.jsx
@ -312,7 +312,11 @@ class PushHeader extends React.Component {
                onClick={this.cancelAllJobs}
                aria-label={cancelJobsTitle}
              >
-                <FontAwesomeIcon icon={faTimesCircle} className="dim-quarter" />
+                <FontAwesomeIcon
+                  icon={faTimesCircle}
+                  className="dim-quarter"
+                  title="Cancel jobs"
+                />
              </button>
            )}
            <button
@ -322,7 +326,7 @@ class PushHeader extends React.Component {
              aria-label="Pin all available jobs in this push"
              onClick={this.pinAllShownJobs}
            >
-              <FontAwesomeIcon icon={faThumbtack} />
+              <FontAwesomeIcon icon={faThumbtack} title="Pin all jobs" />
            </button>
            {!!selectedRunnableJobs.length && runnableVisible && (
              <button
--- a/ui/job-view/pushes/PushJobs.jsx
+++ b/ui/job-view/pushes/PushJobs.jsx
@ -189,6 +189,7 @@ class PushJobs extends React.Component {
                  icon={faSpinner}
                  pulse
                  className="th-spinner"
+                  title="Loading..."
                />
              </td>
            </tr>
--- a/ui/job-view/pushes/PushLoadErrors.jsx
+++ b/ui/job-view/pushes/PushLoadErrors.jsx
@ -40,6 +40,7 @@ function PushLoadErrors(props) {
                      icon={faSpinner}
                      pulse
                      className="th-spinner"
+                      title="Loading..."
                    />
                  </p>
                  <p>
--- a/ui/job-view/pushes/Revision.jsx
+++ b/ui/job-view/pushes/Revision.jsx
@ -24,7 +24,7 @@ export function Initials(props) {
  return (
    <span title={props.title}>
      <span className="user-push-icon">
-        <FontAwesomeIcon icon={faUser} aria-hidden="true" />
+        <FontAwesomeIcon icon={faUser} />
      </span>
      <div className="icon-superscript user-push-initials">{initials}</div>
    </span>
--- a/ui/perfherder/compare/CompareTable.jsx
+++ b/ui/perfherder/compare/CompareTable.jsx
@ -92,6 +92,11 @@ export default class CompareTable extends React.PureComponent {
                                ? faExclamationTriangle
                                : faThumbsUp
                            }
+                            title={
+                              results.isRegression
+                                ? 'regression'
+                                : 'improvement'
+                            }
                            className={this.getColorClass(results, 'text')}
                            size="lg"
                          />
--- a/ui/perfherder/compare/SelectorCard.jsx
+++ b/ui/perfherder/compare/SelectorCard.jsx
@ -220,6 +220,7 @@ export default class SelectorCard extends React.Component {
                        className={`mr-1 ${
                          selectedRepo === item.name ? '' : 'hide'
                        }`}
+                        title={selectedRepo === item.name ? 'Checked' : ''}
                      />
                      {item.name}
                    </DropdownItem>
@ -288,6 +289,11 @@ export default class SelectorCard extends React.Component {
                              className={`mr-1 ${
                                selectedRevision === item.revision ? '' : 'hide'
                              }`}
+                              title={
+                                selectedRevision === item.revision
+                                  ? 'Checked'
+                                  : ''
+                              }
                            />
                            {`${item.revision} ${item.author}`}
                          </DropdownItem>
--- a/ui/push-health/ClassificationGroup.jsx
+++ b/ui/push-health/ClassificationGroup.jsx
@ -40,7 +40,11 @@ export default class ClassificationGroup extends React.PureComponent {
        <h4 className="w-100" onClick={this.toggleDetails}>
          <span className={`pointable badge badge-${headerColor} w-100`}>
            {name} : {Object.keys(group).length}
-            <FontAwesomeIcon icon={expandIcon} className="ml-1" />
+            <FontAwesomeIcon
+              icon={expandIcon}
+              className="ml-1"
+              title="expand"
+            />
          </span>
        </h4>
        <Collapse isOpen={detailsShowing} className="w-100">
--- a/ui/push-health/Job.jsx
+++ b/ui/push-health/Job.jsx
@ -24,7 +24,9 @@ class Job extends PureComponent {
        >
          {jobSymbol}
        </a>
-        {failure_classification_id !== 1 && <FontAwesomeIcon icon={faStar} />}
+        {failure_classification_id !== 1 && (
+          <FontAwesomeIcon icon={faStar} title="Classified" />
+        )}
        {job.result === 'testfailed' && (
          <a
            className="logviewer-btn"
--- a/ui/push-health/Metric.jsx
+++ b/ui/push-health/Metric.jsx
@ -50,7 +50,7 @@ export default class Metric extends React.PureComponent {
                  {name}
                </span>
                <span className="btn">
-                  <FontAwesomeIcon icon={expandIcon} />
+                  <FontAwesomeIcon icon={expandIcon} title="expand" />
                </span>
              </div>
              <span>
--- a/ui/push-health/TestFailure.jsx
+++ b/ui/push-health/TestFailure.jsx
@ -80,7 +80,7 @@ class TestFailure extends React.PureComponent {
            title="Retrigger job"
            style={{ lineHeight: '10px' }}
          >
-            <FontAwesomeIcon icon={faRedo} />
+            <FontAwesomeIcon icon={faRedo} title="Retrigger" />
          </Button>
          <span>
            {platform} {config}:
--- a/ui/shared/DropdownMenuItems.jsx
+++ b/ui/shared/DropdownMenuItems.jsx
@ -14,6 +14,7 @@ const DropdownMenuItems = ({ selectedItem, updateData, options }) => (
        <FontAwesomeIcon
          icon={faCheck}
          className={`mr-1 ${selectedItem === item ? '' : 'hide'}`}
+          title={selectedItem === item ? 'Checked' : ''}
        />
        {item}
      </DropdownItem>
--- a/ui/shared/NotificationList.jsx
+++ b/ui/shared/NotificationList.jsx
@ -35,6 +35,7 @@ class NotificationList extends React.Component {
            <div className={`alert alert-${notification.severity}`}>
              <FontAwesomeIcon
                icon={NotificationList.getIcon(notification.severity)}
+                title={notification.severity}
              />
              <span>{notification.message}</span>
              {notification.url && notification.linkText && (
--- a/ui/shared/auth/Login.jsx
+++ b/ui/shared/auth/Login.jsx
@ -119,7 +119,7 @@ class Login extends React.Component {
            >
              <div className="dropdown-toggle">
                <span className="nav-user-icon mr-1 rounded">
-                  <FontAwesomeIcon icon={faUser} size="xs" />
+                  <FontAwesomeIcon icon={faUser} size="xs" title="User" />
                </span>
                <span>{user.fullName}</span>
              </div>
--- a/ui/test-view/ui/Groups.jsx
+++ b/ui/test-view/ui/Groups.jsx
@ -83,6 +83,7 @@ class Groups extends React.Component {
                  icon={faBug}
                  size="sm"
                  className="classified-intermittent"
+                  title="classified-intermittent"
                />
                <br />
                Infrastructure issue&nbsp;&nbsp;
@ -90,6 +91,7 @@ class Groups extends React.Component {
                  icon={faUnlink}
                  size="sm"
                  className="classified-infra"
+                  title="classified-infra"
                />
              </Col>
              <Col md={6} sm={12} xs={12}>
@ -166,7 +168,12 @@ class Groups extends React.Component {
                  colSpan={4}
                  style={{ textAlign: 'center', paddingTop: '2rem' }}
                >
-                  <FontAwesomeIcon icon={faSpinner} size="2x" spin />
+                  <FontAwesomeIcon
+                    icon={faSpinner}
+                    size="2x"
+                    spin
+                    title="Loading..."
+                  />
                </td>
              </tr>
            </tbody>
--- a/ui/test-view/ui/StatusNavbar.jsx
+++ b/ui/test-view/ui/StatusNavbar.jsx
@ -53,7 +53,7 @@ class StatusNavbar extends React.Component {

          <span className="navbar-text">
            <span className="hidden-sm-down">&mdash;&nbsp;&nbsp;&nbsp;</span>
-            <FontAwesomeIcon icon={faIdCard} /> Author{' '}
+            <FontAwesomeIcon icon={faIdCard} title="Author" /> Author{' '}
            <code>{push.author}</code>
          </span>
        </Nav>
@ -65,12 +65,14 @@ class StatusNavbar extends React.Component {
        <Button
          className="navbar-text bg-transparent border-0 p-0"
          onClick={() => this.toggleHideClassified('infra')}
+          title="Toggle show infra"
          outline
        >
          <Badge color="infra">
            <FontAwesomeIcon
              icon={hideClassified.infra ? faSquare : faCheckSquare}
              pull="left"
+              title={hideClassified.infra ? 'unchecked' : 'checked'}
            />
            {counts.infra} Infra Tests
          </Badge>
@ -80,11 +82,13 @@ class StatusNavbar extends React.Component {
          className="navbar-text bg-transparent border-0 p-0"
          onClick={() => this.toggleHideClassified('intermittent')}
          outline
+          title="Toggle show intermittent"
        >
          <Badge color="intermittent">
            <FontAwesomeIcon
              icon={hideClassified.intermittent ? faSquare : faCheckSquare}
              pull="left"
+              title={hideClassified.intermittent ? 'unchecked' : 'checked'}
            />
            {counts.intermittent} Intermittent Tests
          </Badge>
--- a/ui/test-view/ui/Test.jsx
+++ b/ui/test-view/ui/Test.jsx
@ -88,6 +88,7 @@ class Platform extends React.Component {
            icon={faBug}
            size="sm"
            className="classified classified-intermittent"
+            title="Bug"
          />
        );
      case 'infra':
@ -96,11 +97,17 @@ class Platform extends React.Component {
            icon={faUnlink}
            size="sm"
            className="classified classified-infra"
+            title="Infra"
          />
        );
      default:
        return (
-          <FontAwesomeIcon icon={faStar} size="sm" className="classified" />
+          <FontAwesomeIcon
+            icon={faStar}
+            size="sm"
+            className="classified"
+            title="Classified"
+          />
        );
    }
  }
--- a/ui/userguide/UserGuideBody.jsx
+++ b/ui/userguide/UserGuideBody.jsx
@ -96,6 +96,7 @@ const UserGuideBody = function UserGuideBody() {
                            <FontAwesomeIcon
                              icon={icon}
                              className="classified-icon"
+                              title="Classified"
                            />
                          )}
                        </button>