Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit beab319

Browse files
liamcmitchell-scMatt Goo
liamcmitchell-sc
authored and
Matt Goo
committed
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.
1 parent a41d0c7 commit beab319

File tree

35 files changed

+140
-74
lines changed

35 files changed

+140
-74
lines changed

‎CHANGELOG.md

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1-
# [](https://github.com/material-components/material-components-web-react/compare/v0.13.2...v) (2019-06-25)
1+
# [0.14.1](https://github.com/material-components/material-components-web-react/compare/v0.14.0...v0.14.1) (2019-07-02)
2+
3+
4+
### Bug Fixes
5+
6+
* **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))
7+
8+
9+
10+
# [0.14.0](https://github.com/material-components/material-components-web-react/compare/v0.13.2...v0.14.0) (2019-06-25)
211

312

413
### Bug Fixes

‎lerna.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
"packages": [
1111
"packages/*"
1212
],
13-
"version": "0.14.0"
13+
"version": "0.14.1"
1414
}

‎packages/button/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-button",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Button",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -21,7 +21,7 @@
2121
},
2222
"dependencies": {
2323
"@material/button": "^1.1.0",
24-
"@material/react-ripple": "^0.14.0",
24+
"@material/react-ripple": "^0.14.1",
2525
"classnames": "^2.2.6"
2626
},
2727
"publishConfig": {

‎packages/card/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-card",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Card",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -21,7 +21,7 @@
2121
},
2222
"dependencies": {
2323
"@material/card": "^2.1.1",
24-
"@material/react-ripple": "^0.14.0",
24+
"@material/react-ripple": "^0.14.1",
2525
"classnames": "^2.2.6"
2626
},
2727
"publishConfig": {

‎packages/checkbox/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-checkbox",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Checkbox",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -20,7 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@material/checkbox": "^2.1.1",
23-
"@material/react-ripple": "^0.14.0",
23+
"@material/react-ripple": "^0.14.1",
2424
"classnames": "^2.2.6"
2525
},
2626
"publishConfig": {

‎packages/chips/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-chips",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Chips",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -23,7 +23,7 @@
2323
},
2424
"dependencies": {
2525
"@material/chips": "^2.3.0",
26-
"@material/react-ripple": "^0.14.0",
26+
"@material/react-ripple": "^0.14.1",
2727
"classnames": "^2.2.6",
2828
"react-is": "^16.8.6"
2929
},

‎packages/dialog/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-dialog",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Dialog",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -21,7 +21,7 @@
2121
"dependencies": {
2222
"@material/dialog": "^2.2.0",
2323
"@material/dom": "^1.0.0",
24-
"@material/react-button": "^0.14.0",
24+
"@material/react-button": "^0.14.1",
2525
"classnames": "^2.2.6",
2626
"focus-trap": "^5.0.0"
2727
},

‎packages/drawer/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-drawer",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Drawer",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/fab/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-fab",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Floating Action Button (FAB)",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -21,7 +21,7 @@
2121
},
2222
"dependencies": {
2323
"@material/fab": "^2.1.1",
24-
"@material/react-ripple": "^0.14.0",
24+
"@material/react-ripple": "^0.14.1",
2525
"classnames": "^2.2.6"
2626
},
2727
"publishConfig": {

‎packages/floating-label/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-floating-label",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Floating Label",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/icon-button/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-icon-button",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Icon Button",
55
"license": "Apache-2.0",
66
"main": "dist/index.js",
@@ -21,7 +21,7 @@
2121
},
2222
"dependencies": {
2323
"@material/icon-button": "^2.1.1",
24-
"@material/react-ripple": "^0.14.0",
24+
"@material/react-ripple": "^0.14.1",
2525
"classnames": "^2.2.6"
2626
},
2727
"publishConfig": {

‎packages/layout-grid/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-layout-grid",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Layout Grid",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/line-ripple/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-line-ripple",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Line Ripple",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/linear-progress/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-linear-progress",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Linear Progress",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/list/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ class MyApp extends Component {
293293
| radioList | Boolean | Set the list to act as a radio list |
294294
| 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). |
295295
| 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. |
296-
| aria-orientation | String | Indicates the list orientation |
296+
| orientation | `'vertical'` \| `'horizontal'` | Indicates the list orientation (defaults to `'vertical'`). |
297297
| tag | String | Customizes the list tag type (defaults to `'ul'`) |
298298

299299
### ListItem

‎packages/list/index.tsx

+18-6
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ import ListItemMeta from './ListItemMeta';
3535
import ListDivider from './ListDivider';
3636
import ListGroup from './ListGroup';
3737
import ListGroupSubheader from './ListGroupSubheader';
38-
const ARIA_ORIENTATION = 'aria-orientation';
39-
const VERTICAL = 'vertical';
38+
39+
const HORIZONTAL = 'horizontal';
4040

4141
export interface ListProps extends React.HTMLProps<HTMLElement> {
4242
className?: string;
@@ -52,6 +52,7 @@ export interface ListProps extends React.HTMLProps<HTMLElement> {
5252
wrapFocus?: boolean;
5353
tag?: string;
5454
ref?: React.Ref<any>;
55+
orientation?: 'vertical' | 'horizontal';
5556
}
5657

5758
interface ListState {
@@ -114,7 +115,6 @@ export default class List extends React.Component<ListProps, ListState> {
114115
selectedIndex: -1,
115116
handleSelect: () => {},
116117
wrapFocus: true,
117-
'aria-orientation': VERTICAL,
118118
tag: 'ul',
119119
};
120120

@@ -128,8 +128,9 @@ export default class List extends React.Component<ListProps, ListState> {
128128
this.foundation.setSelectedIndex(selectedIndex);
129129
}
130130
this.foundation.setWrapFocus(wrapFocus!);
131+
// Vertical is the default so true unless explicitly horizontal.
131132
this.foundation.setVerticalOrientation(
132-
this.props[ARIA_ORIENTATION] === VERTICAL
133+
this.props.orientation !== HORIZONTAL
133134
);
134135
this.initializeListType();
135136
}
@@ -146,9 +147,9 @@ export default class List extends React.Component<ListProps, ListState> {
146147
if (wrapFocus !== prevProps.wrapFocus) {
147148
this.foundation.setWrapFocus(wrapFocus!);
148149
}
149-
if (this.props[ARIA_ORIENTATION] !== prevProps[ARIA_ORIENTATION]) {
150+
if (this.props.orientation !== prevProps.orientation) {
150151
this.foundation.setVerticalOrientation(
151-
this.props[ARIA_ORIENTATION] === VERTICAL
152+
this.props.orientation !== HORIZONTAL
152153
);
153154
}
154155
}
@@ -422,6 +423,7 @@ export default class List extends React.Component<ListProps, ListState> {
422423
/* eslint-enable @typescript-eslint/no-unused-vars */
423424
children,
424425
tag: Tag,
426+
orientation,
425427
...otherProps
426428
} = this.props;
427429

@@ -432,6 +434,16 @@ export default class List extends React.Component<ListProps, ListState> {
432434
className={this.classes}
433435
ref={this.listElement}
434436
role={this.role}
437+
// Only specify aria-orientation if:
438+
// - orientation is horizontal (vertical is implicit)
439+
// - props.role is falsy (not overridden)
440+
// - this.role is truthy (we are applying role for checkboxList/radiogroup that supports aria-orientation)
441+
// https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#accessibility
442+
aria-orientation={
443+
orientation === HORIZONTAL && !role && this.role
444+
? HORIZONTAL
445+
: undefined
446+
}
435447
{...otherProps}
436448
>
437449
<ListItemContext.Provider

‎packages/list/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-list",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React List",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -21,9 +21,9 @@
2121
"dependencies": {
2222
"@material/dom": "^1.1.0",
2323
"@material/list": "^1.0.0",
24-
"@material/react-checkbox": "^0.14.0",
25-
"@material/react-radio": "^0.14.0",
26-
"@material/react-ripple": "^0.14.0",
24+
"@material/react-checkbox": "^0.14.1",
25+
"@material/react-radio": "^0.14.1",
26+
"@material/react-ripple": "^0.14.1",
2727
"classnames": "^2.2.6",
2828
"memoize-one": "^5.0.4"
2929
},

‎packages/material-icon/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-material-icon",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Material Icon",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -20,7 +20,7 @@
2020
"react": "^16.4.2"
2121
},
2222
"dependencies": {
23-
"@material/react-ripple": "^0.14.0",
23+
"@material/react-ripple": "^0.14.1",
2424
"classnames": "^2.2.6"
2525
},
2626
"publishConfig": {

‎packages/menu-surface/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-menu-surface",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Menu Surface",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/menu/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-menu",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Menu",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -20,8 +20,8 @@
2020
},
2121
"dependencies": {
2222
"@material/menu": "^1.1.0",
23-
"@material/react-list": "^0.14.0",
24-
"@material/react-menu-surface": "^0.14.0",
23+
"@material/react-list": "^0.14.1",
24+
"@material/react-menu-surface": "^0.14.1",
2525
"classnames": "^2.2.6"
2626
},
2727
"publishConfig": {

‎packages/notched-outline/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-notched-outline",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Componens React Notched Outline",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/radio/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-radio",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Componens React Radio",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -21,7 +21,7 @@
2121
"dependencies": {
2222
"@material/form-field": "^0.41.0",
2323
"@material/radio": "^1.1.0",
24-
"@material/react-ripple": "^0.14.0",
24+
"@material/react-ripple": "^0.14.1",
2525
"classnames": "^2.2.6"
2626
},
2727
"publishConfig": {

‎packages/ripple/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-ripple",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Ripple",
55
"license": "MIT",
66
"main": "dist/index.js",

‎packages/select/package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-select",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Select",
55
"license": "MIT",
66
"main": "dist/index.js",
@@ -19,11 +19,11 @@
1919
"react": "^16.4.2"
2020
},
2121
"dependencies": {
22-
"@material/react-floating-label": "^0.14.0",
23-
"@material/react-line-ripple": "^0.14.0",
24-
"@material/react-menu": "^0.14.0",
25-
"@material/react-menu-surface": "^0.14.0",
26-
"@material/react-notched-outline": "^0.14.0",
22+
"@material/react-floating-label": "^0.14.1",
23+
"@material/react-line-ripple": "^0.14.1",
24+
"@material/react-menu": "^0.14.1",
25+
"@material/react-menu-surface": "^0.14.1",
26+
"@material/react-notched-outline": "^0.14.1",
2727
"@material/select": "^1.1.1",
2828
"classnames": "^2.2.6"
2929
},

‎packages/snackbar/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@material/react-snackbar",
3-
"version": "0.14.0",
3+
"version": "0.14.1",
44
"description": "Material Components React Snackbar",
55
"license": "MIT",
66
"main": "dist/index.js",

0 commit comments

Comments
 (0)