<commit_before><!--
A single-selection list box that supports selection highlighting (using the
system highlight color) and keyboard navigation.

The user can select an item with the mouse/touch or keyboard: Up/Down, Page
Up/Down, Home/End.

The keyboard interaction model generally follows that of Microsoft Windows'
list boxes instead of those in OS X:

* The Page Up/Down and Home/End keys actually move the selection, rather than
  just scrolling the list. The former behavior seems more generally useful for
  keyboard users.

* Pressing Page Up/Down will move the selection to the topmost/bottommost
  visible item if the selection is not already there. Thereafter, the key will
  move the selection up/down by a page, and (per the above point) make the
  selected item visible.

Programmatically selecting an item (by setting the selected property) scrolls
the item into view.

This component does not yet handle redistributed content properly. That is,
you cannot yet include items in the list by using a child "content" element.

@element basic-list-box
@demo http://basic-web-components.github.io/components/basic-list-box/
-->
<!--
TODO: This doesn't deal with multi-selection. Either incorporate (rather than
inherit from) core-selector to avoid the multi-selection case, or else enhance
this to support multi-selection. For keyboard navigation, that would be mean
collapsing the selection state to a single item when navigation up/down.
-->

<link rel="import" href="../core-selector/core-selector.html">

<polymer-element name="basic-list-box" extends="core-selector" attributes="generic">

<template>

<style>
:host {
  display: block;
  outline: none;
  overflow-y: auto;
}

/* Generic appearance */
:host([generic=""]) {
  border: 1px solid gray;
  box-sizing: border-box;
  cursor: default;
}

:host(:focus) {
  outline: 1px dotted; /* Safari/IE */
  outline: auto 5px -webkit-focus-ring-color; /* Chrome/Webkit */
}

polyfill-next-selector {
  content: '*';
}
::content * {
  box-sizing: border-box;
  display: block;
  padding: 0.25em;
  -webkit-user-select: none;
  user-select: none;
}

polyfill-next-selector {
  content: ':host > .core-selected';
}
::content .core-selected {
  background: highlight;
  color: highlighttext;
}
</style>

<shadow></shadow>

</template>

<script>
Polymer( "basic-list-box", {

  /**
   * Scroll down one page.
   *
   * @method pageDown
   */
  pageDown: function() {
    return this._scrollOnePage( true );
  },

  /**
   * Scroll up one page.
   *
   * @method pageUp
   */
  pageUp: function() {
    return this._scrollOnePage( false );
  },

  ready: function() {

    // HACK: We'd prefer to use "tap" (the default event), but as of 6/11/14,
    // that doesn't appear to work in IE 11.
    this.activateEvent = "click";

    this.super();

    if ( this.getAttribute( "tabIndex" ) == null ) {
      // Convince the browser that the list is focusable, but without forcing it
      // into the tab order (as a positive tabindex would do). Firefox, Chrome,
      // and IE seem to handle this as desired if tabindex is *explicitly* set
      // to a negative number.
      this.tabIndex = -1;
    }

    this.addEventListener( "keydown", function( event ) {
      return this._keydown( event );
    }.bind( this ));

    if ( this.getAttribute( "generic" ) == null ) {
      this.generic = true;
    }
  },<commit_msg>ARIA role<commit_after><!--
A single-selection list box that supports selection highlighting (using the
system highlight color) and keyboard navigation.

The user can select an item with the mouse/touch or keyboard: Up/Down, Page
Up/Down, Home/End.

The keyboard interaction model generally follows that of Microsoft Windows'
list boxes instead of those in OS X:

* The Page Up/Down and Home/End keys actually move the selection, rather than
  just scrolling the list. The former behavior seems more generally useful for
  keyboard users.

* Pressing Page Up/Down will move the selection to the topmost/bottommost
  visible item if the selection is not already there. Thereafter, the key will
  move the selection up/down by a page, and (per the above point) make the
  selected item visible.

Programmatically selecting an item (by setting the selected property) scrolls
the item into view.

This component does not yet handle redistributed content properly. That is,
you cannot yet include items in the list by using a child "content" element.

@element basic-list-box
@demo http://basic-web-components.github.io/components/basic-list-box/
-->
<!--
TODO: This doesn't deal with multi-selection. Either incorporate (rather than
inherit from) core-selector to avoid the multi-selection case, or else enhance
this to support multi-selection. For keyboard navigation, that would be mean
collapsing the selection state to a single item when navigation up/down.
-->

<link rel="import" href="../core-selector/core-selector.html">

<polymer-element name="basic-list-box" extends="core-selector" attributes="generic">

<template>

<style>
:host {
  display: block;
  outline: none;
  overflow-y: auto;
}

/* Generic appearance */
:host([generic=""]) {
  border: 1px solid gray;
  box-sizing: border-box;
  cursor: default;
}

:host(:focus) {
  outline: 1px dotted; /* Safari/IE */
  outline: auto 5px -webkit-focus-ring-color; /* Chrome/Webkit */
}

polyfill-next-selector {
  content: '*';
}
::content * {
  box-sizing: border-box;
  display: block;
  padding: 0.25em;
  -webkit-user-select: none;
  user-select: none;
}

polyfill-next-selector {
  content: ':host > .core-selected';
}
::content .core-selected {
  background: highlight;
  color: highlighttext;
}
</style>

<shadow></shadow>

</template>

<script>
Polymer( "basic-list-box", {

  /**
   * Scroll down one page.
   *
   * @method pageDown
   */
  pageDown: function() {
    return this._scrollOnePage( true );
  },

  /**
   * Scroll up one page.
   *
   * @method pageUp
   */
  pageUp: function() {
    return this._scrollOnePage( false );
  },

  ready: function() {

    // HACK: We'd prefer to use "tap" (the default event), but as of 6/11/14,
    // that doesn't appear to work in IE 11.
    this.activateEvent = "click";

    this.super();

    if ( this.getAttribute( "tabIndex" ) == null ) {
      // Convince the browser that the list is focusable, but without forcing it
      // into the tab order (as a positive tabindex would do). Firefox, Chrome,
      // and IE seem to handle this as desired if tabindex is *explicitly* set
      // to a negative number.
      this.tabIndex = -1;
    }

    this.addEventListener( "keydown", function( event ) {
      return this._keydown( event );
    }.bind( this ));

    if ( this.getAttribute( "generic" ) == null ) {
      this.generic = true;
    }
    if ( this.getAttribute( "aria-role" ) == null ) {
      this.setAttribute( "aria-role", "listbox" );
    }
  },
{'fraction_non_alphanumeric': 0.11488555182971279, 'fraction_numerical': 0.004082227729989794, 'mean_word_length': 3.3144654088050314, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '874715', 'n_tokens_mistral': 2084, 'n_tokens_neox': 2017, 'n_words': 766}