diff --git a/aio/src/app/embedded/code/code-example.component.ts b/aio/src/app/embedded/code/code-example.component.ts
index 9e9cad1dbb..b35c824e85 100644
--- a/aio/src/app/embedded/code/code-example.component.ts
+++ b/aio/src/app/embedded/code/code-example.component.ts
@@ -18,7 +18,9 @@ import { getBoolFromAttribute } from 'app/shared/attribute-utils';
template: `
+ [language]="language" [linenums]="linenums"
+ [path]="path" [region]="region"
+ [hideCopy]="hideCopy" [title]="title">
`
})
export class CodeExampleComponent implements OnInit {
diff --git a/aio/src/app/embedded/code/code-tabs.component.ts b/aio/src/app/embedded/code/code-tabs.component.ts
index a7f0556cdd..0d98f912b9 100644
--- a/aio/src/app/embedded/code/code-tabs.component.ts
+++ b/aio/src/app/embedded/code/code-tabs.component.ts
@@ -27,7 +27,8 @@ export interface TabInfo {
{{ tab.title }}
+ [path]="tab.path" [region]="tab.region" [title]="tab.title"
+ class="{{ tab.class }}">
`
diff --git a/aio/src/app/embedded/code/code.component.spec.ts b/aio/src/app/embedded/code/code.component.spec.ts
index acec0d2e8b..51fffd6278 100644
--- a/aio/src/app/embedded/code/code.component.spec.ts
+++ b/aio/src/app/embedded/code/code.component.spec.ts
@@ -179,26 +179,45 @@ describe('CodeComponent', () => {
describe('copy button', () => {
+ function getButton() {
+ const btnDe = fixture.debugElement.query(By.css('button'));
+ return btnDe ? btnDe.nativeElement : null;
+ }
+
it('should be hidden if the `hideCopy` input is true', () => {
hostComponent.hideCopy = true;
fixture.detectChanges();
- expect(fixture.debugElement.query(By.css('button'))).toBe(null);
+ expect(getButton()).toBe(null);
+ });
+
+ it('should have title', () => {
+ fixture.detectChanges();
+ expect(getButton().title).toBe('Copy code snippet');
+ });
+
+ it('should have no aria-label by default', () => {
+ fixture.detectChanges();
+ expect(getButton().getAttribute('aria-label')).toBe('');
+ });
+
+ it('should have aria-label explaining what is being copied when title passed in', () => {
+ hostComponent.title = 'a/b/c/foo.ts';
+ fixture.detectChanges();
+ expect(getButton().getAttribute('aria-label')).toContain(hostComponent.title);
});
it('should call copier service when clicked', () => {
const copierService: CopierService = TestBed.get(CopierService);
const spy = spyOn(copierService, 'copyText');
- const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
expect(spy.calls.count()).toBe(0, 'before click');
- button.click();
+ getButton().click();
expect(spy.calls.count()).toBe(1, 'after click');
});
it('should copy code text when clicked', () => {
const copierService: CopierService = TestBed.get(CopierService);
const spy = spyOn(copierService, 'copyText');
- const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
- button.click();
+ getButton().click();
expect(spy.calls.argsFor(0)[0]).toEqual(oneLineCode, 'after click');
});
@@ -207,8 +226,7 @@ describe('CodeComponent', () => {
const copierService: CopierService = TestBed.get(CopierService);
spyOn(snackBar, 'open');
spyOn(copierService, 'copyText').and.returnValue(true);
- const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
- button.click();
+ getButton().click();
expect(snackBar.open).toHaveBeenCalledWith('Code Copied', '', { duration: 800 });
});
@@ -217,8 +235,7 @@ describe('CodeComponent', () => {
const copierService: CopierService = TestBed.get(CopierService);
spyOn(snackBar, 'open');
spyOn(copierService, 'copyText').and.returnValue(false);
- const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
- button.click();
+ getButton().click();
expect(snackBar.open).toHaveBeenCalledWith('Copy failed. Please try again!', '', { duration: 800 });
});
});
@@ -230,16 +247,18 @@ describe('CodeComponent', () => {
selector: 'aio-host-comp',
template: `
+ [linenums]="linenums" [path]="path" [region]="region"
+ [hideCopy]="hideCopy" [title]="title">
`
})
class HostComponent {
code = oneLineCode;
+ hideCopy: boolean;
language: string;
linenums: boolean | number | string;
path: string;
region: string;
- hideCopy: boolean;
+ title: string;
}
class TestLogger {
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index 3c678fc8d6..280fc0a33c 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -31,19 +31,32 @@ const defaultLineNumsCount = 10; // by default, show linenums over this number
selector: 'aio-code',
template: `
- content_copy
+
+ content_copy
+
`
})
export class CodeComponent implements OnChanges {
+ ariaLabel = '';
+
/**
* The code to be formatted, this should already be HTML encoded
*/
@Input()
code: string;
+ /**
+ * set to true if the copy button is not to be shown
+ */
+ @Input()
+ hideCopy: boolean;
+
/**
* The language of the code to render
* (could be javascript, dart, typescript, etc)
@@ -73,10 +86,10 @@ export class CodeComponent implements OnChanges {
region: string;
/**
- * set to true if the copy button is not to be shown
+ * title for this snippet (optional)
*/
@Input()
- hideCopy: boolean;
+ title: string;
/**
* The element in the template that will display the formatted code
@@ -91,6 +104,7 @@ export class CodeComponent implements OnChanges {
ngOnChanges() {
this.code = this.code && leftAlign(this.code);
+ this.ariaLabel = this.title ? `Copy code snippet from ${this.title}` : '';
if (!this.code) {
const src = this.path ? this.path + (this.region ? '#' + this.region : '') : '';
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 4015777436..26f2418850 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -104,7 +104,7 @@ code ol {
top: 6px;
right: 8px;
- color: $lightgray;
+ color: $blue-grey-200;
background-color: transparent;
border: none;
cursor: pointer;
@@ -239,4 +239,4 @@ code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-bo
.sidenav-content code a {
color: inherit;
font-size: inherit;
-}
\ No newline at end of file
+}