Skip to content

Commit

Permalink
Merge pull request #483 from tatermelon/listbox-expandable
Browse files Browse the repository at this point in the history 
Add expandable listbox example
  • Loading branch information
@mcking65
mcking65 authored Oct 17, 2017
2 parents ea42023 + 9c6f9f6 commit 3e4cb78
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 35 deletions.
47 changes: 47 additions & 0 deletions examples/listbox/css/listbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,50 @@ button[aria-disabled="true"] {
overflow-y: auto;
position: relative;
}

#exp_button {
border-radius: 0;
font-size: 16px;
text-align: left;
padding: 5px 10px;
width: 150px;
position: relative;
}

#exp_button::after {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #aaa;
content: " ";
position: absolute;
right: 5px;
top: 10px;
}

#exp_button[aria-expanded="true"]::after {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0;
border-bottom: 8px solid #aaa;
content: " ";
position: absolute;
right: 5px;
top: 10px;
}

#exp_elem_list {
border-top: 0;
max-height: 10em;
overflow-y: auto;
position: absolute;
margin: 0;
width: 148px;
}

.hidden {
display: none;
}
61 changes: 60 additions & 1 deletion examples/listbox/js/listbox-expandable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,64 @@
*/

window.addEventListener('load', function () {
var exListbox = new aria.Listbox(document.getElementById('ss_elem_list'));
var button = document.getElementById('exp_button');
var exListbox = new aria.Listbox(document.getElementById('exp_elem_list'));
var listboxButton = new aria.ListboxButton(button, exListbox);
});

var aria = aria || {};

aria.ListboxButton = function (button, listbox) {
this.button = button;
this.listbox = listbox;
this.registerEvents();
};

aria.ListboxButton.prototype.registerEvents = function () {
this.button.addEventListener('click', this.showListbox.bind(this));
this.button.addEventListener('keyup', this.checkShow.bind(this));
this.listbox.listboxNode.addEventListener('blur', this.hideListbox.bind(this));
this.listbox.listboxNode.addEventListener('keydown', this.checkHide.bind(this));
this.listbox.setHandleFocusChange(this.onFocusChange.bind(this));
};

aria.ListboxButton.prototype.checkShow = function (evt) {
var key = evt.which || evt.keyCode;

switch (key) {
case aria.KeyCode.UP:
case aria.KeyCode.DOWN:
evt.preventDefault();
this.showListbox();
this.listbox.checkKeyPress(evt);
break;
}
};

aria.ListboxButton.prototype.checkHide = function (evt) {
var key = evt.which || evt.keyCode;

switch (key) {
case aria.KeyCode.RETURN:
case aria.KeyCode.ESC:
evt.preventDefault();
this.hideListbox();
this.button.focus();
break;
}
};

aria.ListboxButton.prototype.showListbox = function () {
aria.Utils.removeClass(this.listbox.listboxNode, 'hidden');
this.button.setAttribute('aria-expanded', 'true');
this.listbox.listboxNode.focus();
};

aria.ListboxButton.prototype.hideListbox = function () {
aria.Utils.addClass(this.listbox.listboxNode, 'hidden');
this.button.removeAttribute('aria-expanded');
};

aria.ListboxButton.prototype.onFocusChange = function (focusedItem) {
this.button.innerText = focusedItem.innerText;
};
7 changes: 7 additions & 0 deletions examples/listbox/js/listbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ aria.Listbox = function (listboxNode) {
this.downButton = null;
this.deleteButton = null;

this.handleFocusChange = function () {};

this.registerEvents();
};

Expand Down Expand Up @@ -235,6 +237,7 @@ aria.Listbox.prototype.focusItem = function (element) {
}

this.checkUpDownButtons();
this.handleFocusChange(element);
};

/**
Expand Down Expand Up @@ -432,3 +435,7 @@ aria.Listbox.prototype.setupDelete = function (button, siblingList) {
this.deleteButton = button;
button.addEventListener('click', this.shiftItems.bind(this));
};

aria.Listbox.prototype.setHandleFocusChange = function (focusChangeHandler) {
this.handleFocusChange = focusChangeHandler;
};
71 changes: 37 additions & 34 deletions examples/listbox/listbox-expandable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<h1>Expandable Dropdown Listbox Example</h1>
<p>
<strong>NOTE:</strong> This example page is incomplete; it is not ready for final review.
Development is tracked by
Development is tracked by
<a href="https://github.com/w3c/aria-practices/issues/470">issue 470.</a>
</p>
<p>
Expand All @@ -44,35 +44,38 @@ <h2 id="ex_label">Example</h2>
<p>Choose your favorite transuranic element (actinide or transactinide).</p>
<div class="listbox-area">
<div class="left-area">
<span id="ss_elem">Transuranium elements:</span>
<ul id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem">
<li id="ss_elem_Np" role="option">Neptunium</li>
<li id="ss_elem_Pu" role="option">Plutonium</li>
<li id="ss_elem_Am" role="option">Americium</li>
<li id="ss_elem_Cm" role="option">Curium</li>
<li id="ss_elem_Bk" role="option">Berkelium</li>
<li id="ss_elem_Cf" role="option">Californium</li>
<li id="ss_elem_Es" role="option">Einsteinium</li>
<li id="ss_elem_Fm" role="option">Fermium</li>
<li id="ss_elem_Md" role="option">Mendelevium</li>
<li id="ss_elem_No" role="option">Nobelium</li>
<li id="ss_elem_Lr" role="option">Lawrencium</li>
<li id="ss_elem_Rf" role="option">Rutherfordium</li>
<li id="ss_elem_Db" role="option">Dubnium</li>
<li id="ss_elem_Sg" role="option">Seaborgium</li>
<li id="ss_elem_Bh" role="option">Bohrium</li>
<li id="ss_elem_Hs" role="option">Hassium</li>
<li id="ss_elem_Mt" role="option">Meitnerium</li>
<li id="ss_elem_Ds" role="option">Darmstadtium</li>
<li id="ss_elem_Rg" role="option">Roentgenium</li>
<li id="ss_elem_Cn" role="option">Copernicium</li>
<li id="ss_elem_Nh" role="option">Nihonium</li>
<li id="ss_elem_Fl" role="option">Flerovium</li>
<li id="ss_elem_Mc" role="option">Moscovium</li>
<li id="ss_elem_Lv" role="option">Livermorium</li>
<li id="ss_elem_Ts" role="option">Tennessine</li>
<li id="ss_elem_Og" role="option">Oganesson</li>
</ul>
<span id="exp_elem">Transuranium elements:</span>
<div id="exp_wrapper">
<button aria-haspopup="listbox" id="exp_button">Neptunium</button>
<ul id="exp_elem_list" tabindex="0" role="listbox" aria-labelledby="exp_elem" class="hidden">
<li id="exp_elem_Np" role="option">Neptunium</li>
<li id="exp_elem_Pu" role="option">Plutonium</li>
<li id="exp_elem_Am" role="option">Americium</li>
<li id="exp_elem_Cm" role="option">Curium</li>
<li id="exp_elem_Bk" role="option">Berkelium</li>
<li id="exp_elem_Cf" role="option">Californium</li>
<li id="exp_elem_Es" role="option">Einsteinium</li>
<li id="exp_elem_Fm" role="option">Fermium</li>
<li id="exp_elem_Md" role="option">Mendelevium</li>
<li id="exp_elem_No" role="option">Nobelium</li>
<li id="exp_elem_Lr" role="option">Lawrencium</li>
<li id="exp_elem_Rf" role="option">Rutherfordium</li>
<li id="exp_elem_Db" role="option">Dubnium</li>
<li id="exp_elem_Sg" role="option">Seaborgium</li>
<li id="exp_elem_Bh" role="option">Bohrium</li>
<li id="exp_elem_Hs" role="option">Hassium</li>
<li id="exp_elem_Mt" role="option">Meitnerium</li>
<li id="exp_elem_Ds" role="option">Darmstadtium</li>
<li id="exp_elem_Rg" role="option">Roentgenium</li>
<li id="exp_elem_Cn" role="option">Copernicium</li>
<li id="exp_elem_Nh" role="option">Nihonium</li>
<li id="exp_elem_Fl" role="option">Flerovium</li>
<li id="exp_elem_Mc" role="option">Moscovium</li>
<li id="exp_elem_Lv" role="option">Livermorium</li>
<li id="exp_elem_Ts" role="option">Tennessine</li>
<li id="exp_elem_Og" role="option">Oganesson</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -101,8 +104,8 @@ <h4>Notes</h4>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<p>
The example listboxes on this page implement the following keyboard interface.
Other variations and options for the keyboard interface are described in the
The example listboxes on this page implement the following keyboard interface.
Other variations and options for the keyboard interface are described in the
<a href="../../#listbox_kbd_interaction">Keyboard Interaction section of the Listbox Design Pattern.</a>
</p>
<table aria-labelledby="kbd_label" class="def">
Expand Down Expand Up @@ -141,8 +144,8 @@ <h2 id="kbd_label">Keyboard Support</h2>
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<p>
The example listboxes on this page implement the following ARIA roles, states, and properties.
Information about other ways of applying ARIA roles, states, and properties is available in the
The example listboxes on this page implement the following ARIA roles, states, and properties.
Information about other ways of applying ARIA roles, states, and properties is available in the
<a href="../../#listbox_roles_states_props">Roles, States, and Properties section of the Listbox Design Pattern.</a>
</p>
<table aria-labelledby="rps_label" class="data attributes">
Expand Down

0 comments on commit 3e4cb78

Please sign in to comment.