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

Jump to bottom

Combobox examples with listbox popup: Add properties and states to listbox control button #1336

Merged
merged 10 commits into from
Mar 9, 2020
Merged

Combobox examples with listbox popup: Add properties and states to listbox control button #1336

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
75777c9
added aria properties and correct label to button that opens anc clos…
jongund Feb 16, 2020
a40c168
updated regression test for new aria properties on button
jongund Feb 16, 2020
c862f31
updated combobox examples based Matt's feedback
jongund Feb 17, 2020
a4d4ce0
updated documentation for button
jongund Feb 17, 2020
c0dfc7f
fixed unclosed section bug
jongund Feb 17, 2020
431de15
updated css for high contrast support
jongund Feb 17, 2020
89a7833
updated css
jongund Feb 17, 2020
8b213b5
Minor editorial revision to tabindex documentation for the button
mcking65 Feb 28, 2020
1bc542e
Apply suggestions from code review
zcorpan Mar 3, 2020
78d88a6
Merge branch 'master' into issue1333-add-aria-to-button
mcking65 Mar 8, 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
44 changes: 41 additions & 3 deletions examples/combobox/combobox-autocomplete-both.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,16 @@ <h2 id="ex_label">Example</h2>
<div class="combobox combobox-list">
<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">
aria-expanded="false" aria-controls="cb1-listbox">
<button type="button" id="cb1-button" aria-label="State" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
mcking65 marked this conversation as resolved.
Show resolved Hide resolved
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="lb1" role="listbox" aria-label="States">
<ul id="cb1-listbox" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
<li id="lb1-ak" role="option">Alaska</li>
<li id="lb1-as" role="option">American Samoa</li>
Expand Down Expand Up @@ -426,6 +426,44 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>

<h3 id="rps_label_button">Button</h3>
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="button-aria-controls">
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<td></td>
<th scope="row">
<code>aria-controls="#IDREF"</code>
</th>
<td><code>button</code></td>
<td>Identifies the element that serves as the popup.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="false"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="true"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
</tbody>
</table>
</section>

<section>
Expand Down
40 changes: 38 additions & 2 deletions examples/combobox/combobox-autocomplete-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <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">
<button id="cb1-button" tabindex="-1" aria-label="State" aria-expanded="false" aria-controls="cb1-listbox">
Copy link
Contributor

Choose a reason for hiding this comment

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

Same recommendation as above:

Suggested change
<button id="cb1-button" tabindex="-1" aria-label="State" aria-expanded="false" aria-controls="cb1-listbox">
<button id="cb1-button" tabindex="-1" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox">

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed

<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
Expand Down Expand Up @@ -422,8 +422,44 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>
</section>

<h3 id="rps_label_button">Button</h3>
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="button-aria-controls">
mcking65 marked this conversation as resolved.
Show resolved Hide resolved
<td></td>
<th scope="row">
<code>aria-controls="#IDREF"</code>
</th>
<td><code>button</code></td>
<td>Identifies the element that serves as the popup.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="false"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="true"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
</tbody>
</table>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
Expand Down
41 changes: 38 additions & 3 deletions examples/combobox/combobox-autocomplete-none.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <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">
<button type="button" id="cb1-button" tabindex="-1" aria-label="State" aria-expanded="false" aria-controls="cb1-listbox" >
mcking65 marked this conversation as resolved.
Show resolved Hide resolved
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
Expand Down Expand Up @@ -371,8 +371,43 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>
</section>

<h3 id="rps_label_button">Button</h3>
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="button-aria-controls">
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<td></td>
<th scope="row">
<code>aria-controls="#IDREF"</code>
</th>
<td><code>button</code></td>
<td>Identifies the element that serves as the popup.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="false"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="true"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
</tbody>
</table>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
Expand Down
2 changes: 1 addition & 1 deletion examples/combobox/css/combobox-autocomplete.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
outline: none;
}

.combobox button.open svg {
.combobox button[aria-expanded="true"] svg {
transform: rotate(180deg) translate(0, -1px);
}

Expand Down
4 changes: 2 additions & 2 deletions examples/combobox/js/combobox-autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ ComboboxAutocomplete.prototype.hasOptions = function () {
ComboboxAutocomplete.prototype.open = function () {
this.listboxNode.style.display = 'block';
this.comboboxNode.setAttribute('aria-expanded', 'true');
this.buttonNode.classList.add('open');
this.buttonNode.setAttribute('aria-expanded', 'true');
};

ComboboxAutocomplete.prototype.close = function (force) {
Expand All @@ -260,7 +260,7 @@ ComboboxAutocomplete.prototype.close = function (force) {
this.setCurrentOptionStyle(false);
this.listboxNode.style.display = 'none';
this.comboboxNode.setAttribute('aria-expanded', 'false');
this.buttonNode.classList.remove('open');
this.buttonNode.setAttribute('aria-expanded', 'false');
this.setActiveDescendant(false);
}
};
Expand Down
71 changes: 71 additions & 0 deletions test/tests/combobox_autocomplete-both.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const ex = {
textboxSelector: '#ex1 input[type="text"]',
listboxSelector: '#ex1 [role="listbox"]',
optionsSelector: '#ex1 [role="option"]',
buttonSelector: '#ex1 button',
numAOptions: 5,
secondAOption: 'Alaska'

Expand Down Expand Up @@ -149,6 +150,76 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});

ariaTest('"aria-controls" attribute on button element', exampleFile, 'button-aria-controls', async (t) => {
t.plan(2);

const popupId = await t.context.session
.findElement(By.css(ex.buttonSelector))
.getAttribute('aria-controls');

t.truthy(
popupId,
'"aria-controls" attribute should exist on: ' + ex.buttonSelector
);

const popupElements = await t.context.session
.findElement(By.id('ex1'))
.findElements(By.id(popupId));

t.is(
popupElements.length,
1,
'There should be a element with id "' + popupId + '" as referenced by the aria-controls attribute'
);
});

ariaTest('"aria-expanded" on button element', exampleFile, 'button-aria-expanded', async (t) => {
t.plan(4);

const button = await t.context.session.findElement(By.css(ex.buttonSelector));

// Check that aria-expanded is false and the listbox is not visible before interacting

t.is(
await button.getAttribute('aria-expanded'),
'false',
'button element should have attribute "aria-expanded" set to false by default.'
);

const popupId = await t.context.session
.findElement(By.css(ex.textboxSelector))
.getAttribute('aria-controls');

const popupElement = await t.context.session
.findElement(By.id('ex1'))
.findElement(By.id(popupId));

t.false(
await popupElement.isDisplayed(),
'Popup element should not be displayed when \'aria-expanded\' is false\''
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
);

// Send key "a" to textbox

await t.context.session
.findElement(By.css(ex.textboxSelector))
.sendKeys('a');

// Check that aria-expanded is true and the listbox is visible

t.is(
await button.getAttribute('aria-expanded'),
'true',
'button element should have attribute "aria-expand" set to true after typing.'
);

t.true(
await popupElement.isDisplayed(),
'Popup element should be displayed when \'aria-expanded\' is true\''
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
);

});

// Keys

ariaTest('Test alt + down key press with focus on textbox',
Expand Down
72 changes: 72 additions & 0 deletions test/tests/combobox_autocomplete-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const ex = {
textboxSelector: '#ex1 input[type="text"]',
listboxSelector: '#ex1 [role="listbox"]',
optionsSelector: '#ex1 [role="option"]',
buttonSelector: '#ex1 button',
numAOptions: 5
};

Expand Down Expand Up @@ -154,6 +155,77 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});

ariaTest('"aria-controls" attribute on button element', exampleFile, 'button-aria-controls', async (t) => {
t.plan(2);

const popupId = await t.context.session
.findElement(By.css(ex.buttonSelector))
.getAttribute('aria-controls');

t.truthy(
popupId,
'"aria-controls" attribute should exist on: ' + ex.buttonSelector
);

const popupElements = await t.context.session
.findElement(By.id('ex1'))
.findElements(By.id(popupId));

t.is(
popupElements.length,
1,
'There should be a element with id "' + popupId + '" as referenced by the aria-controls attribute'
);
});


ariaTest('"aria-expanded" on button element', exampleFile, 'button-aria-expanded', async (t) => {
t.plan(4);

const button = await t.context.session.findElement(By.css(ex.buttonSelector));

// Check that aria-expanded is false and the listbox is not visible before interacting

t.is(
await button.getAttribute('aria-expanded'),
'false',
'button element should have attribute "aria-expanded" set to false by default.'
);

const popupId = await t.context.session
.findElement(By.css(ex.textboxSelector))
.getAttribute('aria-controls');

const popupElement = await t.context.session
.findElement(By.id('ex1'))
.findElement(By.id(popupId));

t.false(
await popupElement.isDisplayed(),
'Popup element should not be displayed when \'aria-expanded\' is false\''
);

// Send key "a" to textbox

await t.context.session
.findElement(By.css(ex.textboxSelector))
.sendKeys('a');

// Check that aria-expanded is true and the listbox is visible

t.is(
await button.getAttribute('aria-expanded'),
'true',
'button element should have attribute "aria-expand" set to true after typing.'
);

t.true(
await popupElement.isDisplayed(),
'Popup element should be displayed when \'aria-expanded\' is true\''
);

});


// Keys

Expand Down
Loading