fix(tab-headers): add title attributes

Author: zvonimirfras

src/tabs/tab-headers.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-
+import { I18nModule } from "../i18n/index";
 import { UtilsModule } from "carbon-components-angular/utils";
 import { TabHeaders } from "./tab-headers.component";
 
@@ -10,7 +10,10 @@ describe("TabHeadersComponent", () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [TabHeaders],
-			imports: [UtilsModule],
+			imports: [
+				UtilsModule,
+				I18nModule
+			],
 			providers: []
 		});
 

src/tabs/tab-headers.component.ts

@@ -15,7 +15,7 @@ import {
 	ChangeDetectorRef
 } from "@angular/core";
 import { EventService } from "carbon-components-angular/utils";
-
+import { I18n } from "carbon-components-angular/i18n";
 import { Tab } from "./tab.component";
 
 /**
@@ -37,6 +37,7 @@ import { Tab } from "./tab.component";
 			<button
 				#leftOverflowNavButton
 				type="button"
+				[title]="translations.PREVIOUS"
 				[ngClass]="{
 					'bx--tab--overflow-nav-button': hasHorizontalOverflow,
 					'bx--tab--overflow-nav-button--hidden': leftOverflowNavButtonHidden
@@ -106,6 +107,7 @@ import { Tab } from "./tab.component";
 			<button
 				#rightOverflowNavButton
 				type="button"
+				[title]="translations.NEXT"
 				[ngClass]="{
 					'bx--tab--overflow-nav-button': hasHorizontalOverflow,
 					'bx--tab--overflow-nav-button--hidden': rightOverflowNavButtonHidden
@@ -163,6 +165,8 @@ export class TabHeaders implements AfterContentInit, OnChanges, OnInit {
 
 	@Input() type: "default" | "container" = "default";
 
+	@Input() translations = this.i18n.get().PAGINATION;
+
 	/**
 	 * Gets the Unordered List element that holds the `Tab` headings from the view DOM.
 	 */
@@ -217,7 +221,8 @@ export class TabHeaders implements AfterContentInit, OnChanges, OnInit {
 	constructor(
 		protected elementRef: ElementRef,
 		protected changeDetectorRef: ChangeDetectorRef,
-		protected eventService: EventService
+		protected eventService: EventService,
+		protected i18n: I18n
 	) { }
 
 	// keyboard accessibility

src/tabs/tabs.component.spec.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { TestBed } from "@angular/core/testing";
 import { By	 } from "@angular/platform-browser";
-
+import { I18nModule } from "../i18n/index";
 import { UtilsModule } from "carbon-components-angular/utils";
 import { Tabs } from "./tabs.component";
 import { CommonModule } from "@angular/common";
@@ -43,7 +43,8 @@ describe("Sample", () => {
 			],
 			imports: [
 				CommonModule,
-				UtilsModule
+				UtilsModule,
+				I18nModule
 			]
 		});
 	});

src/tabs/tabs.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { UtilsModule } from "carbon-components-angular/utils";
-
+import { I18nModule } from "carbon-components-angular/i18n";
 import { Tabs } from "./tabs.component";
 import { Tab } from "./tab.component";
 import { TabHeaders } from "./tab-headers.component";
@@ -25,7 +25,8 @@ import { TabHeaderGroup } from "./tab-header-group.component";
 	],
 	imports: [
 		CommonModule,
-		UtilsModule
+		UtilsModule,
+		I18nModule
 	]
 })
 export class TabsModule {}