Skip to content

Commit

Permalink
change title attr to class
Browse files Browse the repository at this point in the history 
`title` collides with the HTML `title` attribute
  • Loading branch information
Yvonne Yip committed Jun 3, 2015
1 parent 309c47e commit cca6996
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 29 deletions.
14 changes: 7 additions & 7 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,21 +32,21 @@

<paper-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<span title>Toolbar</span>
<span class="title">Toolbar</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>

<paper-toolbar class="tall">
<paper-icon-button icon="menu"></paper-icon-button>
<span title>Toolbar: tall</span>
<span class="title">Toolbar: tall</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>

<paper-toolbar class="tall">
<paper-icon-button icon="menu" class="bottom"></paper-icon-button>
<span title class="bottom">Toolbar: tall with elements pin to the bottom</span>
<span class="bottom title">Toolbar: tall with elements pin to the bottom</span>
<paper-icon-button icon="refresh" class="bottom"></paper-icon-button>
<paper-icon-button icon="add" class="bottom">+</paper-icon-button>
</paper-toolbar>
Expand All @@ -56,24 +56,24 @@
<span class="flex"></span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
<span title class="bottom">Toolbar: medium-tall with label aligns to the bottom</span>
<span class="bottom title">Toolbar: medium-tall with label aligns to the bottom</span>
</paper-toolbar>

<paper-toolbar class="tall">
<paper-icon-button icon="menu"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
<div title class="middle">label aligns to the middle</div>
<div title class="bottom">some stuffs align to the bottom</div>
<div class="middle title">label aligns to the middle</div>
<div class="bottom title">some stuffs align to the bottom</div>
</paper-toolbar>

<paper-toolbar class="tall">
<paper-icon-button icon="menu"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
<div title class="middle">element (e.g. progress) fits at the bottom of the toolbar</div>
<div class="middle title">element (e.g. progress) fits at the bottom of the toolbar</div>
<div class="bottom flex" style="height: 20px; background-color: #0f9d58;"></div>
</paper-toolbar>

Expand Down
24 changes: 12 additions & 12 deletions paper-toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<paper-toolbar>
<paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
<div title>Title</div>
<div class="title">Title</div>
<paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
</paper-toolbar>
Expand All @@ -44,8 +44,8 @@
<paper-toolbar class="tall">
<paper-icon-button icon="menu"></paper-icon-button>
<div title class="middle">Middle Title</div>
<div title class="bottom">Bottom Title</div>
<div class="middle title">Middle Title</div>
<div class="bottom title">Bottom Title</div>
</paper-toolbar>
For `medium-tall` toolbar, the middle and bottom contents overlap and are
Expand All @@ -64,7 +64,7 @@
### Accessibility
`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the `title` attribute will
`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
be used as the label of the toolbar via `aria-labelledby`.
@demo demo/index.html
Expand Down Expand Up @@ -171,7 +171,7 @@
pointer-events: auto;
}

.toolbar-tools > ::content [title] {
.toolbar-tools > ::content .title {
@apply(--paper-font-title);
@apply(--layout-flex);

Expand Down Expand Up @@ -202,15 +202,15 @@
margin-right: -8px;
}

.toolbar-tools > ::content > [title],
.toolbar-tools > ::content[select=".middle"] > [title],
.toolbar-tools > ::content[select=".bottom"] > [title] {
.toolbar-tools > ::content > .title,
.toolbar-tools > ::content[select=".middle"] > .title,
.toolbar-tools > ::content[select=".bottom"] > .title {
margin-left: 56px;
}

.toolbar-tools > ::content > paper-icon-button + [title],
.toolbar-tools > ::content[select=".middle"] paper-icon-button + [title],
.toolbar-tools > ::content[select=".bottom"] paper-icon-button + [title] {
.toolbar-tools > ::content > paper-icon-button + .title,
.toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
.toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
margin-left: 0;
}
</style>
Expand Down Expand Up @@ -331,7 +331,7 @@
for (var content, index = 0; content = contents[index]; index++) {
var nodes = Polymer.dom(content).getDistributedNodes();
for (var node, jndex = 0; node = nodes[jndex]; jndex++) {
if (node.hasAttribute && node.hasAttribute('title')) {
if (node.classList && node.classList.contains('title')) {
if (node.id) {
labelledBy.push(node.id);
} else {
Expand Down
20 changes: 10 additions & 10 deletions test/paper-toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,24 +33,24 @@
<test-fixture id="title">
<template>
<paper-toolbar>
<span title>Title</span>
<span class="title">Title</span>
</paper-toolbar>
</template>
</test-fixture>

<test-fixture id="title-with-id">
<template>
<paper-toolbar>
<span title id="title">Title</span>
<span class="title" id="title">Title</span>
</paper-toolbar>
</template>
</test-fixture>

<test-fixture id="multiple-titles">
<template>
<paper-toolbar>
<span title>Title 1</span>
<span title>Title 2</span>
<span class="title">Title 1</span>
<span class="title">Title 2</span>
</paper-toolbar>
</template>
</test-fixture>
Expand Down Expand Up @@ -116,27 +116,27 @@
assert.equal(toolbar.getAttribute('role'), 'toolbar', 'has role="toolbar"');
});

test('children with "title" attribute becomes the label', function() {
test('children with .title becomes the label', function() {
var toolbar = fixture('title');
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
assert.equal(toolbar.getAttribute('aria-labelledby'), Polymer.dom(toolbar).querySelector('[title]').id, 'aria-labelledby has the id of the [title] element');
assert.equal(toolbar.getAttribute('aria-labelledby'), Polymer.dom(toolbar).querySelector('.title').id, 'aria-labelledby has the id of the .title element');
});

test('existing ids on titles are preserved', function() {
var toolbar = fixture('title-with-id');
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
assert.equal(Polymer.dom(toolbar).querySelector('[title]').id, 'title', 'id is preserved');
assert.equal(Polymer.dom(toolbar).querySelector('.title').id, 'title', 'id is preserved');
});

test('multiple children with "title" attribute becomes the label', function() {
test('multiple children with .title becomes the label', function() {
var toolbar = fixture('multiple-titles');
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
var ids = [];
var titles = Polymer.dom(toolbar).querySelectorAll('[title]');
var titles = Polymer.dom(toolbar).querySelectorAll('.title');
for (var title, index = 0; title = titles[index]; index++) {
ids.push(title.id);
}
assert.equal(toolbar.getAttribute('aria-labelledby'), ids.join(' '), 'aria-labelledby has the id of all [title] elements');
assert.equal(toolbar.getAttribute('aria-labelledby'), ids.join(' '), 'aria-labelledby has the id of all .title elements');
});

});
Expand Down

0 comments on commit cca6996

Please sign in to comment.