fix: convert many toggle buttons into regular buttons (#1643)

work on #1633
2019-11-17 21:23:32 -05:00 · 2019-11-17 21:23:32 -05:00 · 568a3f51fe
commit 568a3f51fe
--- a/src/routes/_components/IconButton.html
+++ b/src/routes/_components/IconButton.html
@ -1,10 +1,12 @@
 <!-- Toggle buttons should have an immutable label, e.g. a mute/unmute button should just always say
     "mute." For sighted users, though, I think it's nice if the title changes when the action changes.
-     See http://w3c.github.io/aria-practices/#button -->
+     See http://w3c.github.io/aria-practices/#button
+     We also have toggleButton === false which can make it just a normal button that changes its aria-label.
+     -->
 <button type="button"
-        title={pressable ? (pressed ? pressedLabel : label) : label}
-        aria-label={label}
-        aria-pressed={pressable ? !!pressed : undefined}
+        {title}
+        aria-label={ariaLabel}
+        aria-pressed={ariaPressed}
        aria-hidden={ariaHidden ? 'true' : undefined}
        tabindex="{ariaHidden ? '-1' : '0'}"
        class={computedClass}
@ -130,21 +132,29 @@
      className: undefined,
      sameColorWhenPressed: false,
      ariaHidden: false,
-      clickListener: true
+      clickListener: true,
+      toggleButton: true // whether or not to actually present it as a toggle button to screen readers (when pressable)
    }),
    store: () => store,
    computed: {
-      computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => {
-        return classname(
-          'icon-button',
-          !pressable && 'not-pressable',
-          pressed && 'pressed',
-          big && 'big-icon',
-          muted && 'muted-style',
-          sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
-          className
-        )
-      }
+      computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => (classname(
+        'icon-button',
+        !pressable && 'not-pressable',
+        pressed && 'pressed',
+        big && 'big-icon',
+        muted && 'muted-style',
+        sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
+        className
+      )),
+      title: ({ pressable, pressed, pressedLabel, label }) => pressable ? (pressed ? pressedLabel : label) : label,
+      ariaLabel: ({ toggleButton, pressable, pressed, label, pressedLabel }) => {
+        if (!pressable || toggleButton) {
+          return label // per Aria Practices, toggleButtons never change their label
+        } else {
+          return pressed ? pressedLabel : label
+        }
+      },
+      ariaPressed: ({ toggleButton, pressable, pressed }) => (toggleButton && pressable) ? !!pressed : undefined
    },
    methods: {
      animate (animation) {
--- a/src/routes/_components/profile/AccountProfileFollow.html
+++ b/src/routes/_components/profile/AccountProfileFollow.html
@ -2,7 +2,7 @@
  <!--
    This button has a few different states.
     - If we're blocking, then it's a normal non-toggle button that unblocks.
-     - Otherwise it's a toggle button that changes whether we're following the account or not.
+     - Otherwise it's a pseudo-toggle button that changes whether we're following the account or not.
     - If a follow is requested, then the button is pressed but shows as "follow requested" with
       a different icon.
  -->
@ -13,6 +13,7 @@
    {href}
    {pressable}
    {pressed}
+    toggleButton={false}
    big={!$isVeryTinyMobileSize}
    on:click="onFollowButtonClick(event)"
    ref:icon
--- a/src/routes/_components/status/StatusToolbar.html
+++ b/src/routes/_components/status/StatusToolbar.html
@ -3,8 +3,9 @@
    className="status-toolbar-reply-button"
    label={replyLabel}
    pressedLabel="Close reply"
-    pressable="true"
+    pressable={true}
    pressed={replyShown}
+    toggleButton={false}
    href={replyIcon}
    clickListener={false}
    elementId={replyKey}
@ -14,6 +15,7 @@
    pressedLabel="Unboost"
    pressable={!reblogDisabled}
    pressed={reblogged}
+    toggleButton={false}
    disabled={reblogDisabled}
    href={reblogIcon}
    clickListener={false}
@ -23,8 +25,9 @@
  <IconButton
    label="Favorite"
    pressedLabel="Unfavorite"
-    pressable="true"
+    pressable={true}
    pressed={favorited}
+    toggleButton={false}
    href="#fa-star"
    clickListener={false}
    elementId={favoriteKey}
--- a/tests/spec/007-account-profile.js
+++ b/tests/spec/007-account-profile.js
@ -19,7 +19,6 @@ test('shows account profile', async t => {
    .expect(accountProfileUsername.innerText).contains('@quux')
    .expect(accountProfileFollowedBy.innerText).match(/follows you/i)
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
 })

 test('shows account profile 2', async t => {
@ -30,9 +29,8 @@ test('shows account profile 2', async t => {
    .expect(accountProfileName.innerText).contains('admin')
    .expect(accountProfileUsername.innerText).contains('@admin')
    .expect(accountProfileFollowedBy.innerText).match(/follows you/i)
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
 })

 test('shows account profile 3', async t => {
--- a/tests/spec/011-reblog-favorites-count.js
+++ b/tests/spec/011-reblog-favorites-count.js
@ -2,8 +2,8 @@ import { Selector as $ } from 'testcafe'
 import {
  favoritesCountElement,
  getFavoritesCount,
-  getNthFavoriteButton,
-  getNthReblogButton,
+  getNthFavoritedLabel,
+  getNthRebloggedLabel,
  getNthStatus,
  getReblogsCount,
  getUrl,
@ -22,7 +22,7 @@ test('shows favorites', async t => {
    .expect(getNthStatus(1).exists).ok()
    .expect(getFavoritesCount()).eql(2)
    .expect(favoritesCountElement.getAttribute('aria-label')).eql('Favorited 2 times')
-    .expect(getNthFavoriteButton(1).getAttribute('aria-pressed')).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
    .click(favoritesCountElement)
    .expect(getUrl()).match(/\/statuses\/[^/]+\/favorites/)
    .expect($('.search-result-account-name').nth(0).innerText).eql('foobar')
@ -39,7 +39,7 @@ test('shows boosts', async t => {
    .expect(getNthStatus(1).exists).ok()
    .expect(getReblogsCount()).eql(1)
    .expect(reblogsCountElement.getAttribute('aria-label')).eql('Boosted 1 time')
-    .expect(getNthReblogButton(1).getAttribute('aria-pressed')).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .click(reblogsCountElement)
    .expect(getUrl()).match(/\/statuses\/[^/]+\/reblogs/)
    .expect($('.search-result-account-name').nth(0).innerText).eql('admin')
--- a/tests/spec/025-shortcuts-status.js
+++ b/tests/spec/025-shortcuts-status.js
@ -1,7 +1,7 @@
 import {
  closeDialogButton,
  composeModalInput,
-  getNthFavorited,
+  getNthFavoritedLabel,
  getNthStatus,
  getNthStatusContent,
  getNthStatusMediaImg,
@ -117,13 +117,13 @@ test('Shortcut f toggles favorite status', async t => {
  await t
    .expect(getUrl()).eql('http://localhost:4002/')
    .expect(getNthStatus(1 + idx).exists).ok({ timeout: 30000 })
-    .expect(getNthFavorited(1 + idx)).eql('false')
+    .expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
    .pressKey('j '.repeat(idx + 1))
    .expect(isNthStatusActive(1 + idx)()).ok()
    .pressKey('f')
-    .expect(getNthFavorited(1 + idx)).eql('true')
+    .expect(getNthFavoritedLabel(1 + idx)).eql('Unfavorite')
    .pressKey('f')
-    .expect(getNthFavorited(1 + idx)).eql('false')
+    .expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
 })

 test('Shortcut p toggles profile', async t => {
--- a/tests/spec/026-shortcuts-notification.js
+++ b/tests/spec/026-shortcuts-notification.js
@ -1,7 +1,7 @@
 import {
  closeDialogButton,
  composeModalInput,
-  getNthFavorited,
+  getNthFavoritedLabel,
  getNthStatus,
  getUrl, modalDialog, notificationsNavButton,
  isNthStatusActive, goBack
@ -19,13 +19,13 @@ test('Shortcut f toggles favorite status in notification', async t => {
    .click(notificationsNavButton)
    .expect(getUrl()).contains('/notifications')
    .expect(getNthStatus(1 + idx).exists).ok({ timeout: 30000 })
-    .expect(getNthFavorited(1 + idx)).eql('false')
+    .expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
    .pressKey('j '.repeat(idx + 1))
    .expect(isNthStatusActive(1 + idx)()).ok()
    .pressKey('f')
-    .expect(getNthFavorited(1 + idx)).eql('true')
+    .expect(getNthFavoritedLabel(1 + idx)).eql('Unfavorite')
    .pressKey('f')
-    .expect(getNthFavorited(1 + idx)).eql('false')
+    .expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
 })

 test('Shortcut p toggles profile in a follow notification', async t => {
--- a/tests/spec/100-favorite-unfavorite.js
+++ b/tests/spec/100-favorite-unfavorite.js
@ -1,7 +1,7 @@
 import {
  getFavoritesCount,
  getNthFavoriteButton,
-  getNthFavorited,
+  getNthFavoritedLabel,
  getNthStatus,
  getNthStatusContent,
  getUrl,
@ -23,9 +23,9 @@ test('favorites a status', async t => {
  await t
    .expect(getNthStatusContent(1).innerText).contains('favorite me')
    .hover(getNthStatus(1))
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')
    .click(getNthFavoriteButton(1))
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')

  // scroll down and back up to force an unrender
  await scrollToBottom()
@ -33,18 +33,18 @@ test('favorites a status', async t => {
  await scrollToTop()
  await t
    .hover(getNthStatus(1))
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
    .click(notificationsNavButton)
    .click(homeNavButton)
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
    .click(notificationsNavButton)
    .expect(getUrl()).contains('/notifications')
    .click(homeNavButton)
    .expect(getUrl()).eql('http://localhost:4002/')
    .hover(getNthStatus(1))
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
    .click(getNthFavoriteButton(1))
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')
 })

 test('unfavorites a status', async t => {
@ -53,24 +53,24 @@ test('unfavorites a status', async t => {
  await loginAsFoobar(t)
  await t
    .expect(getNthStatusContent(1).innerText).contains('favorite this one too')
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
    .click(getNthFavoriteButton(1))
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')

  // scroll down and back up to force an unrender
  await scrollToBottom()
  await sleep(1)
  await scrollToTop()
  await t
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')
    .click(notificationsNavButton)
    .click(homeNavButton)
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')
    .click(notificationsNavButton)
    .navigateTo('/')
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')
    .click(getNthFavoriteButton(1))
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
 })

 test('Keeps the correct favorites count', async t => {
@ -81,18 +81,18 @@ test('Keeps the correct favorites count', async t => {
    .expect(getNthStatusContent(1).innerText).contains('favorite this twice pls')
    .hover(getNthStatus(1))
    .click(getNthFavoriteButton(1))
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
    .click(getNthStatus(1))
    .expect(getUrl()).contains('/status')
-    .expect(getNthFavorited(1)).eql('true')
+    .expect(getNthFavoritedLabel(1)).eql('Unfavorite')
    .expect(getFavoritesCount()).eql(2)
    .click(homeNavButton)
    .expect(getUrl()).eql('http://localhost:4002/')
    .hover(getNthStatus(1))
    .click(getNthFavoriteButton(1))
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')
    .click(getNthStatus(1))
    .expect(getUrl()).contains('/status')
-    .expect(getNthFavorited(1)).eql('false')
+    .expect(getNthFavoritedLabel(1)).eql('Favorite')
    .expect(getFavoritesCount()).eql(1)
 })
--- a/tests/spec/101-reblog-unreblog.js
+++ b/tests/spec/101-reblog-unreblog.js
@ -1,5 +1,5 @@
 import {
-  getNthReblogButton, getNthReblogged, getNthStatus, getNthStatusContent, getReblogsCount, getUrl, homeNavButton,
+  getNthReblogButton, getNthRebloggedLabel, getNthStatus, getNthStatusContent, getReblogsCount, getUrl, homeNavButton,
  notificationsNavButton, scrollToBottom, scrollToTop, sleep
 } from '../utils'
 import { loginAsFoobar } from '../roles'
@ -14,9 +14,9 @@ test('reblogs a status', async t => {
  await t
    .hover(getNthStatus(1))
    .expect(getNthStatusContent(1).innerText).contains('should be reblogged')
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .click(getNthReblogButton(1))
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')

  // scroll down and back up to force an unrender
  await scrollToBottom()
@ -24,17 +24,17 @@ test('reblogs a status', async t => {
  await scrollToTop()
  await t
    .hover(getNthStatus(1))
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')
    .click(notificationsNavButton)
    .click(homeNavButton)
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')
    .click(notificationsNavButton)
    .expect(getUrl()).contains('/notifications')
    .click(homeNavButton)
    .expect(getUrl()).eql('http://localhost:4002/')
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')
    .click(getNthReblogButton(1))
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
 })

 test('unreblogs a status', async t => {
@ -43,11 +43,11 @@ test('unreblogs a status', async t => {
  await t
    .hover(getNthStatus(1))
    .expect(getNthStatusContent(1).innerText).contains('woot i wanna')
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .click(getNthReblogButton(1))
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')
    .click(getNthReblogButton(1))
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')

  // scroll down and back up to force an unrender
  await scrollToBottom()
@ -55,15 +55,15 @@ test('unreblogs a status', async t => {
  await scrollToTop()
  await t
    .hover(getNthStatus(1))
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .click(notificationsNavButton)
    .click(homeNavButton)
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .click(notificationsNavButton)
    .navigateTo('/')
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .click(getNthReblogButton(1))
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')
 })

 test('Keeps the correct reblogs count', async t => {
@ -74,18 +74,18 @@ test('Keeps the correct reblogs count', async t => {
  await t
    .hover(getNthStatus(1))
    .expect(getNthStatusContent(1).innerText).contains('this will be reblogged')
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')
    .click(getNthStatus(1))
    .expect(getUrl()).contains('/status')
-    .expect(getNthReblogged(1)).eql('true')
+    .expect(getNthRebloggedLabel(1)).eql('Unboost')
    .expect(getReblogsCount()).eql(2)
    .click(homeNavButton)
    .expect(getUrl()).eql('http://localhost:4002/')
    .hover(getNthStatus(1))
    .click(getNthReblogButton(1))
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .click(getNthStatus(1))
    .expect(getUrl()).contains('/status')
-    .expect(getNthReblogged(1)).eql('false')
+    .expect(getNthRebloggedLabel(1)).eql('Boost')
    .expect(getReblogsCount()).eql(1)
 })
--- a/tests/spec/106-follow-requests.js
+++ b/tests/spec/106-follow-requests.js
@ -18,19 +18,15 @@ test('can request to follow an account', async t => {
    .navigateTo('/accounts/6')
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
    .click(accountProfileFollowButton)
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow (follow requested)')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow (follow requested)')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow (follow requested)')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
    .click(accountProfileFollowButton)
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
    .click(accountProfileFollowButton)
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow (follow requested)')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow (follow requested)')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow (follow requested)')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')

  const requests = await getFollowRequestsAs('LockedAccount')
  await authorizeFollowRequestAs('LockedAccount', requests.slice(-1)[0].id)
@ -38,12 +34,10 @@ test('can request to follow an account', async t => {
  await sleep(2000)

  await t.navigateTo('/accounts/6')
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
    .expect(getNthStatus(1).innerText).contains('This account is locked')
    .click(accountProfileFollowButton)
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
 })
--- a/tests/spec/113-block-unblock.js
+++ b/tests/spec/113-block-unblock.js
@ -29,16 +29,13 @@ test('Can block and unblock an account from a status', async t => {
    .expect(accountProfileFollowedBy.innerText).match(/blocked/i)
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unblock')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unblock')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql(undefined)
    .click(accountProfileFollowButton)
    .expect(accountProfileFollowedBy.innerText).contains('')
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
    .click(accountProfileFollowButton)
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
 })

 test('Can block and unblock an account from the account profile page', async t => {
@ -55,18 +52,14 @@ test('Can block and unblock an account from the account profile page', async t =
    .expect(accountProfileFollowedBy.innerText).match(/blocked/i)
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unblock')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unblock')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql(undefined)
    .click(accountProfileFollowButton)
    .expect(accountProfileFollowedBy.innerText).contains('')
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
    .click(accountProfileFollowButton)
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
    .click(accountProfileFollowButton)
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
 })
--- a/tests/spec/114-mute-unmute.js
+++ b/tests/spec/114-mute-unmute.js
@ -60,7 +60,6 @@ test('Can mute and unmute an account', async t => {
  await sleep(1000)
  await t
    .click(closeDialogButton)
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
 })
--- a/tests/spec/115-follow-unfollow.js
+++ b/tests/spec/115-follow-unfollow.js
@ -15,25 +15,21 @@ test('Can follow and unfollow an account from the profile page', async t => {
  await t
    .navigateTo('/accounts/5')
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
    .click(accountProfileMoreOptionsButton)
    .expect(getNthDialogOptionsOption(1).innerText).contains('Mention @baz')
    .expect(getNthDialogOptionsOption(2).innerText).contains('Follow @baz')
    .click(getNthDialogOptionsOption(2))
-    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
+    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Unfollow')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Unfollow')
    .click(accountProfileMoreOptionsButton)
    .expect(getNthDialogOptionsOption(2).innerText).contains('Unfollow @baz')
    .click(getNthDialogOptionsOption(2))
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
    .click(accountProfileMoreOptionsButton)
    .expect(getNthDialogOptionsOption(2).innerText).contains('Follow @baz')
    .click(closeDialogButton)
    .expect(accountProfileFollowButton.getAttribute('aria-label')).eql('Follow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('false')
    .expect(accountProfileFollowButton.getAttribute('title')).eql('Follow')
 })
--- a/tests/spec/117-pin-unpin.js
+++ b/tests/spec/117-pin-unpin.js
@ -46,11 +46,11 @@ test('Can favorite a pinned status', async t => {
  await t
    .click(avatarInComposeBox)
    .expect(getNthPinnedStatus(1).getAttribute('aria-setsize')).eql('1')
-    .expect(getNthPinnedStatusFavoriteButton(1).getAttribute('aria-pressed')).eql('false')
+    .expect(getNthPinnedStatusFavoriteButton(1).getAttribute('aria-label')).eql('Favorite')
    .click(getNthPinnedStatusFavoriteButton(1))
-    .expect(getNthPinnedStatusFavoriteButton(1).getAttribute('aria-pressed')).eql('true')
+    .expect(getNthPinnedStatusFavoriteButton(1).getAttribute('aria-label')).eql('Unfavorite')
    .click(getNthPinnedStatusFavoriteButton(1))
-    .expect(getNthPinnedStatusFavoriteButton(1).getAttribute('aria-pressed')).eql('false')
+    .expect(getNthPinnedStatusFavoriteButton(1).getAttribute('aria-label')).eql('Favorite')
 })

 test('Saved pinned/unpinned state of status', async t => {
--- a/tests/spec/119-status-counts-update.js
+++ b/tests/spec/119-status-counts-update.js
@ -34,7 +34,7 @@ test('Fav stats update', async t => {
    .expect(getFavoritesCount()).eql(4)
 })

-test('Reblog stats update', async t => {
+test('Boost stats update', async t => {
  const status = await postAs('foobar', 'oh why hello it looks like another toot')
  const statusId = status.id
  await reblogStatusAs('admin', statusId)
--- a/tests/utils.js
+++ b/tests/utils.js
@ -404,8 +404,8 @@ export function getNthStatusOptionsButton (n) {
  return $(`${getNthStatusSelector(n)} .status-toolbar button:nth-child(4)`)
 }

-export function getNthFavorited (n) {
-  return getNthFavoriteButton(n).getAttribute('aria-pressed')
+export function getNthFavoritedLabel (n) {
+  return getNthFavoriteButton(n).getAttribute('aria-label')
 }

 export function getNthShowOrHideButton (n) {
@ -420,8 +420,8 @@ export function getNthReblogButton (n) {
  return $(`${getNthStatusSelector(n)} .status-toolbar button:nth-child(2)`)
 }

-export function getNthReblogged (n) {
-  return getNthReblogButton(n).getAttribute('aria-pressed')
+export function getNthRebloggedLabel (n) {
+  return getNthReblogButton(n).getAttribute('aria-label')
 }

 export function getNthDialogOptionsOption (n) {