Repository: mui/material-ui (TypeScript)
Date: 2019-05-10 02:08:41+00:00
Task type: Bug Fix

Issue:
[Tabs] scrollButtons have an empty button error in compliance tools
I am using the wave extension tool on my chrome and it throws an empty button error on the right and left arrows of the scrollButtons. 

- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior 🤔
The scrollButtons should not be throwing the empty button error.

## Current Behavior 😯
The scrollButtons throws an empty button error when looked at using a wave extension for accessibility testing.

## Steps to Reproduce 🕹
The error currently shows up even on the material ui example code under the Scrollable Tabs section.
Link: https://material-ui.com/demos/tabs/

## Your Environment 🌎
| Tech         | Version |
|--------------|---------|
| Material-UI  | v3.8.3  |
| Browser      |   Chrome  |




Issue discussion:
@hgafoor Are you sure about the issue? These buttons are not reachable for a keyboard user nor for a screen reader. Do you confirm?

Can we trust this tool? I don't at 💯%. It shows an issue with the icon buttons while a `title` attribute is present:

![Capture d’écran 2019-04-16 à 17 53 48](https://user-images.githubusercontent.com/3165635/56224899-a9082e00-6070-11e9-97ad-46c04459cc01.png)

The only issue we should have on the page is with the Algolia Search. It's outside of our control: https://github.com/algolia/docsearch/issues/418

![Capture d’écran 2019-04-16 à 17 55 26](https://user-images.githubusercontent.com/3165635/56225011-dc4abd00-6070-11e9-80e1-a0224434429f.png)

@oliviertassinari  here is a screenshot of what I see on material Tabs page. In the API documentation the css properties for scrollButtons can be modified but I have no way of adding a label or name to the buttons.

<img width="1680" alt="Screen Shot 2019-04-16 at 1 52 27 PM" src="https://user-images.githubusercontent.com/22037253/56243234-f70c3a00-604e-11e9-85b5-ad880e19b1db.png">


@hgafoor What do you think of this change?
```diff
--- a/packages/material-ui/src/Tabs/TabScrollButton.js
+++ b/packages/material-ui/src/Tabs/TabScrollButton.js
@@ -28,7 +28,14 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {
   }

   return (
     <ButtonBase>
     <ButtonBase
+      aria-label={direction}
       className={className}
       onClick={onClick}
       ref={ref}
       tabIndex={-1}
       {...other}
     >
       {direction === 'left' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
     </ButtonBase>
   );
```
Do you want to submit a pull request? :) It would be in English. It's mostly to show that we care about accessibility. I don't think that it will be leveraged by any actual users, but it doesn't cost us much either.
I'm actually looking to add this for a project I'm working on! @hgafoor @oliviertassinari this change works for me 👍 

Solution patch:
diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js
--- a/packages/material-ui/src/Tabs/TabScrollButton.js
+++ b/packages/material-ui/src/Tabs/TabScrollButton.js
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/aria-role */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -28,7 +30,15 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {
   }
 
   return (
-    <ButtonBase className={className} onClick={onClick} ref={ref} tabIndex={-1} {...other}>
+    <ButtonBase
+      component="div"
+      className={className}
+      onClick={onClick}
+      ref={ref}
+      role={null}
+      tabIndex={null}
+      {...other}
+    >
       {direction === 'left' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
     </ButtonBase>
   );


Test patch:
diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js
--- a/packages/material-ui/src/Tabs/Tabs.test.js
+++ b/packages/material-ui/src/Tabs/Tabs.test.js
@@ -15,13 +15,13 @@ import TabScrollButton from './TabScrollButton';
 import TabIndicator from './TabIndicator';
 
 function AccessibleTabScrollButton(props) {
-  return <TabScrollButton aria-label={props.direction} {...props} />;
+  return <TabScrollButton data-direction={props.direction} {...props} />;
 }
 AccessibleTabScrollButton.propTypes = {
   direction: PropTypes.string.isRequired,
 };
 
-const findScrollButton = (wrapper, direction) => wrapper.find(`button[aria-label="${direction}"]`);
+const findScrollButton = (wrapper, direction) => wrapper.find(`div[data-direction="${direction}"]`);
 const hasLeftScrollButton = wrapper => findScrollButton(wrapper, 'left').exists();
 const hasRightScrollButton = wrapper => findScrollButton(wrapper, 'right').exists();