Repository: mapbox/mr-ui
Pull request #104 (2020-03-03 18:33:25)

Add aria to all button components, examples, and tests
I've been monitoring our Lighthouse Accessibility score and see some opportunities to improve our buttons. For example:

> When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. [Learn more.](https://web.dev/button-name/)"

The account dashboard mostly uses `CopyButton` and `Copiable`, but this PR looks to change all components, examples, and tests that use `<button>` or our custom `Button` component to encourage ARIA for now. For `<button>` the `aria-label` defaults to the `label` or `id` provided to the button (whichever is a string); if a `Tooltip` is wrapping the `<button>`, then the `aria-label` will match the text in the `Tooltip`. For `Button`, users will need to use `passthroughProps` and determine if they want to use `aria`; though all our examples and test cases will encourage `aria` for our own accessibility purposes.


Patch:
diff --git a/src/components/accordion-item/accordion-item.js b/src/components/accordion-item/accordion-item.js
index 3d5f633..53cabdf 100644
--- a/src/components/accordion-item/accordion-item.js
+++ b/src/components/accordion-item/accordion-item.js
@@ -63,6 +63,7 @@ export default class AccordionItem extends React.Component {
     return (
       <div className={themeItem}>
         <button
+          aria-label="Toggle"
           className={buttonClasses}
           disabled={disabled}
           data-test={id}
diff --git a/src/components/button/examples/button-a.js b/src/components/button/examples/button-a.js
index 05b672e..5d5671b 100644
--- a/src/components/button/examples/button-a.js
+++ b/src/components/button/examples/button-a.js
@@ -9,30 +9,30 @@ export default class Example extends React.Component {
     return (
       <div>
         <div className="my6">
-          <Button onClick={noop}>Primary</Button>
+          <Button onClick={noop} passthroughProps={{ 'aria-label': 'Primary' }}>Primary</Button>
         </div>
         <div className="my6">
-          <Button variant="secondary" onClick={noop}>
+          <Button variant="secondary" onClick={noop} passthroughProps={{ 'aria-label': 'Primary' }}>
             Secondary
           </Button>
         </div>
         <div className="my6">
-          <Button variant="discouraging" onClick={noop}>
+          <Button variant="discouraging" onClick={noop} passthroughProps={{ 'aria-label': 'Discouraging' }}>
             Discouraging
           </Button>
         </div>
         <div className="my6">
-          <Button variant="destructive" onClick={noop}>
+          <Button variant="destructive" onClick={noop} passthroughProps={{ 'aria-label': 'Destructive' }}>
             Destructive
           </Button>
         </div>
         <div className="my6">
-          <Button variant="appPrimary" onClick={noop}>
+          <Button variant="appPrimary" onClick={noop} passthroughProps={{ 'aria-label': 'AppPrimary' }}>
             AppPrimary
           </Button>
         </div>
         <div className="my6">
-          <Button variant="appSecondary" onClick={noop}>
+          <Button variant="appSecondary" onClick={noop} passthroughProps={{ 'aria-label': 'AppSecondary' }}>
             AppSecondary
           </Button>
         </div>
diff --git a/src/components/button/examples/button-b.js b/src/components/button/examples/button-b.js
index bfe5505..76bc787 100644
--- a/src/components/button/examples/button-b.js
+++ b/src/components/button/examples/button-b.js
@@ -8,7 +8,7 @@ import IconText from '../../icon-text';
 export default class Example extends React.Component {
   render() {
     return (
-      <Button onClick={() => {}} width="large" outline={true} color="purple">
+      <Button onClick={() => {}} width="large" outline={true} color="purple" passthroughProps={{ 'aria-label': 'Save your map' }}>
         <IconText iconBefore="floppy">Save your map</IconText>
       </Button>
     );
diff --git a/src/components/button/examples/button-d.js b/src/components/button/examples/button-d.js
index 26ea970..62c2750 100644
--- a/src/components/button/examples/button-d.js
+++ b/src/components/button/examples/button-d.js
@@ -13,17 +13,17 @@ export default class Example extends React.Component {
       <div>
         <div className="mb24 flex-parent">
           <div className="flex-child w120 mr12">
-            <Button size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop} passthroughProps={{ 'aria-label': 'Click door button' }}>
               Door
             </Button>
           </div>
           <div className="flex-child w120 mr12">
-            <Button size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop} passthroughProps={{ 'aria-label': 'Click dog button' }}>
               Dog
             </Button>
           </div>
           <div className="flex-child w120 mr12">
-            <Button size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop} passthroughProps={{ 'aria-label': 'Click dash button' }}>
               Dash
             </Button>
           </div>
@@ -35,6 +35,7 @@ export default class Example extends React.Component {
               size="medium"
               width="full"
               onClick={noop}
+              passthroughProps={{ 'aria-label': 'Click button A' }}
             >
               A
             </Button>
@@ -45,6 +46,7 @@ export default class Example extends React.Component {
               size="medium"
               width="full"
               onClick={noop}
+              passthroughProps={{ 'aria-label': 'Click button B' }}
             >
               B
             </Button>
@@ -55,6 +57,7 @@ export default class Example extends React.Component {
               size="medium"
               width="full"
               onClick={noop}
+              passthroughProps={{ 'aria-label': 'Click button C' }}
             >
               C
             </Button>
diff --git a/src/components/control-alert/control-alert.js b/src/components/control-alert/control-alert.js
index 43b620c..5e13c1d 100644
--- a/src/components/control-alert/control-alert.js
+++ b/src/components/control-alert/control-alert.js
@@ -54,6 +54,7 @@ export default class ControlAlert extends React.Component {
     return (
       <Tooltip content="Dismiss" block={true}>
         <button
+          aria-label="Dismiss"
           className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
           data-test="alert-dismiss"
           onClick={this.onButtonClick}
diff --git a/src/components/control-alert/examples/control-alert-example-options.js b/src/components/control-alert/examples/control-alert-example-options.js
index 13f5a6d..2c6ddde 100644
--- a/src/components/control-alert/examples/control-alert-example-options.js
+++ b/src/components/control-alert/examples/control-alert-example-options.js
@@ -29,6 +29,7 @@ export default class Example extends React.Component {
     return (
       <div className="flex-parent flex-parent--end-main mr18 mb18">
         <button
+          aria-label="Show alert again"
           className="color-gray-dark color-blue-on-hover flex-child"
           onClick={this.toggleAlert}
           type="button"
diff --git a/src/components/control-card/control-card.js b/src/components/control-card/control-card.js
index b4dafb3..f7116a7 100644
--- a/src/components/control-card/control-card.js
+++ b/src/components/control-card/control-card.js
@@ -67,6 +67,7 @@ export default class ControlCard extends React.Component {
       <div className="absolute top right mt18 mr18">
         <Tooltip content={toolTipMessage} block={true}>
           <button
+            aria-label={toolTipMessage}
             type="button"
             className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
             onClick={onButtonClick}
diff --git a/src/components/control-card/examples/control-card-example-options.js b/src/components/control-card/examples/control-card-example-options.js
index 62b550a..40d9812 100644
--- a/src/components/control-card/examples/control-card-example-options.js
+++ b/src/components/control-card/examples/control-card-example-options.js
@@ -29,6 +29,7 @@ export default class Example extends React.Component {
     return (
       <div className="flex-parent flex-parent--end-main mr18 mb18">
         <button
+          aria-label="Show card"
           className="color-gray-dark color-blue-on-hover flex-child"
           onClick={this.toggleCard}
           type="button"
diff --git a/src/components/control-file/control-file.js b/src/components/control-file/control-file.js
index cf0c820..3872cdf 100644
--- a/src/components/control-file/control-file.js
+++ b/src/components/control-file/control-file.js
@@ -177,6 +177,7 @@ export default class ControlFile extends React.Component {
             <div className="flex-child">
               <Tooltip content="Clear" block={true}>
                 <button
+                  aria-label="Clear"
                   type="button"
                   className={`block link link--gray relative bg-transparent py0 ${themeControlFileClear}`}
                   onClick={this.onClear}
diff --git a/src/components/copy-button/copy-button.js b/src/components/copy-button/copy-button.js
index f9e1954..ea79c48 100644
--- a/src/components/copy-button/copy-button.js
+++ b/src/components/copy-button/copy-button.js
@@ -126,6 +126,7 @@ export default class CopyButton extends React.PureComponent {
         block={props.block}
       >
         <button
+          aria-label="Copy"
           type="button"
           className={buttonClasses}
           {...props.passthroughProps}
diff --git a/src/components/form-submit/form-submit.js b/src/components/form-submit/form-submit.js
index 8ef54a4..64150de 100644
--- a/src/components/form-submit/form-submit.js
+++ b/src/components/form-submit/form-submit.js
@@ -32,7 +32,7 @@ export default class FormSubmit extends React.PureComponent {
     };
 
     return (
-      <button type="button" className={themeButton} {...inputProps}>
+      <button aria-label={label} type="button" className={themeButton} {...inputProps}>
         {label}
       </button>
     );
diff --git a/src/components/icon-text/examples/icon-text-a.js b/src/components/icon-text/examples/icon-text-a.js
index 13d3e46..84bc7a4 100644
--- a/src/components/icon-text/examples/icon-text-a.js
+++ b/src/components/icon-text/examples/icon-text-a.js
@@ -7,7 +7,7 @@ import IconText from '../icon-text';
 export default class Example extends React.Component {
   render() {
     return (
-      <button type="button" className="link txt-bold txt-s block">
+      <button aria-label="Duplicate" type="button" className="link txt-bold txt-s block">
         <IconText iconBefore="duplicate">Duplicate</IconText>
       </button>
     );
diff --git a/src/components/icon-text/examples/icon-text-b.js b/src/components/icon-text/examples/icon-text-b.js
index ad4e7b7..362b1e1 100644
--- a/src/components/icon-text/examples/icon-text-b.js
+++ b/src/components/icon-text/examples/icon-text-b.js
@@ -7,7 +7,7 @@ import IconText from '../icon-text';
 export default class Example extends React.Component {
   render() {
     return (
-      <button type="button" className="link link-purple">
+      <button aria-label="Take me there" type="button" className="link link-purple">
         <IconText iconAfter="chevron-right">Take me there</IconText>
       </button>
     );
diff --git a/src/components/loader-full/examples/loader-full-example-basic.js b/src/components/loader-full/examples/loader-full-example-basic.js
index af5633e..7a2b650 100644
--- a/src/components/loader-full/examples/loader-full-example-basic.js
+++ b/src/components/loader-full/examples/loader-full-example-basic.js
@@ -27,7 +27,7 @@ export default class Example extends React.Component {
 
     return (
       <div>
-        <button className="btn btn--purple" onClick={this.showLoader}>
+        <button aria-label="Show loader" className="btn btn--purple" onClick={this.showLoader}>
           Show loader
         </button>
         {loader}
diff --git a/src/components/loader-full/examples/loader-full-example-opaque.js b/src/components/loader-full/examples/loader-full-example-opaque.js
index 2070f24..c29e27b 100644
--- a/src/components/loader-full/examples/loader-full-example-opaque.js
+++ b/src/components/loader-full/examples/loader-full-example-opaque.js
@@ -27,7 +27,7 @@ export default class Example extends React.Component {
 
     return (
       <div>
-        <button className="btn btn--purple" onClick={this.showLoader}>
+        <button aria-label="Show loader" className="btn btn--purple" onClick={this.showLoader}>
           Show loader
         </button>
         {loader}
diff --git a/src/components/modal/examples/modal-a.js b/src/components/modal/examples/modal-a.js
index 301202f..467e046 100644
--- a/src/components/modal/examples/modal-a.js
+++ b/src/components/modal/examples/modal-a.js
@@ -48,7 +48,7 @@ export default class Example extends React.Component {
   render() {
     return (
       <div>
-        <Button size="medium" onClick={this.openModal}>
+        <Button size="medium" onClick={this.openModal} passthroughProps={{ 'aria-label': 'Show modal' }}>
           Show modal
         </Button>
         {this.renderModal()}
diff --git a/src/components/modal/examples/modal-b.js b/src/components/modal/examples/modal-b.js
index 902f6af..83f8d7f 100644
--- a/src/components/modal/examples/modal-b.js
+++ b/src/components/modal/examples/modal-b.js
@@ -49,7 +49,7 @@ export default class Example extends React.Component {
           </div>
           <div className="align-center mt24">
             <input className="input mb12" id="modal-input" />
-            <Button size="medium" onClick={this.closeModal}>
+            <Button size="medium" onClick={this.closeModal} passthroughProps={{ 'aria-label': 'Done' }}>
               Ok, done
             </Button>
           </div>
@@ -61,7 +61,7 @@ export default class Example extends React.Component {
   render() {
     return (
       <div>
-        <Button size="medium" onClick={this.openModal}>
+        <Button size="medium" onClick={this.openModal} passthroughProps={{ 'aria-label': 'Show modal' }}>
           Show modal
         </Button>
         {this.renderModal()}
diff --git a/src/components/modal/modal-actions.js b/src/components/modal/modal-actions.js
index 38e1ac0..f1a81c3 100644
--- a/src/components/modal/modal-actions.js
+++ b/src/components/modal/modal-actions.js
@@ -16,6 +16,7 @@ export default class ModalActions extends React.Component {
           size="medium"
           onClick={props.secondaryAction.callback}
           data-test="secondary-modal-action"
+          passthroughProps={{ 'aria-label': props.secondaryAction.text }}
         >
           {props.secondaryAction.text}
         </Button>
@@ -36,6 +37,7 @@ export default class ModalActions extends React.Component {
     return (
       <div className="flex-child flex-child--grow flex-child--no-shrink mr12">
         <button
+          aria-label={props.tertiaryAction.text}
           type="button"
           className="link link--gray txt-bold txt-s"
           onClick={props.tertiaryAction.callback}
@@ -62,6 +64,7 @@ export default class ModalActions extends React.Component {
             size="medium"
             onClick={props.primaryAction.callback}
             data-test="primary-modal-action"
+            passthroughProps={{ 'aria-label': props.primaryAction.text }}
           >
             {props.primaryAction.text}
           </Button>
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index c48a29b..99fb72f 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -77,6 +77,7 @@ export default class Modal extends React.Component {
         <div className="absolute top right">
           <Tooltip block={true} content="Close">
             <button
+              aria-label="Close"
               type="button"
               className="btn btn--transparent unround-t unround-br color-gray py12 px12"
               onClick={props.onExit}
diff --git a/src/components/page-loading-indicator/examples/loader-full-example-basic.js b/src/components/page-loading-indicator/examples/loader-full-example-basic.js
index 868c8c3..73e4fa4 100644
--- a/src/components/page-loading-indicator/examples/loader-full-example-basic.js
+++ b/src/components/page-loading-indicator/examples/loader-full-example-basic.js
@@ -13,7 +13,7 @@ export default class Example extends React.Component {
   render() {
     return (
       <div>
-        <button className="btn btn--purple" onClick={this.show}>
+        <button aria-label="Show for 1 second" className="btn btn--purple" onClick={this.show}>
           Show for 1 second
         </button>
       </div>
diff --git a/src/components/popover-trigger/examples/popover-trigger-a.js b/src/components/popover-trigger/examples/popover-trigger-a.js
index c46bb80..6ff57e2 100644
--- a/src/components/popover-trigger/examples/popover-trigger-a.js
+++ b/src/components/popover-trigger/examples/popover-trigger-a.js
@@ -14,7 +14,7 @@ export default class Example extends React.Component {
     return (
       <div>
         <PopoverTrigger content={this.getPopoverContent}>
-          <Button size="medium">Trigger</Button>
+          <Button size="medium" passthroughProps={{ 'aria-label': 'Trigger' }}>Trigger</Button>
         </PopoverTrigger>
       </div>
     );
diff --git a/src/components/popover-trigger/examples/popover-trigger-b.js b/src/components/popover-trigger/examples/popover-trigger-b.js
index fa38039..be75e41 100644
--- a/src/components/popover-trigger/examples/popover-trigger-b.js
+++ b/src/components/popover-trigger/examples/popover-trigger-b.js
@@ -49,7 +49,7 @@ export default class Example extends React.Component {
             'data-test': 'trigger-container'
           }}
         >
-          <Button size="medium">Trigger</Button>
+          <Button size="medium" passthroughProps={{ 'aria-label': 'Trigger' }}>Trigger</Button>
         </PopoverTrigger>
       </div>
     );
diff --git a/src/components/popover/examples/popover-a.js b/src/components/popover/examples/popover-a.js
index 387c78e..2d457fd 100644
--- a/src/components/popover/examples/popover-a.js
+++ b/src/components/popover/examples/popover-a.js
@@ -54,6 +54,7 @@ export default class Example extends React.Component {
           onClick={this.togglePopover}
           size="medium"
           passthroughProps={{
+            'aria-label': 'Toggle popover',
             ref: this.setAnchor
           }}
         >
diff --git a/src/components/popover/examples/popover-b.js b/src/components/popover/examples/popover-b.js
index 524e0fa..bb0aa23 100644
--- a/src/components/popover/examples/popover-b.js
+++ b/src/components/popover/examples/popover-b.js
@@ -55,6 +55,7 @@ export default class Example extends React.Component {
           onClick={this.togglePopover}
           size="medium"
           passthroughProps={{
+            'aria-label': 'Toggle popover',
             ref: this.setAnchor
           }}
         >
diff --git a/src/components/popover/examples/popover-c.js b/src/components/popover/examples/popover-c.js
index f688fe2..36ffcb1 100644
--- a/src/components/popover/examples/popover-c.js
+++ b/src/components/popover/examples/popover-c.js
@@ -55,6 +55,7 @@ export default class Example extends React.Component {
           onClick={this.togglePopover}
           size="medium"
           passthroughProps={{
+            'aria-label': 'Toggle popover',
             ref: this.setAnchor
           }}
         >
diff --git a/src/components/tab-list/tab-list.js b/src/components/tab-list/tab-list.js
index 5ec1c48..b8b8e11 100644
--- a/src/components/tab-list/tab-list.js
+++ b/src/components/tab-list/tab-list.js
@@ -113,6 +113,7 @@ export default class TabList extends React.PureComponent {
       } else {
         renderedItem = (
           <button
+            aria-label={item.id}
             key={item.id}
             type="button"
             className={renderedItemClasses}
@@ -187,6 +188,7 @@ export default class TabList extends React.PureComponent {
           }}
         >
           <button
+            aria-label="More"
             className="px6 py12 mr12 align-l cursor-pointer none-mm"
             type="button"
           >
diff --git a/src/components/tooltip/examples/tooltip-a.js b/src/components/tooltip/examples/tooltip-a.js
index 866e65a..f8ff4f3 100644
--- a/src/components/tooltip/examples/tooltip-a.js
+++ b/src/components/tooltip/examples/tooltip-a.js
@@ -9,7 +9,7 @@ export default class Example extends React.Component {
   render() {
     return (
       <Tooltip content="Here's your tooltip">
-        <Button size="medium">Basic</Button>
+        <Button size="medium" passthroughProps={{ 'aria-label': 'Basic' }}>Basic</Button>
       </Tooltip>
     );
   }
diff --git a/src/components/underline-tabs/underline-tab-item.js b/src/components/underline-tabs/underline-tab-item.js
index af09955..9b9d371 100644
--- a/src/components/underline-tabs/underline-tab-item.js
+++ b/src/components/underline-tabs/underline-tab-item.js
@@ -86,7 +86,7 @@ class UnderlineTabItem extends React.PureComponent {
     }
 
     return (
-      <button type="button" {...universalProps}>
+      <button aria-label={label} type="button" {...universalProps}>
         {content}
       </button>
     );
diff --git a/src/docs/components/component-example.js b/src/docs/components/component-example.js
index 8057314..0982728 100644
--- a/src/docs/components/component-example.js
+++ b/src/docs/components/component-example.js
@@ -53,6 +53,7 @@ function ToggleCodeButton(props) {
   const text = props.codeIsVisible ? 'Hide code' : 'Show code';
   return (
     <button
+      aria-label={text}
       className="block btn btn--s btn--gray unround-b round-t"
       onClick={props.onClick}
     >


Test patch:
diff --git a/src/components/accordion-item/__tests__/__snapshots__/accordion-item.test.js.snap b/src/components/accordion-item/__tests__/__snapshots__/accordion-item.test.js.snap
index 50c539c..2e8129d 100644
--- a/src/components/accordion-item/__tests__/__snapshots__/accordion-item.test.js.snap
+++ b/src/components/accordion-item/__tests__/__snapshots__/accordion-item.test.js.snap
@@ -5,6 +5,7 @@ exports[`Accordion all options renders 1`] = `
   className="bg-red-faint border-b border--red-dark"
 >
   <button
+    aria-label="Toggle"
     className="w-full bg-red txt-l txt-bold link link--white bg-red-dark-on-hover px6 py6 cursor-pointer"
     data-test="one"
     onClick={[Function]}
@@ -24,6 +25,7 @@ exports[`Accordion all options renders 1`] = `
 exports[`Accordion basic renders 1`] = `
 <div>
   <button
+    aria-label="Toggle"
     className="w-full txt-s txt-bold txt-truncate link link--gray py6 cursor-pointer"
     data-test="one"
     onClick={[Function]}
@@ -38,6 +40,7 @@ exports[`Accordion basic renders 1`] = `
 exports[`Accordion disabled renders 1`] = `
 <div>
   <button
+    aria-label="Toggle"
     className="w-full txt-s txt-bold txt-truncate link link--gray py6 cursor-default color-gray-light"
     data-test="one"
     disabled={true}
diff --git a/src/components/button/__tests__/__snapshots__/button.test.js.snap b/src/components/button/__tests__/__snapshots__/button.test.js.snap
index 241e686..e753bcc 100644
--- a/src/components/button/__tests__/__snapshots__/button.test.js.snap
+++ b/src/components/button/__tests__/__snapshots__/button.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`AppPrimary renders as expected 1`] = `
 <button
+  aria-label="Example smaller app primary button"
   className="btn btn--gray round h24 px6 py3 txt-xs"
   disabled={false}
   onClick={[MockFunction]}
@@ -13,6 +14,7 @@ exports[`AppPrimary renders as expected 1`] = `
 
 exports[`AppSecondary renders as expected 1`] = `
 <button
+  aria-label="Example smaller app secondary button"
   className="btn btn--gray btn--stroke round h24 px6 py3 txt-xs"
   disabled={false}
   onClick={[MockFunction]}
@@ -24,6 +26,7 @@ exports[`AppSecondary renders as expected 1`] = `
 
 exports[`Destructive renders as expected 1`] = `
 <button
+  aria-label="Example destructive button"
   className="btn btn--red round-full py12 px24 txt-s"
   disabled={false}
   onClick={[MockFunction]}
@@ -35,6 +38,7 @@ exports[`Destructive renders as expected 1`] = `
 
 exports[`Disabled renders as expected 1`] = `
 <button
+  aria-hidden={true}
   className="btn btn--blue round-full py12 px24 txt-s"
   disabled={true}
   type="button"
@@ -45,6 +49,7 @@ exports[`Disabled renders as expected 1`] = `
 
 exports[`Discouraging renders as expected 1`] = `
 <button
+  aria-label="Example discouraging button"
   className="btn btn--gray btn--stroke btn--stroke--2 round-full py12 px24 txt-s"
   disabled={false}
   onClick={[MockFunction]}
@@ -56,6 +61,7 @@ exports[`Discouraging renders as expected 1`] = `
 
 exports[`Div styled like a medium destructive button with some elementAttributes renders as expected 1`] = `
 <div
+  aria-label="Example save button"
   className="btn btn--red round-full py6 px24 txt-s"
   data-test="foo"
   disabled={false}
@@ -68,6 +74,7 @@ exports[`Div styled like a medium destructive button with some elementAttributes
 
 exports[`Full width, alternate color renders as expected 1`] = `
 <button
+  aria-label="Example full width, purple button"
   className="btn btn--purple round-full py12 w-full block txt-s"
   disabled={false}
   type="button"
@@ -93,6 +100,7 @@ exports[`Link with outline and icon text, extra padding renders as expected 1`]
 
 exports[`Primary renders as expected 1`] = `
 <button
+  aria-label="Example primary button"
   className="btn btn--blue round-full py12 px24 txt-s"
   disabled={false}
   onClick={[MockFunction]}
@@ -104,6 +112,7 @@ exports[`Primary renders as expected 1`] = `
 
 exports[`Secondary renders as expected 1`] = `
 <button
+  aria-label="Example secondary button"
   className="btn btn--blue btn--stroke btn--stroke--2 round-full py12 px24 txt-s"
   disabled={false}
   onClick={[MockFunction]}
diff --git a/src/components/button/__tests__/button-test-cases.js b/src/components/button/__tests__/button-test-cases.js
index bee6a4e..80ec47b 100644
--- a/src/components/button/__tests__/button-test-cases.js
+++ b/src/components/button/__tests__/button-test-cases.js
@@ -10,7 +10,10 @@ testCases.primary = {
   component: Button,
   props: {
     children: 'Primary',
-    onClick: safeSpy()
+    onClick: safeSpy(),
+    passthroughProps: {
+      'aria-label': 'Example primary button'
+    }
   }
 };
 
@@ -20,7 +23,10 @@ testCases.secondary = {
   props: {
     children: 'Secondary',
     variant: 'secondary',
-    onClick: safeSpy()
+    onClick: safeSpy(),
+    passthroughProps: {
+      'aria-label': 'Example secondary button'
+    }
   }
 };
 
@@ -30,7 +36,10 @@ testCases.discouraging = {
   props: {
     children: 'Discouraging',
     variant: 'discouraging',
-    onClick: safeSpy()
+    onClick: safeSpy(),
+    passthroughProps: {
+      'aria-label': 'Example discouraging button'
+    }
   }
 };
 
@@ -40,7 +49,10 @@ testCases.destructive = {
   props: {
     children: 'Destructive',
     variant: 'destructive',
-    onClick: safeSpy()
+    onClick: safeSpy(),
+    passthroughProps: {
+      'aria-label': 'Example destructive button'
+    }
   }
 };
 
@@ -50,7 +62,10 @@ testCases.appPrimary = {
   props: {
     children: 'AppPrimary',
     variant: 'appPrimary',
-    onClick: safeSpy()
+    onClick: safeSpy(),
+    passthroughProps: {
+      'aria-label': 'Example smaller app primary button'
+    }
   }
 };
 
@@ -60,7 +75,10 @@ testCases.appSecondary = {
   props: {
     children: 'AppSecondary',
     variant: 'appSecondary',
-    onClick: safeSpy()
+    onClick: safeSpy(),
+    passthroughProps: {
+      'aria-label': 'Example smaller app secondary button'
+    }
   }
 };
 
@@ -82,7 +100,10 @@ testCases.fullWidthPurple = {
   props: {
     children: 'Here we are',
     color: 'purple',
-    width: 'full'
+    width: 'full',
+    passthroughProps: {
+      'aria-label': 'Example full width, purple button'
+    }
   }
 };
 
@@ -97,6 +118,7 @@ testCases.weird = {
     onClick: safeSpy(),
     component: 'div',
     passthroughProps: {
+      'aria-label': 'Example save button',
       role: 'button',
       'data-test': 'foo'
     }
@@ -108,7 +130,10 @@ testCases.disabled = {
   component: Button,
   props: {
     children: 'Oops',
-    disabled: true
+    disabled: true,
+    passthroughProps: {
+      'aria-hidden': true
+    }
   }
 };
 
@@ -119,7 +144,10 @@ testCases.disabledSecondary = {
     children: 'Oops',
     disabled: true,
     variant: 'secondary',
-    onClick: safeSpy()
+    onClick: safeSpy(),
+    passthroughProps: {
+      'aria-hidden': true
+    }
   }
 };
 
@@ -131,7 +159,10 @@ testCases.disabledSpecial = {
     variant: 'appPrimary',
     onClick: safeSpy(),
     disabled: true,
-    color: 'gray'
+    color: 'gray',
+    passthroughProps: {
+      'aria-hidden': true
+    }
   }
 };
 
diff --git a/src/components/control-alert/__tests__/__snapshots__/control-alert.test.js.snap b/src/components/control-alert/__tests__/__snapshots__/control-alert.test.js.snap
index 14798bd..8d60b78 100644
--- a/src/components/control-alert/__tests__/__snapshots__/control-alert.test.js.snap
+++ b/src/components/control-alert/__tests__/__snapshots__/control-alert.test.js.snap
@@ -131,6 +131,7 @@ exports[`ControlAlert dismissive multiline error onButtonClick is called 1`] = `
     textSize="s"
   >
     <button
+      aria-label="Dismiss"
       className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
       data-test="alert-dismiss"
       onClick={[Function]}
@@ -193,6 +194,7 @@ exports[`ControlAlert dismissive multiline error renders as expected 1`] = `
     textSize="s"
   >
     <button
+      aria-label="Dismiss"
       className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
       data-test="alert-dismiss"
       onClick={[Function]}
@@ -246,6 +248,7 @@ exports[`ControlAlert dismissive warning onButtonClick is called 1`] = `
     textSize="s"
   >
     <button
+      aria-label="Dismiss"
       className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
       data-test="alert-dismiss"
       onClick={[Function]}
@@ -299,6 +302,7 @@ exports[`ControlAlert dismissive warning renders as expected 1`] = `
     textSize="s"
   >
     <button
+      aria-label="Dismiss"
       className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
       data-test="alert-dismiss"
       onClick={[Function]}
diff --git a/src/components/control-card/__tests__/__snapshots__/control-card.test.js.snap b/src/components/control-card/__tests__/__snapshots__/control-card.test.js.snap
index 05c6d92..c3c96b3 100644
--- a/src/components/control-card/__tests__/__snapshots__/control-card.test.js.snap
+++ b/src/components/control-card/__tests__/__snapshots__/control-card.test.js.snap
@@ -37,6 +37,7 @@ exports[`ControlCard collapsible onButtonClick is called 1`] = `
       textSize="s"
     >
       <button
+        aria-label="Collapse"
         className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
         onClick={
           [MockFunction] {
@@ -95,6 +96,7 @@ exports[`ControlCard collapsible renders as expected 1`] = `
       textSize="s"
     >
       <button
+        aria-label="Collapse"
         className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
         onClick={[MockFunction]}
         type="button"
@@ -141,6 +143,7 @@ exports[`ControlCard sized title and closable onButtonClick is called 1`] = `
       textSize="s"
     >
       <button
+        aria-label="Close"
         className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
         onClick={
           [MockFunction] {
@@ -199,6 +202,7 @@ exports[`ControlCard sized title and closable renders as expected 1`] = `
       textSize="s"
     >
       <button
+        aria-label="Close"
         className="bg-transparent color-gray-dark color-blue-on-hover px0 py0"
         onClick={[MockFunction]}
         type="button"
diff --git a/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap b/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap
index 4b8723c..e25683b 100644
--- a/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap
+++ b/src/components/control-file/__tests__/__snapshots__/control-file.test.js.snap
@@ -138,6 +138,7 @@ exports[`ControlFile basic receives an array of one file as value, displaying it
         textSize="s"
       >
         <button
+          aria-label="Clear"
           className="block link link--gray relative bg-transparent py0 "
           data-test="control-file-clear"
           onClick={[Function]}
@@ -343,6 +344,7 @@ exports[`ControlFile multiple receives an array of files as value, displaying th
         textSize="s"
       >
         <button
+          aria-label="Clear"
           className="block link link--gray relative bg-transparent py0 "
           data-test="control-file-clear"
           onClick={[Function]}
diff --git a/src/components/copy-button/__tests__/__snapshots__/copy-button.test.js.snap b/src/components/copy-button/__tests__/__snapshots__/copy-button.test.js.snap
index 95af4df..1294631 100644
--- a/src/components/copy-button/__tests__/__snapshots__/copy-button.test.js.snap
+++ b/src/components/copy-button/__tests__/__snapshots__/copy-button.test.js.snap
@@ -14,6 +14,7 @@ exports[`CopyButton Defaults changes state on click 1`] = `
   textSize="s"
 >
   <button
+    aria-label="Copy"
     className="btn btn--xs py3 px3 round"
     data-clipboard-text="Copied by the default test case"
     onClick={[Function]}
@@ -66,6 +67,7 @@ exports[`CopyButton Defaults changes state on click 2`] = `
   textSize="s"
 >
   <button
+    aria-label="Copy"
     className="btn btn--xs py3 px3 round"
     data-clipboard-text="Copied by the default test case"
     onClick={[Function]}
@@ -95,6 +97,7 @@ exports[`CopyButton Defaults renders as expected 1`] = `
   textSize="s"
 >
   <button
+    aria-label="Copy"
     className="btn btn--xs py3 px3 round"
     data-clipboard-text="Copied by the default test case"
     onClick={[Function]}
@@ -124,6 +127,7 @@ exports[`CopyButton all props changes state on click 1`] = `
   textSize="s"
 >
   <button
+    aria-label="Copy"
     className="px6 py6 btn btn--purple btn--stroke"
     data-clipboard-text="more copiable text"
     data-test="copy-button"
@@ -177,6 +181,7 @@ exports[`CopyButton all props changes state on click 2`] = `
   textSize="s"
 >
   <button
+    aria-label="Copy"
     className="px6 py6 btn btn--purple btn--stroke"
     data-clipboard-text="more copiable text"
     data-test="copy-button"
@@ -207,6 +212,7 @@ exports[`CopyButton all props renders as expected 1`] = `
   textSize="s"
 >
   <button
+    aria-label="Copy"
     className="px6 py6 btn btn--purple btn--stroke"
     data-clipboard-text="more copiable text"
     data-test="copy-button"
diff --git a/src/components/copy-button/__tests__/copy-button-test-cases.js b/src/components/copy-button/__tests__/copy-button-test-cases.js
index 6fb19c9..72c0404 100644
--- a/src/components/copy-button/__tests__/copy-button-test-cases.js
+++ b/src/components/copy-button/__tests__/copy-button-test-cases.js
@@ -49,7 +49,7 @@ class InModal extends React.Component {
   render() {
     return (
       <div>
-        <button className="btn" onClick={this.toggleModal}>
+        <button aria-label="Open modal" className="btn" onClick={this.toggleModal}>
           Open modal
         </button>
         {this.renderModal()}
diff --git a/src/components/icon-text/__tests__/icon-text-test-cases.js b/src/components/icon-text/__tests__/icon-text-test-cases.js
index 0c6e9d7..1144e58 100644
--- a/src/components/icon-text/__tests__/icon-text-test-cases.js
+++ b/src/components/icon-text/__tests__/icon-text-test-cases.js
@@ -45,7 +45,7 @@ testCases.bothIcons = {
 testCases.buttonyDisplay = {
   description: 'a buttony look',
   element: (
-    <button type="button" className="link txt-bold txt-s block">
+    <button aria-label="Duplicate" type="button" className="link txt-bold txt-s block">
       <IconText iconBefore="duplicate">Duplicate</IconText>
     </button>
   )
diff --git a/src/components/minimum-duration-loader/__tests__/minimum-duration-loader-test-cases.js b/src/components/minimum-duration-loader/__tests__/minimum-duration-loader-test-cases.js
index 304d023..1982b4e 100644
--- a/src/components/minimum-duration-loader/__tests__/minimum-duration-loader-test-cases.js
+++ b/src/components/minimum-duration-loader/__tests__/minimum-duration-loader-test-cases.js
@@ -24,7 +24,7 @@ class TestMinimumDurationLoader extends React.Component {
           Current Loading State: {this.state.isLoaded ? 'Loaded' : 'Not Loaded'}
         </div>
         <div>
-          <button className="btn" onClick={this.toggleLoading}>
+          <button aria-label="Toggle" className="btn" onClick={this.toggleLoading}>
             Toggle Loading State
           </button>
         </div>
diff --git a/src/components/modal/__tests__/__snapshots__/modal-actions.test.js.snap b/src/components/modal/__tests__/__snapshots__/modal-actions.test.js.snap
index 31931c2..45b7c96 100644
--- a/src/components/modal/__tests__/__snapshots__/modal-actions.test.js.snap
+++ b/src/components/modal/__tests__/__snapshots__/modal-actions.test.js.snap
@@ -12,6 +12,11 @@ exports[`primary and secondary renders as expected 1`] = `
       data-test="primary-modal-action"
       disabled={false}
       onClick={[MockFunction]}
+      passthroughProps={
+        Object {
+          "aria-label": "Okay",
+        }
+      }
       size="medium"
       variant="primary"
     >
@@ -26,6 +31,11 @@ exports[`primary and secondary renders as expected 1`] = `
       data-test="secondary-modal-action"
       disabled={false}
       onClick={[MockFunction]}
+      passthroughProps={
+        Object {
+          "aria-label": "Cancel",
+        }
+      }
       size="medium"
       variant="discouraging"
     >
@@ -47,6 +57,11 @@ exports[`primary and tertiary does not render tertiary button, since secondary i
       data-test="primary-modal-action"
       disabled={false}
       onClick={[MockFunction]}
+      passthroughProps={
+        Object {
+          "aria-label": "Okay",
+        }
+      }
       size="medium"
       variant="primary"
     >
@@ -68,6 +83,11 @@ exports[`primary only renders as expected 1`] = `
       data-test="primary-modal-action"
       disabled={false}
       onClick={[MockFunction]}
+      passthroughProps={
+        Object {
+          "aria-label": "Okay",
+        }
+      }
       size="medium"
       variant="primary"
     >
@@ -89,6 +109,11 @@ exports[`primary, secondary, tertiary renders as expected 1`] = `
       data-test="primary-modal-action"
       disabled={false}
       onClick={[MockFunction]}
+      passthroughProps={
+        Object {
+          "aria-label": "Okay",
+        }
+      }
       size="medium"
       variant="primary"
     >
@@ -103,6 +128,11 @@ exports[`primary, secondary, tertiary renders as expected 1`] = `
       data-test="secondary-modal-action"
       disabled={false}
       onClick={[MockFunction]}
+      passthroughProps={
+        Object {
+          "aria-label": "Cancel",
+        }
+      }
       size="medium"
       variant="discouraging"
     >
@@ -113,6 +143,7 @@ exports[`primary, secondary, tertiary renders as expected 1`] = `
     className="flex-child flex-child--grow flex-child--no-shrink mr12"
   >
     <button
+      aria-label="Give up"
       className="link link--gray txt-bold txt-s"
       data-test="tertiary-modal-action"
       onClick={[MockFunction]}
diff --git a/src/components/modal/__tests__/__snapshots__/modal.test.js.snap b/src/components/modal/__tests__/__snapshots__/modal.test.js.snap
index 56f8edc..9326ec6 100644
--- a/src/components/modal/__tests__/__snapshots__/modal.test.js.snap
+++ b/src/components/modal/__tests__/__snapshots__/modal.test.js.snap
@@ -41,6 +41,7 @@ exports[`Modal No fixed width, display only renders 1`] = `
         textSize="s"
       >
         <button
+          aria-label="Close"
           className="btn btn--transparent unround-t unround-br color-gray py12 px12"
           data-test="modal-close"
           onClick={[MockFunction]}
@@ -88,6 +89,7 @@ exports[`Modal all options renders 1`] = `
         I am a message
       </div>
       <button
+        aria-label="press me"
         className="btn"
         id="foo"
       >
@@ -110,6 +112,7 @@ exports[`Modal all options renders 1`] = `
         textSize="s"
       >
         <button
+          aria-label="Close"
           className="btn btn--transparent unround-t unround-br color-gray py12 px12"
           data-test="modal-close"
           onClick={[MockFunction]}
@@ -194,6 +197,7 @@ exports[`Modal basic default renders 1`] = `
         textSize="s"
       >
         <button
+          aria-label="Close"
           className="btn btn--transparent unround-t unround-br color-gray py12 px12"
           data-test="modal-close"
           onClick={[MockFunction]}
@@ -265,6 +269,7 @@ exports[`Modal basic small renders 1`] = `
         textSize="s"
       >
         <button
+          aria-label="Close"
           className="btn btn--transparent unround-t unround-br color-gray py12 px12"
           data-test="modal-close"
           onClick={[MockFunction]}
diff --git a/src/components/modal/__tests__/modal-test-cases.js b/src/components/modal/__tests__/modal-test-cases.js
index e21b943..304a732 100644
--- a/src/components/modal/__tests__/modal-test-cases.js
+++ b/src/components/modal/__tests__/modal-test-cases.js
@@ -25,7 +25,7 @@ class ModalWrapper extends React.Component {
     );
     return (
       <div>
-        <button type="button" className="btn" onClick={this.toggleModal}>
+        <button aria-label="Open modal" type="button" className="btn" onClick={this.toggleModal}>
           Open modal
         </button>
         {modal}
@@ -202,7 +202,7 @@ noDisplayCases.allOptions = {
     children: (
       <div>
         <div className="mb12">I am a message</div>
-        <button id="foo" className="btn">
+        <button aria-label="press me" id="foo" className="btn">
           press me
         </button>
       </div>
diff --git a/src/components/page-loading-indicator/__tests__/page-loading-indicator-test-cases.js b/src/components/page-loading-indicator/__tests__/page-loading-indicator-test-cases.js
index 0726fea..5eab19b 100644
--- a/src/components/page-loading-indicator/__tests__/page-loading-indicator-test-cases.js
+++ b/src/components/page-loading-indicator/__tests__/page-loading-indicator-test-cases.js
@@ -17,7 +17,7 @@ class Showman extends React.Component {
   render() {
     return (
       <div>
-        <button onClick={this.go} className="btn">
+        <button aria-label={`${String(this.props.time)}ms`} onClick={this.go} className="btn">
           {String(this.props.time)}ms
         </button>
       </div>
diff --git a/src/components/popover-trigger/__tests__/__snapshots__/popover-trigger.test.js.snap b/src/components/popover-trigger/__tests__/__snapshots__/popover-trigger.test.js.snap
index 62c366a..771934d 100644
--- a/src/components/popover-trigger/__tests__/__snapshots__/popover-trigger.test.js.snap
+++ b/src/components/popover-trigger/__tests__/__snapshots__/popover-trigger.test.js.snap
@@ -9,6 +9,7 @@ exports[`PopoverTrigger default props renders 1`] = `
   onKeyDown={[Function]}
 >
   <button
+    aria-label="Trigger"
     className="btn"
   >
     Trigger
@@ -25,6 +26,7 @@ exports[`PopoverTrigger responds to all interactions renders 1`] = `
   onKeyDown={[Function]}
 >
   <button
+    aria-label="Trigger"
     className="btn"
   >
     Trigger
diff --git a/src/components/popover-trigger/__tests__/popover-trigger-test-cases.js b/src/components/popover-trigger/__tests__/popover-trigger-test-cases.js
index d79aea5..44890cc 100644
--- a/src/components/popover-trigger/__tests__/popover-trigger-test-cases.js
+++ b/src/components/popover-trigger/__tests__/popover-trigger-test-cases.js
@@ -12,7 +12,7 @@ testCases.defaultProps = {
   description: 'default props',
   element: (
     <PopoverTrigger content={getPopoverContent}>
-      <button className="btn">Trigger</button>
+      <button aria-label="Trigger" className="btn">Trigger</button>
     </PopoverTrigger>
   )
 };
@@ -27,7 +27,7 @@ testCases.respondsToAllInteractions = {
       respondsToFocus={true}
       respondsToClick={true}
     >
-      <button className="btn">Trigger</button>
+      <button aria-label="Trigger" className="btn">Trigger</button>
     </PopoverTrigger>
   )
 };
@@ -41,7 +41,7 @@ testCases.focusHoverNotClick = {
       respondsToFocus={true}
       respondsToClick={false}
     >
-      <button className="btn">Trigger</button>
+      <button aria-label="Trigger" className="btn">Trigger</button>
     </PopoverTrigger>
   )
 };
@@ -59,7 +59,7 @@ testCases.callbacks = {
     }),
     respondsToFocus: true,
     respondsToHover: true,
-    children: <button className="btn">Trigger</button>
+    children: <button aria-label="Trigger" className="btn">Trigger</button>
   }
 };
 
diff --git a/src/components/popover/__tests__/popover-test-cases.js b/src/components/popover/__tests__/popover-test-cases.js
index eb9acd2..9938fff 100644
--- a/src/components/popover/__tests__/popover-test-cases.js
+++ b/src/components/popover/__tests__/popover-test-cases.js
@@ -57,6 +57,7 @@ class PopoverTrigger extends React.Component {
     return (
       <div className="inline-block">
         <button
+          aria-label="Trigger"
           ref={this.setAnchorNode}
           className={buttonClasses}
           onClick={this.togglePopover}
@@ -180,7 +181,7 @@ testCases.receiveFocus = {
             <input className="input" placeholder="eh?" />
           </div>
           <div className="flex-child">
-            <button className="btn ml6">Submit</button>
+            <button aria-label="Submit" className="btn ml6">Submit</button>
           </div>
         </div>
       }
@@ -201,7 +202,7 @@ testCases.doNotReceiveFocus = {
             <input className="input" placeholder="eh?" />
           </div>
           <div className="flex-child">
-            <button className="btn ml6">Submit</button>
+            <button aria-label="Submit" className="btn ml6">Submit</button>
           </div>
         </div>
       }
@@ -222,7 +223,7 @@ testCases.trapFocus = {
             <input className="input" placeholder="eh?" />
           </div>
           <div className="flex-child">
-            <button className="btn ml6">Submit</button>
+            <button aria-label="Submit" className="btn ml6">Submit</button>
           </div>
         </div>
       }
diff --git a/src/components/tab-list/__tests__/__snapshots__/tab-list.test.js.snap b/src/components/tab-list/__tests__/__snapshots__/tab-list.test.js.snap
index 007d3ad..b2fd067 100644
--- a/src/components/tab-list/__tests__/__snapshots__/tab-list.test.js.snap
+++ b/src/components/tab-list/__tests__/__snapshots__/tab-list.test.js.snap
@@ -9,6 +9,7 @@ exports[`TabList a label contains a node renders 1`] = `
     key="0"
   >
     <button
+      aria-label="one"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block border-b border--transparent "
       data-test="one"
       key="one"
@@ -28,6 +29,7 @@ exports[`TabList a label contains a node renders 1`] = `
     key="1"
   >
     <button
+      aria-label="two"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block border-b border--transparent "
       data-test="two"
       key="two"
@@ -42,6 +44,7 @@ exports[`TabList a label contains a node renders 1`] = `
     key="0"
   >
     <button
+      aria-label="three"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block-mm none border--blue txt-bold "
       data-test="three"
       key="three"
@@ -56,6 +59,7 @@ exports[`TabList a label contains a node renders 1`] = `
     key="1"
   >
     <button
+      aria-label="four"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block-mm none border--transparent "
       data-test="four"
       key="four"
@@ -76,6 +80,7 @@ exports[`TabList a label contains a node renders 1`] = `
             className="block"
           >
             <button
+              aria-label="three"
               className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 border-b--0 border--blue txt-bold "
               data-test="three"
               onClick={[Function]}
@@ -88,6 +93,7 @@ exports[`TabList a label contains a node renders 1`] = `
             className="block"
           >
             <button
+              aria-label="four"
               className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 border-b--0 border--transparent "
               data-test="four"
               onClick={[Function]}
@@ -120,6 +126,7 @@ exports[`TabList a label contains a node renders 1`] = `
       }
     >
       <button
+        aria-label="More"
         className="px6 py12 mr12 align-l cursor-pointer none-mm"
         type="button"
       >
@@ -139,6 +146,7 @@ exports[`TabList basic renders 1`] = `
     key="0"
   >
     <button
+      aria-label="one"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block border-b border--transparent "
       data-test="one"
       key="one"
@@ -153,6 +161,7 @@ exports[`TabList basic renders 1`] = `
     key="1"
   >
     <button
+      aria-label="two"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block border-b border--transparent "
       data-test="two"
       key="two"
@@ -167,6 +176,7 @@ exports[`TabList basic renders 1`] = `
     key="0"
   >
     <button
+      aria-label="three"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block-mm none border--blue txt-bold "
       data-test="three"
       key="three"
@@ -181,6 +191,7 @@ exports[`TabList basic renders 1`] = `
     key="1"
   >
     <button
+      aria-label="four"
       className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block-mm none border--transparent "
       data-test="four"
       key="four"
@@ -201,6 +212,7 @@ exports[`TabList basic renders 1`] = `
             className="block"
           >
             <button
+              aria-label="three"
               className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 border-b--0 border--blue txt-bold "
               data-test="three"
               onClick={[Function]}
@@ -213,6 +225,7 @@ exports[`TabList basic renders 1`] = `
             className="block"
           >
             <button
+              aria-label="four"
               className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 border-b--0 border--transparent "
               data-test="four"
               onClick={[Function]}
@@ -245,6 +258,7 @@ exports[`TabList basic renders 1`] = `
       }
     >
       <button
+        aria-label="More"
         className="px6 py12 mr12 align-l cursor-pointer none-mm"
         type="button"
       >
@@ -364,6 +378,7 @@ exports[`TabList links renders 1`] = `
       }
     >
       <button
+        aria-label="More"
         className="px6 py12 mr12 align-l cursor-pointer none-mm"
         type="button"
       >
@@ -505,6 +520,7 @@ exports[`TabList truncate all renders 1`] = `
       }
     >
       <button
+        aria-label="More"
         className="px6 py12 mr12 align-l cursor-pointer none-mm"
         type="button"
       >
diff --git a/src/components/tooltip/__tests__/tooltip-test-cases.js b/src/components/tooltip/__tests__/tooltip-test-cases.js
index 53798ab..41e6d1f 100644
--- a/src/components/tooltip/__tests__/tooltip-test-cases.js
+++ b/src/components/tooltip/__tests__/tooltip-test-cases.js
@@ -25,7 +25,7 @@ function getTooltipList(options = {}) {
           testId={`${options.testId}-default`}
           respondsToClick={options.respondsToClick}
         >
-          <button className={buttonClasses}>default</button>
+          <button aria-label="default" className={buttonClasses}>default</button>
         </Tooltip>
       </div>
       <div className={containerClasses}>
@@ -35,7 +35,7 @@ function getTooltipList(options = {}) {
           respondsToClick={options.respondsToClick}
           disabled={true}
         >
-          <button className={buttonClasses}>disabled</button>
+          <button aria-hidden={true} className={buttonClasses}>disabled</button>
         </Tooltip>
       </div>
       <div className={containerClasses}>
@@ -45,7 +45,7 @@ function getTooltipList(options = {}) {
           testId={`${options.testId}-top`}
           respondsToClick={options.respondsToClick}
         >
-          <button className={buttonClasses}>top</button>
+          <button aria-label="top" className={buttonClasses}>top</button>
         </Tooltip>
       </div>
       <div className={containerClasses}>
@@ -55,7 +55,7 @@ function getTooltipList(options = {}) {
           testId={`${options.testId}-left`}
           respondsToClick={options.respondsToClick}
         >
-          <button className={buttonClasses}>left</button>
+          <button aria-label="left" className={buttonClasses}>left</button>
         </Tooltip>
       </div>
       <div className={containerClasses}>
@@ -65,7 +65,7 @@ function getTooltipList(options = {}) {
           testId={`${options.testId}-right`}
           respondsToClick={options.respondsToClick}
         >
-          <button className={buttonClasses}>right</button>
+          <button aria-label="right" className={buttonClasses}>right</button>
         </Tooltip>
       </div>
       <div className={containerClasses}>
@@ -75,7 +75,7 @@ function getTooltipList(options = {}) {
           testId={`${options.testId}-bottom`}
           respondsToClick={options.respondsToClick}
         >
-          <button className={buttonClasses}>bottom</button>
+          <button aria-label="bottom" className={buttonClasses}>bottom</button>
         </Tooltip>
       </div>
     </div>
@@ -116,7 +116,7 @@ testCases.buttonChild = {
   description: 'Button child',
   component: Tooltip,
   props: {
-    children: <Button>trigger</Button>,
+    children: <Button passthroughProps={{'aria-label': 'trigger'}}>trigger</Button>,
     content: 'Button child'
   }
 };
diff --git a/src/components/underline-tabs/__tests__/__snapshots__/underline-tabs.test.js.snap b/src/components/underline-tabs/__tests__/__snapshots__/underline-tabs.test.js.snap
index 3737cd1..0f7b919 100644
--- a/src/components/underline-tabs/__tests__/__snapshots__/underline-tabs.test.js.snap
+++ b/src/components/underline-tabs/__tests__/__snapshots__/underline-tabs.test.js.snap
@@ -9,6 +9,7 @@ exports[`ID labels and a disabled item renders as expected 1`] = `
     key="ant"
   >
     <button
+      aria-label="Ant"
       className="block relative color-gray color-blue-on-hover"
       data-test="ant"
       onClick={[Function]}
@@ -35,6 +36,7 @@ exports[`ID labels and a disabled item renders as expected 1`] = `
     key="bug"
   >
     <button
+      aria-label="Bug"
       className="block relative color-gray-light cursor-default"
       data-test="bug"
       onClick={[Function]}
@@ -61,6 +63,7 @@ exports[`ID labels and a disabled item renders as expected 1`] = `
     key="cat"
   >
     <button
+      aria-label="Cat"
       className="block relative color-gray-dark cursor-default"
       data-test="cat"
       onClick={[Function]}
@@ -97,6 +100,7 @@ exports[`customized renders as expected 1`] = `
     key="A"
   >
     <button
+      aria-label="Letter A"
       className="block relative color-pink cursor-default"
       data-test="A"
       onClick={[Function]}
@@ -126,6 +130,7 @@ exports[`customized renders as expected 1`] = `
     key="B"
   >
     <button
+      aria-label="Letter B"
       className="block relative color-purple color-pink-on-hover"
       data-test="B"
       onClick={[Function]}
@@ -152,6 +157,7 @@ exports[`customized renders as expected 1`] = `
     key="C"
   >
     <button
+      aria-label="Letter C"
       className="block relative color-purple color-pink-on-hover"
       data-test="C"
       onClick={[Function]}
@@ -185,6 +191,7 @@ exports[`defaults renders as expected 1`] = `
     key="A"
   >
     <button
+      aria-label="Letter A"
       className="block relative color-gray color-blue-on-hover"
       data-test="A"
       onClick={[Function]}
@@ -211,6 +218,7 @@ exports[`defaults renders as expected 1`] = `
     key="B"
   >
     <button
+      aria-label="Letter B"
       className="block relative color-gray-dark cursor-default"
       data-test="B"
       onClick={[Function]}
@@ -240,6 +248,7 @@ exports[`defaults renders as expected 1`] = `
     key="C"
   >
     <button
+      aria-label="Letter C"
       className="block relative color-gray color-blue-on-hover"
       data-test="C"
       onClick={[Function]}
@@ -361,6 +370,7 @@ exports[`large renders as expected 1`] = `
     key="A"
   >
     <button
+      aria-label="Letter A"
       className="block relative color-gray color-blue-on-hover"
       data-test="A"
       onClick={[Function]}
@@ -387,6 +397,7 @@ exports[`large renders as expected 1`] = `
     key="B"
   >
     <button
+      aria-label="Letter B"
       className="block relative color-gray color-blue-on-hover"
       data-test="B"
       onClick={[Function]}
@@ -413,6 +424,7 @@ exports[`large renders as expected 1`] = `
     key="C"
   >
     <button
+      aria-label="Letter C"
       className="block relative color-gray-dark cursor-default"
       data-test="C"
       onClick={[Function]}
@@ -449,6 +461,7 @@ exports[`overlap renders as expected 1`] = `
     key="A"
   >
     <button
+      aria-label="Letter A"
       className="block relative mb-neg1 mt-neg1 color-gray color-blue-on-hover"
       data-test="A"
       onClick={[Function]}
@@ -475,6 +488,7 @@ exports[`overlap renders as expected 1`] = `
     key="B"
   >
     <button
+      aria-label="Letter B"
       className="block relative mb-neg1 mt-neg1 color-gray-dark cursor-default"
       data-test="B"
       onClick={[Function]}
@@ -504,6 +518,7 @@ exports[`overlap renders as expected 1`] = `
     key="C"
   >
     <button
+      aria-label="Letter C"
       className="block relative mb-neg1 mt-neg1 color-gray color-blue-on-hover"
       data-test="C"
       onClick={[Function]}
@@ -537,6 +552,7 @@ exports[`small renders as expected 1`] = `
     key="A"
   >
     <button
+      aria-label="Letter A"
       className="block relative color-gray color-blue-on-hover"
       data-test="A"
       onClick={[Function]}
@@ -563,6 +579,7 @@ exports[`small renders as expected 1`] = `
     key="B"
   >
     <button
+      aria-label="Letter B"
       className="block relative color-gray-dark cursor-default"
       data-test="B"
       onClick={[Function]}
@@ -592,6 +609,7 @@ exports[`small renders as expected 1`] = `
     key="C"
   >
     <button
+      aria-label="Letter C"
       className="block relative color-gray color-blue-on-hover"
       data-test="C"
       onClick={[Function]}