[CheckableButton] Border disappears on tab focus

[lhoffbeck]

Issue summary

Noticed this initially in the @shopify/web admin, issue here.

On the BulkActions component, when the CheckableButton is focused, the right border disappears:

(Example from the polaris resource list with bulk actions documentation):

Expected behavior

Focusing checkbox shouldn't remove the right border

Actual behavior

Focusing checkbox does remove the right border

10-40-i14sa-hxl32.video.mp4

Specifications

• Are you using the React components? (Y/N):
• Polaris version number:
• Browser:
• Device:
• Operating System:

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

 System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 452.45 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.13.0 - ~/.dev/yarn/v1.13.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 88.0.4324.150
    Chrome Canary: 90.0.4414.0
    Firefox: 85.0.1
    Firefox Developer Edition: 85.0
    Safari: 13.1.3
  npmPackages:
    react: ^16.9.0 => 16.9.0 
    react-dom: ^16.9.0 => 16.9.0