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'); });