fix: icon button pressed state wasn't setting aria attrs without toggle

Author: hperrin

MIGRATING.md

@@ -37,6 +37,8 @@ There are [newly updated instructiong](INSTALL.md#integration-for-sapper) for us
   - Open state is now controled by an `open` prop, instead of `open` and `close` functions. There are also `isOpen` and `setOpen` functions.
   - Lists should now be placed below `Content` element, rather than being the `Content` component. For selection from a list, use the new `selection` prop on the dialog.
   - Slider dialogs are styled a bit differently. See the [demo](https://sveltematerialui.com/demo/dialog/).
+- Icon Button
+  - No longer emit 'MDCIconButtonToggle:change' event without the `toggle` prop. Instead, listen for click event.
 - Linear Progress
   - Removed `reversed` prop.
 - List

packages/icon-button/IconButton.svelte

@@ -20,7 +20,7 @@
   class={classMap({
     [className]: true,
     'mdc-icon-button': true,
-    'mdc-icon-button--on': pressed,
+    'mdc-icon-button--on': pressed !== uninitializedValue && pressed,
     'mdc-card__action': context === 'card:action',
     'mdc-card__action--icon': context === 'card:action',
     'mdc-top-app-bar__navigation-icon': context === 'top-app-bar:navigation',
@@ -35,7 +35,11 @@
     .map(([name, value]) => `${name}: ${value};`)
     .concat([style])
     .join(' ')}
-  aria-pressed={toggle ? (pressed ? 'true' : 'false') : null}
+  aria-pressed={pressed !== uninitializedValue
+    ? pressed
+      ? 'true'
+      : 'false'
+    : null}
   aria-label={pressed ? ariaLabelOn : ariaLabelOff}
   data-aria-label-on={ariaLabelOn}
   data-aria-label-off={ariaLabelOff}
@@ -64,6 +68,7 @@
   import Button from '@smui/common/Button.svelte';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
+  let uninitializedValue = () => {};
 
   export let use = [];
   let className = '';
@@ -72,7 +77,7 @@
   export let ripple = true;
   export let color = null;
   export let toggle = false;
-  export let pressed = false;
+  export let pressed = uninitializedValue;
   export let ariaLabelOn = null;
   export let ariaLabelOff = null;
   export let href = null;

site/src/routes/demo/icon-button/_Toggle.svelte

@@ -9,27 +9,23 @@
     <Icon class="material-icons" on>alarm_on</Icon>
     <Icon class="material-icons">alarm_off</Icon>
   </IconButton>
-  <div>
-    <Button on:click={() => (initialOn = !initialOn)}>
-      <Label>Toggle Programmatically</Label>
-    </Button>
-    &nbsp;(Note: this doesn't fire the&nbsp;
-    <code>MDCIconButtonToggle:change</code> &nbsp;event.)
-  </div>
+
+  <!-- Note: this doesn't fire the MDCIconButtonToggle:change event. -->
+  <Button on:click={() => (initialOn = !initialOn)}>
+    <Label>Toggle Programmatically</Label>
+  </Button>
 </div>
 <div style="display: flex; align-items: center;">
+  <!-- Note: don't use `toggle` prop in this case. -->
   <IconButton
     on:click={() => toggleClicked++}
-    on:MDCIconButtonToggle:change={() => (usingEvents = !usingEvents)}
+    on:click={() => (usingEvents = !usingEvents)}
     pressed={usingEvents}
   >
     <Icon class="material-icons" on>bookmark</Icon>
     <Icon class="material-icons">bookmark_border</Icon>
   </IconButton>
-  <div>
-    Using events instead of bound variables. (Note: don't use&nbsp;
-    <code>toggle</code> &nbsp;prop in this case.)
-  </div>
+  <div>Using events instead of bound variables.</div>
 </div>
 
 <pre class="status">Clicked: {toggleClicked}</pre>