Remaining accessibility issues

[alice]

Basic level:

• Should have toolbar role
• Title element should be aria-hidden and text used as aria-label, e.g. have the title provided as an attribute and use it to create the title element in content, something like

<core-toolbar title="Title"> <!-- aria-label will be set to 'Title' -->
    <paper-icon-button icon="menu" class="nav"></paper-icon-button>
    <!-- title flex span will be placed here -->
    <paper-icon-button icon="refresh" class="action"></paper-icon-button>
    <paper-icon-button icon="more-vert" class="menu"></paper-icon-button>
</core-toolbar>

(class names based on http://www.google.com/design/spec/layout/structure.html#structure-app-bar)

• Buttons within toolbar should have appropriate labels (likely author's responsibility)

Advanced level:

• Follow ARIA toolbar design pattern for keyboard event handling: http://www.w3.org/TR/wai-aria-practices/#toolbar
• Plus, wrap to start/end if using arrow keys (e.g. far right + arrow right = far left)

More advanced:

• Offer settable first letter accelerators for frequently used toolbar items

[dfreedm]

Hmm, the authoring practices for toolbar don't mention title, just aria-label. Is there some other source that suggests using title?

[alice]

I'm suggesting a custom 'title' attribute - since you ask that question, though, it should probably be called something else to avoid confusion - which then generates the flex 'title' div to display the title, and is also used as the accessible label for the whole element. I'm talking about <div flex>Title</div> here: https://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar

[dfreedm]

Ah ok. We can't use title for a few native DOM binding reasons

[alice]

Makes sense. What if it was called something like "data-title"?