fix(list): Only apply aria-orientation with role (#945)

BREAKING CHANGE: 'orientation` is now used instead of 'aria-orientation' to specify list orientation. This allows smarter aria defaults that can be overridden if needed.
material-components · Jul 12, 2019 · beab319 · beab319
1 parent a41d0c7
commit beab319
Show file tree

Hide file tree

Showing 35 changed files with 140 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,13 @@
-# [](https://github.com/material-components/material-components-web-react/compare/v0.13.2...v) (2019-06-25)
+# [0.14.1](https://github.com/material-components/material-components-web-react/compare/v0.14.0...v0.14.1) (2019-07-02)
+
+
+### Bug Fixes
+
+* **infrastructure:** fix SSR support for webpack4 update ([#956](https://github.com/material-components/material-components-web-react/issues/956)) ([5d3a89d](https://github.com/material-components/material-components-web-react/commit/5d3a89d))
+
+
+
+# [0.14.0](https://github.com/material-components/material-components-web-react/compare/v0.13.2...v0.14.0) (2019-06-25)
 
 
 ### Bug Fixes

diff --git a/lerna.json b/lerna.json
@@ -10,5 +10,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.14.0"
+  "version": "0.14.1"
 }
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-button",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Button",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@material/button": "^1.1.0",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/card/package.json b/packages/card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-card",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Card",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@material/card": "^2.1.1",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-checkbox",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Checkbox",
   "license": "MIT",
   "main": "dist/index.js",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@material/checkbox": "^2.1.1",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/chips/package.json b/packages/chips/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-chips",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Chips",
   "license": "MIT",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@material/chips": "^2.3.0",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6",
     "react-is": "^16.8.6"
   },

diff --git a/packages/dialog/package.json b/packages/dialog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-dialog",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Dialog",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@material/dialog": "^2.2.0",
     "@material/dom": "^1.0.0",
-    "@material/react-button": "^0.14.0",
+    "@material/react-button": "^0.14.1",
     "classnames": "^2.2.6",
     "focus-trap": "^5.0.0"
   },

diff --git a/packages/drawer/package.json b/packages/drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-drawer",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Drawer",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/fab/package.json b/packages/fab/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-fab",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Floating Action Button (FAB)",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@material/fab": "^2.1.1",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/floating-label/package.json b/packages/floating-label/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-floating-label",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Floating Label",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/icon-button/package.json b/packages/icon-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-icon-button",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Icon Button",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@material/icon-button": "^2.1.1",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/layout-grid/package.json b/packages/layout-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-layout-grid",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Layout Grid",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/line-ripple/package.json b/packages/line-ripple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-line-ripple",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Line Ripple",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/linear-progress/package.json b/packages/linear-progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-linear-progress",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Linear Progress",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/list/README.md b/packages/list/README.md
@@ -293,7 +293,7 @@ class MyApp extends Component {
 | radioList        | Boolean                                 | Set the list to act as a radio list |
 | selectedIndex    | Number | Array<Number>       | Toggles the selected state of the list item at the given index. Behaves differently for checkboxList and radioList (see sections above for more detail). |
 | handleSelect     | Function(activatedItemIndex: Number, selected: Number | Array<Number>) => void | Callback for handling a list item selection event. `selected` will be an Array,Number> for checkbox lists. |
-| aria-orientation | String                                  | Indicates the list orientation                                                                                                    |
+| orientation | `'vertical'` \| `'horizontal'` | Indicates the list orientation (defaults to `'vertical'`). |
 | tag              | String                                  | Customizes the list tag type (defaults to `'ul'`)                                                                                 |
 
 ### ListItem

diff --git a/packages/list/index.tsx b/packages/list/index.tsx
@@ -35,8 +35,8 @@ import ListItemMeta from './ListItemMeta';
 import ListDivider from './ListDivider';
 import ListGroup from './ListGroup';
 import ListGroupSubheader from './ListGroupSubheader';
-const ARIA_ORIENTATION = 'aria-orientation';
-const VERTICAL = 'vertical';
+
+const HORIZONTAL = 'horizontal';
 
 export interface ListProps extends React.HTMLProps<HTMLElement> {
   className?: string;
@@ -52,6 +52,7 @@ export interface ListProps extends React.HTMLProps<HTMLElement> {
   wrapFocus?: boolean;
   tag?: string;
   ref?: React.Ref<any>;
+  orientation?: 'vertical' | 'horizontal';
 }
 
 interface ListState {
@@ -114,7 +115,6 @@ export default class List extends React.Component<ListProps, ListState> {
     selectedIndex: -1,
     handleSelect: () => {},
     wrapFocus: true,
-    'aria-orientation': VERTICAL,
     tag: 'ul',
   };
 
@@ -128,8 +128,9 @@ export default class List extends React.Component<ListProps, ListState> {
       this.foundation.setSelectedIndex(selectedIndex);
     }
     this.foundation.setWrapFocus(wrapFocus!);
+    // Vertical is the default so true unless explicitly horizontal.
     this.foundation.setVerticalOrientation(
-      this.props[ARIA_ORIENTATION] === VERTICAL
+      this.props.orientation !== HORIZONTAL
     );
     this.initializeListType();
   }
@@ -146,9 +147,9 @@ export default class List extends React.Component<ListProps, ListState> {
     if (wrapFocus !== prevProps.wrapFocus) {
       this.foundation.setWrapFocus(wrapFocus!);
     }
-    if (this.props[ARIA_ORIENTATION] !== prevProps[ARIA_ORIENTATION]) {
+    if (this.props.orientation !== prevProps.orientation) {
       this.foundation.setVerticalOrientation(
-        this.props[ARIA_ORIENTATION] === VERTICAL
+        this.props.orientation !== HORIZONTAL
       );
     }
   }
@@ -422,6 +423,7 @@ export default class List extends React.Component<ListProps, ListState> {
       /* eslint-enable @typescript-eslint/no-unused-vars */
       children,
       tag: Tag,
+      orientation,
       ...otherProps
     } = this.props;
 
@@ -432,6 +434,16 @@ export default class List extends React.Component<ListProps, ListState> {
         className={this.classes}
         ref={this.listElement}
         role={this.role}
+        // Only specify aria-orientation if:
+        // - orientation is horizontal (vertical is implicit)
+        // - props.role is falsy (not overridden)
+        // - this.role is truthy (we are applying role for checkboxList/radiogroup that supports aria-orientation)
+        // https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#accessibility
+        aria-orientation={
+          orientation === HORIZONTAL && !role && this.role
+            ? HORIZONTAL
+            : undefined
+        }
         {...otherProps}
       >
         <ListItemContext.Provider

diff --git a/packages/list/package.json b/packages/list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-list",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React List",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,9 +21,9 @@
   "dependencies": {
     "@material/dom": "^1.1.0",
     "@material/list": "^1.0.0",
-    "@material/react-checkbox": "^0.14.0",
-    "@material/react-radio": "^0.14.0",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-checkbox": "^0.14.1",
+    "@material/react-radio": "^0.14.1",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6",
     "memoize-one": "^5.0.4"
   },

diff --git a/packages/material-icon/package.json b/packages/material-icon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-material-icon",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Material Icon",
   "license": "MIT",
   "main": "dist/index.js",
@@ -20,7 +20,7 @@
     "react": "^16.4.2"
   },
   "dependencies": {
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/menu-surface/package.json b/packages/menu-surface/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-menu-surface",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Menu Surface",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/menu/package.json b/packages/menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-menu",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Menu",
   "license": "MIT",
   "main": "dist/index.js",
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@material/menu": "^1.1.0",
-    "@material/react-list": "^0.14.0",
-    "@material/react-menu-surface": "^0.14.0",
+    "@material/react-list": "^0.14.1",
+    "@material/react-menu-surface": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/notched-outline/package.json b/packages/notched-outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-notched-outline",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Componens React Notched Outline",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/radio/package.json b/packages/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-radio",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Componens React Radio",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@material/form-field": "^0.41.0",
     "@material/radio": "^1.1.0",
-    "@material/react-ripple": "^0.14.0",
+    "@material/react-ripple": "^0.14.1",
     "classnames": "^2.2.6"
   },
   "publishConfig": {

diff --git a/packages/ripple/package.json b/packages/ripple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-ripple",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Ripple",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/select/package.json b/packages/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-select",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Select",
   "license": "MIT",
   "main": "dist/index.js",
@@ -19,11 +19,11 @@
     "react": "^16.4.2"
   },
   "dependencies": {
-    "@material/react-floating-label": "^0.14.0",
-    "@material/react-line-ripple": "^0.14.0",
-    "@material/react-menu": "^0.14.0",
-    "@material/react-menu-surface": "^0.14.0",
-    "@material/react-notched-outline": "^0.14.0",
+    "@material/react-floating-label": "^0.14.1",
+    "@material/react-line-ripple": "^0.14.1",
+    "@material/react-menu": "^0.14.1",
+    "@material/react-menu-surface": "^0.14.1",
+    "@material/react-notched-outline": "^0.14.1",
     "@material/select": "^1.1.1",
     "classnames": "^2.2.6"
   },

diff --git a/packages/snackbar/package.json b/packages/snackbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/react-snackbar",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Material Components React Snackbar",
   "license": "MIT",
   "main": "dist/index.js",