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

work on #1633

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}
+        {title}
-        aria-label={label}
+        aria-label={ariaLabel}
-        aria-pressed={pressable ? !!pressed : undefined}
+        aria-pressed={ariaPressed}
         aria-hidden={ariaHidden ? 'true' : undefined}
         tabindex="{ariaHidden ? '-1' : '0'}"
         class={computedClass}
@@ -130,12 +132,12 @@
       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 }) => {
+      computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => (classname(
-        return classname(
         'icon-button',
         !pressable && 'not-pressable',
         pressed && 'pressed',
@@ -143,9 +145,17 @@
         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) {
         this.refs.svg.animate(animation)

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

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}

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 => {

tests/spec/011-reblog-favorites-count.js

@@ -2,8 +2,8 @@ import { Selector as $ } from 'testcafe'
 import {
   favoritesCountElement,
   getFavoritesCount,
-  getNthFavoriteButton,
+  getNthFavoritedLabel,
-  getNthReblogButton,
+  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')

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 => {

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 => {

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)
 })

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)
 })

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')
 })

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')
 })

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')
 })

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-label')).eql('Unfollow')
-    .expect(accountProfileFollowButton.getAttribute('aria-pressed')).eql('true')
     .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')
 })

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 => {

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)

tests/utils.js

@@ -404,8 +404,8 @@ export function getNthStatusOptionsButton (n) {
   return $(`${getNthStatusSelector(n)} .status-toolbar button:nth-child(4)`)
 }
 
-export function getNthFavorited (n) {
+export function getNthFavoritedLabel (n) {
-  return getNthFavoriteButton(n).getAttribute('aria-pressed')
+  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) {
+export function getNthRebloggedLabel (n) {
-  return getNthReblogButton(n).getAttribute('aria-pressed')
+  return getNthReblogButton(n).getAttribute('aria-label')
 }
 
 export function getNthDialogOptionsOption (n) {