fix(seprator): add hasRole input to separator

projects/canopy/src/lib/separator/separator.component.spec.ts

@@ -38,7 +38,22 @@ describe('LgSeparatorComponent', () => {
  expect(fixture.nativeElement.getAttribute('class')).toContain('lg-separator--dotted');
  });
 
- it('should have the role separator', () => {
- expect(fixture.nativeElement.getAttribute('role')).toEqual('separator');
+ it('should have an aria hidden attribute set to true if the role is not specified', () => {
+ expect(fixture.nativeElement.getAttribute('aria-hidden')).toEqual('true');
+ });
+
+ describe('when the role input is set to true', () => {
+ beforeEach(() => {
+ component.hasRole = true;
+ fixture.detectChanges();
+ });
+
+ it('should set the role attribute to "separator"', () => {
+ expect(fixture.nativeElement.getAttribute('role')).toEqual('separator');
+ });
+
+ it("shouldn't set the aria hidden attribute", () => {
+ expect(fixture.nativeElement.getAttribute('aria-hidden')).toBeNull();
+ });
  });
 });

projects/canopy/src/lib/separator/separator.component.ts

@@ -17,7 +17,14 @@ import { SeparatorVariant } from './separator.interface';
 })
 export class LgSeparatorComponent {
  @HostBinding('class.lg-separator') class = true;
- @HostBinding('attr.role') role = 'separator';
+
+ @Input() hasRole: boolean;
+ @HostBinding('attr.role') get roleAttr() {
+ return this.hasRole ? 'separator' : null;
+ }
+ @HostBinding('attr.aria-hidden') get ariaHidden() {
+ return !this.hasRole || null;
+ }
 
  private _variant: SeparatorVariant;
 

projects/canopy/src/lib/separator/separator.notes.ts

@@ -27,14 +27,15 @@ and in your HTML:
 | Name | Description | Type | Default | Required |
 |------|-------------|:----:|:-----:|:-----:|
 | \`\`variant\`\` | The variant of separator: \`\`solid\`\`, \`\`dotted\`\` | SeparatorVariant | 'solid' | No |
+| \`\`hasRole\`\` | If true, adds a role of \`\`separator\`\` to the component | boolean | false | No |
 
 ## Using only the SCSS files
 
 The \`\`lg-separator\`\` class is required to be able to apply the main style to the separator.
 
 ###Example:
 ~~~html
-<div class="lg-separator" role="separator"></div>
+<div class="lg-separator"></div>
 
 <div class="lg-separator lg-separator--dotted" role="separator"></div>
 ~~~

projects/canopy/src/lib/separator/separator.stories.ts

@@ -1,5 +1,5 @@
 import { moduleMetadata } from '@storybook/angular';
-import { select, withKnobs } from '@storybook/addon-knobs';
+import { boolean, select, withKnobs } from '@storybook/addon-knobs';
 
 import { LgSeparatorComponent } from '../separator/separator.component';
 import { notes } from './separator.notes';
@@ -21,9 +21,10 @@ export default {
 
 export const standard = () => ({
  template: `
- <lg-separator [variant]="variant"></lg-separator>
+ <lg-separator [variant]="variant" [hasRole]="hasRole"></lg-separator>
  `,
  props: {
  variant: select('variant', ['solid', 'dotted'], 'solid', ''),
+ hasRole: boolean('hasRole', false),
  },
 });