[List] Fix accessibility

docs/src/pages/customization/css-in-js.md

@@ -125,7 +125,7 @@ We are examining how to merge the changes and fixes from Material-UI back to rea
 react-jss exposes a `JssProvider` component to configure JSS for the underlying children components.
 There are different use cases:
 - [Providing a Sheets registry.](/customization/css-in-js#sheets-registry)
-- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left) or fixing [CSS injection order](/customization/css-in-js#css-injection-order) issue.
+- Providing a JSS instance. You might want to support [Right-to-left](/guides/right-to-left) or changing [CSS injection order](/customization/css-in-js#css-injection-order).
 Read [the JSS documentation](http://cssinjs.org/js-api) to learn more about the options available.
 Here is an example:
 

docs/src/pages/demos/grid-list/TitlebarGridList.js

@@ -47,7 +47,7 @@ function TitlebarGridList(props) {
     <div className={classes.container}>
       <GridList cellHeight={180} className={classes.gridList}>
         <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
-          <Subheader>December</Subheader>
+          <Subheader component="div">December</Subheader>
         </GridListTile>
         {tileData.map(tile => (
           <GridListTile key={tile.img}>

docs/src/pages/demos/lists/NestedList.js

@@ -55,13 +55,15 @@ class NestedList extends React.Component {
           <ListItemText inset primary="Inbox" />
           {this.state.open ? <ExpandLess /> : <ExpandMore />}
         </ListItem>
-        <Collapse in={this.state.open} transitionDuration="auto" unmountOnExit>
-          <ListItem button className={classes.nested}>
-            <ListItemIcon>
-              <StarBorder />
-            </ListItemIcon>
-            <ListItemText inset primary="Starred" />
-          </ListItem>
+        <Collapse component="li" in={this.state.open} transitionDuration="auto" unmountOnExit>
+          <List disablePadding>
+            <ListItem button className={classes.nested}>
+              <ListItemIcon>
+                <StarBorder />
+              </ListItemIcon>
+              <ListItemText inset primary="Starred" />
+            </ListItem>
+          </List>
         </Collapse>
       </List>
     );

src/List/ListSubheader.d.ts

@@ -5,6 +5,7 @@ export interface ListSubheaderProps extends StandardProps<
   React.HTMLAttributes<HTMLDivElement>,
   ListSubheaderClassKey
 > {
+  component?: React.ReactType;
   color?: 'default' | 'primary' | 'inherit';
   inset?: boolean;
   disableSticky?: boolean;

src/List/ListSubheader.js

@@ -1,7 +1,7 @@
 // @flow weak
 
 import React from 'react';
-import type { Node } from 'react';
+import type { Node, ElementType } from 'react';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import { capitalizeFirstLetter } from '../utils/helpers';
@@ -10,6 +10,7 @@ export const styles = (theme: Object) => ({
   root: {
     boxSizing: 'border-box',
     lineHeight: '48px',
+    listStyle: 'none',
     paddingLeft: theme.spacing.unit * 2,
     paddingRight: theme.spacing.unit * 2,
     color: theme.palette.text.secondary,
@@ -36,6 +37,7 @@ export const styles = (theme: Object) => ({
 
 type ProvidedProps = {
   classes: Object,
+  component: ElementType,
 };
 
 export type Props = {
@@ -51,6 +53,12 @@ export type Props = {
    * @ignore
    */
   className?: string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component?: ElementType,
   /**
    * The color of the component. It's using the theme palette when that makes sense.
    */
@@ -70,6 +78,7 @@ function ListSubheader(props: ProvidedProps & Props) {
     children,
     classes,
     className: classNameProp,
+    component: ComponentProp,
     color,
     disableSticky,
     inset,
@@ -86,13 +95,14 @@ function ListSubheader(props: ProvidedProps & Props) {
   );
 
   return (
-    <div className={className} {...other}>
+    <ComponentProp className={className} {...other}>
       {children}
-    </div>
+    </ComponentProp>
   );
 }
 
 ListSubheader.defaultProps = {
+  component: 'li',
   color: 'default',
   disableSticky: false,
   inset: false,

src/List/ListSubheader.spec.js

@@ -14,9 +14,9 @@ describe('<ListSubheader />', () => {
     classes = getClasses(<ListSubheader />);
   });
 
-  it('should render a div', () => {
+  it('should render a li', () => {
     const wrapper = shallow(<ListSubheader />);
-    assert.strictEqual(wrapper.name(), 'div');
+    assert.strictEqual(wrapper.name(), 'li');
   });
 
   it('should render with the user and root classes', () => {

src/transitions/Collapse.d.ts

@@ -9,6 +9,8 @@ export interface CollapseProps extends StandardProps<
   'children'
 > {
   children?: React.ReactNode;
+  collapsedHeight?: string;
+  component?: React.ReactType;
   theme?: Theme;
   timeout?: TransitionDuration | 'auto';
 }

src/transitions/Collapse.js

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import type { Node } from 'react';
+import type { Node, ElementType } from 'react';
 import Transition from 'react-transition-group/Transition';
 import withStyles from '../styles/withStyles';
 import { duration } from '../styles/transitions';
@@ -32,6 +32,7 @@ export type TransitionDuration = number | { enter?: number, exit?: number } | 'a
 type ProvidedProps = {
   appear: boolean,
   classes: Object,
+  component: ElementType,
   collapsedHeight: string,
   timeout: TransitionDuration,
   theme: Object,
@@ -50,6 +51,12 @@ export type Props = {
    * Useful to extend the style applied to components.
    */
   classes?: Object,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component?: ElementType,
   /**
    * The height of the container when collapsed.
    */
@@ -98,6 +105,7 @@ export type Props = {
 class Collapse extends React.Component<ProvidedProps & Props> {
   static defaultProps = {
     appear: false,
+    component: 'div',
     collapsedHeight: '0px',
     timeout: duration.standard,
   };
@@ -193,6 +201,7 @@ class Collapse extends React.Component<ProvidedProps & Props> {
       appear,
       children,
       classes,
+      component: ComponentProp,
       collapsedHeight,
       onEnter,
       onEntering,
@@ -219,7 +228,7 @@ class Collapse extends React.Component<ProvidedProps & Props> {
       >
         {state => {
           return (
-            <div
+            <ComponentProp
               className={classNames(classes.container, {
                 [classes.entered]: state === 'entered',
               })}
@@ -232,7 +241,7 @@ class Collapse extends React.Component<ProvidedProps & Props> {
               >
                 <div className={classes.wrapperInner}>{children}</div>
               </div>
-            </div>
+            </ComponentProp>
           );
         }}
       </Transition>