Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more #1276

Merged
merged 47 commits into from
Feb 14, 2020
+893 −787
Merged

Combobox Examples with listbox popup: Fix Escape behavior, mouse interaction, visual design, and more #1276

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
f9f0199
updated combox code to use single prototype
jongund Nov 21, 2019
3663dea
updated escape key behavior
jongund Nov 22, 2019
db05fa5
removed unused files
jongund Nov 22, 2019
7937a03
fixing regression issues for escape key
jongund Nov 22, 2019
d9464c8
updated tests for single and double escape key tests
jongund Nov 22, 2019
903f6d3
fixed focus bug on enter and removed use of keycode property
jongund Nov 29, 2019
60e8955
fixed bug in opening list and improved property names for visual focu…
jongund Dec 2, 2019
2468850
fixed bug in opening list with alt key pressed
jongund Dec 2, 2019
98b0967
fixed bug with enter key not updating aria-expanded
jongund Dec 2, 2019
5235675
fixed bugs in down arrow
jongund Dec 3, 2019
245d30e
added documentation and tests for ALT Down Arrow feature
jongund Dec 3, 2019
565a0c1
fixed some styling bugs
jongund Dec 4, 2019
98f6d55
using only one SVG image to show listbox state
jongund Dec 4, 2019
4b8524f
updated CSS for styling listbox focus
jongund Dec 4, 2019
2abf21c
fixed scrolling issue in listbox
jongund Dec 4, 2019
670bb24
adjusted position of svg image button
jongund Dec 5, 2019
6a41816
fixed onlcik bug not selecting options for list and none options
jongund Jan 21, 2020
f6d6b32
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
jongund Jan 22, 2020
faedb8c
updated combobox test for autocomplete, list and none
jongund Jan 22, 2020
11bdddd
fixed bug with onclick behavior and documented option filtering as us…
jongund Jan 22, 2020
0d352f4
updated documentation abou filtering of options
jongund Jan 22, 2020
8f303a1
Typo: character -> characters
carmacleod Jan 22, 2020
22575ec
Typo: character -> characters
carmacleod Jan 22, 2020
710f769
fixed option filter bug with autocomplete=none
jongund Jan 22, 2020
08150b9
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
jongund Jan 23, 2020
ad47b9d
improved description of when listbox opens
jongund Jan 23, 2020
4a00ac8
use lowercase "the" in sentence
carmacleod Jan 23, 2020
c373245
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
jongund Jan 24, 2020
9bccd49
Minor editorial revision to alt+down in textbox keyboard table
mcking65 Jan 28, 2020
ef94e2f
udpated test file to check for aria-selected on option when listbox o…
jongund Jan 28, 2020
58dd2a0
fixed aria-selected tests
jongund Jan 28, 2020
8edcb40
add tests for aria-selected to key down tests
jongund Jan 28, 2020
8577088
Final fixes for combobox tests
Jan 28, 2020
03ee3f2
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
mcking65 Feb 5, 2020
965a45c
Add aria-hidden=false and focusable=false to svg in button
zcorpan Feb 13, 2020
ad2d9ef
Use fewer descendant combinators in selectors
zcorpan Feb 13, 2020
2125c15
Call function instead of setting a property on elements
zcorpan Feb 13, 2020
511a707
Don't call setValue() when hitting backspace, to avoid moving the cur…
zcorpan Feb 13, 2020
4e42a82
Remove superfluous isPrintableCharacter() call
zcorpan Feb 13, 2020
7554162
Remove unsused variable textContent
zcorpan Feb 13, 2020
9614aff
Declare option outside for loop. Also use null instead of false
zcorpan Feb 13, 2020
28f0ebd
Set scrollTop once
zcorpan Feb 13, 2020
5be02da
Declare index variable in the if block
zcorpan Feb 13, 2020
2a5719e
Move isPrintableCharacter to ComboboxAutocomplete.prototype
zcorpan Feb 13, 2020
baf2bed
Add information about the id attribute for all combobox examples; fix…
zcorpan Feb 13, 2020
ff804c1
Merge branch 'master' into issue1066-combobox-fix-escape-key-and-othe…
mcking65 Feb 14, 2020
9066a96
Fixed documentation of escape key for the listbox
mcking65 Feb 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 19 additions & 20 deletions examples/combobox/combobox-autocomplete-both.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@
<script type="text/javascript" src="../js/app.js"></script>

<!-- js and css for this example. -->
<link rel="stylesheet" href="css/combobox.css">
<script type="text/javascript" src="js/combobox-list.js"></script>
<script type="text/javascript" src="js/listbox.js"></script>
<script type="text/javascript" src="js/listboxOption.js"></script>
<link rel="stylesheet" href="css/combobox-autocomplete.css">
<script type="text/javascript" src="js/combobox-autocomplete.js"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand Down Expand Up @@ -54,7 +52,13 @@ <h2 id="ex_label">Example</h2>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
aria-expanded="false" aria-controls="lb1">
<button type="button" id="cb1-button" aria-label="Open" tabindex="-1">&#9660;</button>
<button type="button" id="cb1-button" aria-label="Open" tabindex="-1">
<span class="arrow">
<svg width="18" height="16">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be worth adding aria-hidden="true" on here and the other examples, or switching to an svg title method of labelling + role="img", to prevent navigation into the SVG, though it's a pretty minor thing

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. I also added focusable="false" per #1045 (comment) -- though, possibly this SVG should be in the CSS instead, with generated content?

<polygon points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="lb1" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
Expand Down Expand Up @@ -145,6 +149,12 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</ul>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<td>
Opens the listbox but no option is selected and visual focus and DOM focus stays on the textbox.
</td>
</tr>
<tr data-test-id="textbox-key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>
Expand All @@ -168,8 +178,8 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>If the listbox is displayed, closes it.</li>
<li>If the listbox is not displayed, clears the textbox.</li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -261,6 +271,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<ul>
<li>Moves visual focus to the textbox.</li>
<li>Types the character in the textbox.</li>
<li>Options in the listbox are filtered based on characters in the textbox.</li>
spectranaut marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</td>
</tr>
Expand Down Expand Up @@ -410,23 +421,11 @@ <h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/combobox.css" type="text/css">combobox.css</a>
</li>
<li>
CSS:
<a href="css/listbox.css" type="text/css">listbox.css</a>
</li>
<li>
Javascript:
<a href="js/combobox-list.js" type="text/javascript">combobox-list.js</a>
</li>
<li>
Javascript:
<a href="js/listbox.js" type="text/javascript">listbox.js</a>
<a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
</li>
<li>
Javascript:
<a href="js/listboxOption.js" type="text/javascript">listboxOption.js</a>
<a href="js/combobox-autocomplete.js" type="text/javascript">combobox-autocomplete.js</a>
</li>
</ul>
</section>
Expand Down
42 changes: 21 additions & 21 deletions examples/combobox/combobox-autocomplete-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
<script src="../js/app.js"></script>

<!-- js and css for this example. -->
<link href="css/combobox.css" rel="stylesheet">
<script src="js/combobox-list.js" type="text/javascript"></script>
<script src="js/listbox.js" type="text/javascript"></script>
<script src="js/listboxOption.js" type="text/javascript"></script>
<link href="css/combobox-autocomplete.css" rel="stylesheet">
<script src="js/combobox-autocomplete.js" type="text/javascript"></script>

</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand Down Expand Up @@ -54,7 +53,13 @@ <h2 id="ex_label">Example</h2>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
aria-expanded="false" aria-controls="cb1-listbox">
<button id="cb1-button" tabindex="-1" aria-label="Open">&#9660;</button>
<button id="cb1-button" tabindex="-1" aria-label="Open">
<span class="arrow">
<svg width="18" height="16">
<polygon points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
Expand Down Expand Up @@ -145,6 +150,12 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</ul>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<td>
Opens the listbox but no option is selected and visual focus and DOM focus stays on the textbox.
</td>
</tr>
<tr data-test-id="textbox-key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>
Expand All @@ -163,9 +174,9 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>If the listbox is displayed, closes it.</li>
</ul>
<li>If the listbox is not displayed, clears the textbox.</li>
</ul>
</td>
</tr>
<tr data-test-id="standard-single-line-editing-keys">
Expand Down Expand Up @@ -256,6 +267,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<ul>
<li>Moves visual focus to the textbox.</li>
<li>Types the character in the textbox.</li>
<li>Options in the listbox are filtered based on characters in the textbox.</li>
spectranaut marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</td>
</tr>
Expand Down Expand Up @@ -405,23 +417,11 @@ <h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/combobox.css" type="text/css">combobox.css</a>
</li>
<li>
CSS:
<a href="css/listbox.css" type="text/css">listbox.css</a>
</li>
<li>
Javascript:
<a href="js/combobox-list.js" type="text/javascript">combobox-list.js</a>
</li>
<li>
Javascript:
<a href="js/listbox.js" type="text/javascript">listbox.js</a>
<a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
</li>
<li>
Javascript:
<a href="js/listboxOption.js" type="text/javascript">listboxOption.js</a>
<a href="js/combobox-autocomplete.js" type="text/javascript">combobox-autocomplete.js</a>
</li>
</ul>
</section>
Expand Down
46 changes: 22 additions & 24 deletions examples/combobox/combobox-autocomplete-none.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@
<script src="../js/app.js"></script>

<!-- js and css for this example. -->
<link href="css/combobox.css" rel="stylesheet">
<script src="js/combobox-list.js" type="text/javascript"></script>
<script src="js/listbox.js" type="text/javascript"></script>
<script src="js/listboxOption.js" type="text/javascript"></script>
<link href="css/combobox-autocomplete.css" rel="stylesheet">
<script src="js/combobox-autocomplete.js" type="text/javascript"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand All @@ -34,7 +32,7 @@ <h1>Editable Combobox without Autocomplete Example</h1>
The design pattern describes four types of autocomplete behavior.
This example illustrates the autocomplete behavior known as <q>no autocomplete</q>.
The terms that appear in the listbox popup are not related to the string that is present in the textbox.
In this implementation, The listbox popup is not automatically triggered; it is displayed only when the user opens it.
In this implementation, the listbox popup is not automatically triggered when the textbox receives focus; the list is opened when the user types a character into the textbox or through an explicit open command.
</p>
<p>Similar examples include: </p>
<ul>
Expand All @@ -55,7 +53,13 @@ <h2 id="ex_label">Example</h2>
aria-autocomplete="none"
aria-expanded="false"
aria-controls="cb1-listbox">
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">&#9660;</button>
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">
<span class="arrow">
<svg width="18" height="16">
<polygon points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="Previous Searches">
<li id="lb1-01" role="option">weather</li>
Expand Down Expand Up @@ -100,6 +104,12 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</ul>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<td>
Opens the listbox but no option is selected and visual focus and DOM focus stays on the textbox.
</td>
</tr>
<tr data-test-id="textbox-key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>
Expand Down Expand Up @@ -158,10 +168,9 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<th><kbd>Escape</kbd></th>
<td>
<ul>
<li>Clears the textbox.</li>
<li>Closes the listbox.</li>
<li>Sets visual focus on the textbox.</li>
</ul>
<li>If the listbox is displayed, closes it.</li>
<li>If the listbox is not displayed, clears the textbox.</li>
</ul>
</td>
</tr>
<tr data-test-id="listbox-key-down-arrow">
Expand Down Expand Up @@ -206,6 +215,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<ul>
<li>Moves visual focus to the textbox.</li>
<li>Types the character in the textbox.</li>
<li>Options in the listbox are <em>not</em> filtered based on the characters in the textbox.</li>
spectranaut marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</td>
</tr>
Expand Down Expand Up @@ -355,23 +365,11 @@ <h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/combobox.css" type="text/css">combobox.css</a>
</li>
<li>
CSS:
<a href="css/listbox.css" type="text/css">listbox.css</a>
</li>
<li>
Javascript:
<a href="js/combobox-list.js" type="text/javascript">combobox-list.js</a>
</li>
<li>
Javascript:
<a href="js/listbox.js" type="text/javascript">listbox.js</a>
<a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
</li>
<li>
Javascript:
<a href="js/listboxOption.js" type="text/javascript">listboxOption.js</a>
<a href="js/combobox-autocomplete.js" type="text/javascript">combobox-autocomplete.js</a>
</li>
</ul>
</section>
Expand Down
35 changes: 29 additions & 6 deletions examples/combobox/css/combobox.css → ...es/combobox/css/combobox-autocomplete.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
margin: 0;
vertical-align: bottom;
border: 1px solid gray;
position: relative;
}

.combobox .group input {
Expand All @@ -30,14 +31,33 @@
width: 1.25rem;
border-left: none;
outline: none;
font-size: 70%;
}

.combobox .group button.open svg {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non blocking comment: it'd be nice to keep CSS selectors to a max of three levels deep

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a common best practice for efficiency (browser go right-to-left in interpreting CSS selectors), and to avoid an arms race of over-specific CSS selectors.

for reference:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, thanks. For efficiency, I think it's better to use child selector over descendant selector, but that would add even more specificity and result in harder to read selectors. I think the selectors here can remove some middle part without changing what matches, so I'll try that.

transform: rotate(180deg) translate(0, -1px);
}

.combobox .group.focus {
outline: 2px solid black;
outline-offset: 1px;
}

.combobox .group.focus input,
.combobox .group.focus button {
background-color: #DEF;
}

.combobox .group svg polygon {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above, three levels max would be nice

fill: gray;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change this to fill: currentColor; to fix High Contrast Mode.

stroke: gray;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change this to stroke: currentColor; to fix High Contrast Mode.

}

.combobox button.open svg polygon,
.combobox .group.focus svg polygon {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here as well

fill: black;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change this to fill: currentColor; to fix High Contrast Mode.

stroke: black;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change this to stroke: currentColor; to fix High Contrast Mode.

}

ul[role="listbox"] {
margin: 0;
padding: 0;
Expand All @@ -50,26 +70,29 @@ ul[role="listbox"] {
box-sizing: border-box;
border: 1px gray solid;
border-top: none;
max-height: 12em;
max-height: 11.4em;
width: 12rem;
overflow: scroll;
overflow-x: hidden;
font-size: 87.5%;
}

ul[role="listbox"] li[role="option"] {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
display: block;
padding-left: 0.3em;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
padding: 0.1em 0.3em;
}

/* focus and hover styling */

[role="listbox"].focus [role="option"][aria-selected="true"] {
background-color: #DEF;
border-color: #8CCBF2;
padding-top: 0;
padding-bottom: 0;
border-top: 0.2em solid #8CCBF2;
border-bottom: 0.2em solid #8CCBF2;
}

@media (forced-colors: active), (-ms-high-contrast: active) {
Expand Down
Loading