From b6a606d3a5fb405c233327836161116b4d48daf6 Mon Sep 17 00:00:00 2001 From: Patty RoDee Date: Mon, 20 May 2019 12:37:24 -0700 Subject: [PATCH] feat(chips): Add setAttr adapter method (#4736) Add MDCChipAdapter#setAttr method. Update screenshot tests with appropriate roles. BREAKING CHANGE: Add the setAttr method to the chip adapter. --- packages/mdc-chips/README.md | 1 + packages/mdc-chips/chip/adapter.ts | 5 +++ packages/mdc-chips/chip/component.ts | 1 + packages/mdc-chips/chip/constants.ts | 1 + packages/mdc-chips/chip/foundation.ts | 3 ++ test/screenshot/golden.json | 4 +-- .../spec/mdc-chips/classes/choice.html | 16 +++++----- .../spec/mdc-chips/classes/filter.html | 32 +++++++++---------- .../mdc-chips/mdc-chip.foundation.test.js | 15 ++++++++- 9 files changed, 51 insertions(+), 27 deletions(-) diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index 1e2341778e0..04972a07a79 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -337,6 +337,7 @@ Method Signature | Description `hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon `getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element `getCheckmarkBoundingClientRect() => ClientRect \| null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist +`setAttr(attr: string, value: string) => void` | Sets the value of the attribute on the root element. > \*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling). diff --git a/packages/mdc-chips/chip/adapter.ts b/packages/mdc-chips/chip/adapter.ts index 652a0ee3018..27578740de7 100644 --- a/packages/mdc-chips/chip/adapter.ts +++ b/packages/mdc-chips/chip/adapter.ts @@ -105,4 +105,9 @@ export interface MDCChipAdapter { * @return The bounding client rect of the checkmark element or null if it doesn't exist. */ getCheckmarkBoundingClientRect(): ClientRect | null; + + /** + * Sets the value of the attribute on the root element. + */ + setAttr(attr: string, value: string): void; } diff --git a/packages/mdc-chips/chip/component.ts b/packages/mdc-chips/chip/component.ts index e20ccce55f9..63b7dac910d 100644 --- a/packages/mdc-chips/chip/component.ts +++ b/packages/mdc-chips/chip/component.ts @@ -177,6 +177,7 @@ export class MDCChip extends MDCComponent implements MDCRippl this.leadingIcon_.classList.remove(className); } }, + setAttr: (attr, value) => this.root_.setAttribute(attr, value), setStyleProperty: (propertyName, value) => this.root_.style.setProperty(propertyName, value), }; return new MDCChipFoundation(adapter); diff --git a/packages/mdc-chips/chip/constants.ts b/packages/mdc-chips/chip/constants.ts index 68df5f68420..52c5d62b79f 100644 --- a/packages/mdc-chips/chip/constants.ts +++ b/packages/mdc-chips/chip/constants.ts @@ -22,6 +22,7 @@ */ export const strings = { + ARIA_CHECKED: 'aria-checked', CHECKMARK_SELECTOR: '.mdc-chip__checkmark', ENTRY_ANIMATION_NAME: 'mdc-chip-entry', INTERACTION_EVENT: 'MDCChip:interaction', diff --git a/packages/mdc-chips/chip/foundation.ts b/packages/mdc-chips/chip/foundation.ts index 006cccef811..a41d6e75350 100644 --- a/packages/mdc-chips/chip/foundation.ts +++ b/packages/mdc-chips/chip/foundation.ts @@ -59,6 +59,7 @@ export class MDCChipFoundation extends MDCFoundation { notifyTrailingIconInteraction: () => undefined, removeClass: () => undefined, removeClassFromLeadingIcon: () => undefined, + setAttr: () => undefined, setStyleProperty: () => undefined, }; } @@ -79,8 +80,10 @@ export class MDCChipFoundation extends MDCFoundation { setSelected(selected: boolean) { if (selected) { this.adapter_.addClass(cssClasses.SELECTED); + this.adapter_.setAttr(strings.ARIA_CHECKED, 'true'); } else { this.adapter_.removeClass(cssClasses.SELECTED); + this.adapter_.setAttr(strings.ARIA_CHECKED, 'false'); } this.adapter_.notifySelection(selected); } diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 92980d80686..1618739d6ff 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -200,10 +200,10 @@ } }, "spec/mdc-checkbox/mixins/touch-dimension.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/mixins/touch-dimension.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/20/17_56_10_840/spec/mdc-checkbox/mixins/touch-dimension.html?utm_source=golden_json", "screenshots": { "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/13/19_16_33_458/spec/mdc-checkbox/mixins/touch-dimension.html.windows_chrome_74.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/13/19_16_33_458/spec/mdc-checkbox/mixins/touch-dimension.html.windows_firefox_65.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/20/17_56_10_840/spec/mdc-checkbox/mixins/touch-dimension.html.windows_firefox_65.png", "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/mixins/touch-dimension.html.windows_ie_11.png" } }, diff --git a/test/screenshot/spec/mdc-chips/classes/choice.html b/test/screenshot/spec/mdc-chips/classes/choice.html index 3322dd10d09..34bc117ca43 100644 --- a/test/screenshot/spec/mdc-chips/classes/choice.html +++ b/test/screenshot/spec/mdc-chips/classes/choice.html @@ -44,16 +44,16 @@
- - - -
@@ -61,16 +61,16 @@
- - - -
diff --git a/test/screenshot/spec/mdc-chips/classes/filter.html b/test/screenshot/spec/mdc-chips/classes/filter.html index 836e56d6ba3..b9b0d87e6d0 100644 --- a/test/screenshot/spec/mdc-chips/classes/filter.html +++ b/test/screenshot/spec/mdc-chips/classes/filter.html @@ -44,16 +44,16 @@
- - - -
@@ -61,7 +61,7 @@
- - - - - - - - - -