diff --git a/src/components/button/button.js b/src/components/button/button.js
index f3ade83ad79..d864a6415fe 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -25,6 +25,7 @@ angular
* the `md-primary` class.
*
* @param {boolean=} md-no-ink If present, disable ripple ink effects.
+ * @param {boolean=} md-no-focus-style If present, disable focus style on button
* @param {expression=} ng-disabled En/Disable based on the expression
* @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
* @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
@@ -111,9 +112,10 @@ function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
}
});
- // restrict focus styles to the keyboard
- scope.mouseActive = false;
- element.on('mousedown', function() {
+ if (!angular.isDefined(attr.mdNoFocusStyle)) {
+ // restrict focus styles to the keyboard
+ scope.mouseActive = false;
+ element.on('mousedown', function() {
scope.mouseActive = true;
$timeout(function(){
scope.mouseActive = false;
@@ -127,6 +129,7 @@ function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
.on('blur', function(ev) {
element.removeClass('md-focused');
});
+ }
}
}
diff --git a/src/components/list/list.js b/src/components/list/list.js
index 0f54eed3f7c..7264ef1dc48 100644
--- a/src/components/list/list.js
+++ b/src/components/list/list.js
@@ -136,9 +136,14 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
container.append(tEl.contents());
tEl.addClass('md-proxy-focus');
} else {
- container = angular.element('');
- copyAttributes(tEl[0], container[0]);
- container.children().eq(0).append(tEl.contents());
+ container = angular.element('
');
+ var buttonWrap = angular.element('');
+ buttonWrap[0].setAttribute('aria-label', tEl[0].textContent);
+ copyAttributes(tEl[0], buttonWrap[0]);
+
+ container.prepend(buttonWrap);
+ container.children().eq(1).append(tEl.contents());
+ tEl.addClass('md-button-wrap');
}
tEl[0].setAttribute('tabindex', '-1');
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index e9ccea1de0c..4290f34f117 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -45,6 +45,33 @@ md-list-item {
&.md-proxy-focus.md-focused .md-no-style {
transition: background-color 0.15s linear;
}
+
+ &.md-button-wrap {
+ position: relative;
+
+ > .md-button:first-child {
+ padding: 0;
+ margin: 0;
+ font-weight: 400;
+ background-color: inherit;
+ text-align: left;
+ border: medium none;
+
+ > .md-button:first-child {
+ height: 100%;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ }
+
+ .md-list-item-inner {
+ padding: 0 16px;
+ }
+
+ }
+
+ }
+
&.md-no-proxy,
.md-no-style {
position: relative;
diff --git a/src/components/list/list.spec.js b/src/components/list/list.spec.js
index 384c26b41e8..fbbbc04915f 100644
--- a/src/components/list/list.spec.js
+++ b/src/components/list/list.spec.js
@@ -104,23 +104,24 @@ describe('mdListItem directive', function() {
it('creates buttons when used with ng-click', function() {
var listItem = setup('Hello world
');
- var firstChild = listItem.children()[0];
- expect(firstChild.nodeName).toBe('MD-BUTTON');
- expect(firstChild.hasAttribute('ng-disabled')).toBeTruthy();
- expect(firstChild.childNodes[0].nodeName).toBe('DIV');
- expect(firstChild.childNodes[0].childNodes[0].nodeName).toBe('P');
+ var buttonChild = listItem.children().children()[0];
+ var innerChild = listItem.children().children()[1];
+ expect(buttonChild.nodeName).toBe('MD-BUTTON');
+ expect(buttonChild.hasAttribute('ng-disabled')).toBeTruthy();
+ expect(innerChild.nodeName).toBe('DIV');
+ expect(innerChild.childNodes[0].nodeName).toBe('P');
});
it('creates buttons when used with ui-sref', function() {
var listItem = setup('Hello world
');
- var firstChild = listItem.children()[0];
+ var firstChild = listItem.children().children()[0];
expect(firstChild.nodeName).toBe('MD-BUTTON');
expect(firstChild.hasAttribute('ui-sref')).toBeTruthy();
});
it('creates buttons when used with href', function() {
var listItem = setup('Hello world
');
- var firstChild = listItem.children()[0];
+ var firstChild = listItem.children().children()[0];
expect(firstChild.nodeName).toBe('MD-BUTTON');
expect(firstChild.hasAttribute('href')).toBeTruthy();
});
@@ -128,15 +129,16 @@ describe('mdListItem directive', function() {
it('moves aria-label to primary action', function() {
var listItem = setup('');
var listItemChildren = listItem.children();
- expect(listItemChildren[0].nodeName).toBe('MD-BUTTON');
- expect(listItemChildren.attr('aria-label')).toBe('Hello');
+ expect(listItemChildren[0].nodeName).toBe('DIV');
+ expect(listItemChildren).toHaveClass('md-button');
+ expect(listItemChildren.children()[0].getAttribute('aria-label')).toBe('Hello');
});
it('moves md-secondary items outside of the button', function() {
var listItem = setup('Hello World
');
- var firstChild = listItem.children()[0];
+ var firstChild = listItem.children().children()[0];
expect(firstChild.nodeName).toBe('MD-BUTTON');
- expect(firstChild.childNodes.length).toBe(1);
+ expect(listItem.children().length).toBe(2);
var secondChild = listItem.children()[1];
expect(secondChild.nodeName).toBe('MD-BUTTON');
});