Commit 429c17d9 authored by dbeam's avatar dbeam Committed by Commit bot

history: more VoiceOver enhancements.

- make each device contents an ordered list so we get "list 5 items" spoken.
- add a title to each ContextMenuButton so "Actions" is said instead of just "button".
- remove "required" from search input as it is spoken and unnecessary.
- create a useful summary aria-label for checkboxes so users can scroll quickly through entries

R=dmazzoni@chromium.org
BUG=385344

Review URL: https://codereview.chromium.org/664863004

Cr-Commit-Position: refs/heads/master@{#300551}
parent bc91db51
...@@ -578,6 +578,12 @@ Psst! Incognito mode <ph name="SHORTCUT_KEY">$1<ex>(Ctrl+Shift+N)</ex></ph> may ...@@ -578,6 +578,12 @@ Psst! Incognito mode <ph name="SHORTCUT_KEY">$1<ex>(Ctrl+Shift+N)</ex></ph> may
<message name="IDS_HISTORY_UNKNOWN_DEVICE" desc="On the dropdown menu for a history entry, the text that is shown instead of a device name, when the device name is not known."> <message name="IDS_HISTORY_UNKNOWN_DEVICE" desc="On the dropdown menu for a history entry, the text that is shown instead of a device name, when the device name is not known.">
Unknown device Unknown device
</message> </message>
<message name="IDS_HISTORY_ENTRY_BOOKMARKED" desc="Whether a history entry is bookmarked.">
Bookmarked
</message>
<message name="IDS_HISTORY_ENTRY_SUMMARY" desc="Summary of all the fields in a history entry (time, whether the entry is bookmarked, title, and domain).">
<ph name="TIME"><ex>3:14</ex>$1</ph> <ph name="BOOKMARKED"><ex>bookmarked</ex>$2</ph> <ph name="TITLE"><ex>PI: The Magical Number</ex>$3</ph> <ph name="DOMAIN"><ex>pi.com</ex>$4</ph>
</message>
<!-- Generic terms --> <!-- Generic terms -->
<message name="IDS_OK" desc="Used for OK on buttons"> <message name="IDS_OK" desc="Used for OK on buttons">
......
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<h1 i18n-content="history"></h1> <h1 i18n-content="history"></h1>
<div id="search-form" class="search-field-container"> <div id="search-form" class="search-field-container">
<input type="search" id="search-field" <input type="search" id="search-field"
i18n-values="aria-label:searchButton" required> i18n-values="aria-label:searchButton">
<input type="submit" id="search-button" <input type="submit" id="search-button"
i18n-values="value:searchButton"> i18n-values="value:searchButton">
</div> </div>
......
...@@ -187,7 +187,7 @@ Visit.prototype.getResultDOM = function(propertyBag) { ...@@ -187,7 +187,7 @@ Visit.prototype.getResultDOM = function(propertyBag) {
var entryBox = createElementWithClassName('div', 'entry-box'); var entryBox = createElementWithClassName('div', 'entry-box');
var domain = createElementWithClassName('div', 'domain'); var domain = createElementWithClassName('div', 'domain');
this.id_ = this.model_.nextVisitId_++; this.id_ = this.model_.getNextVisitId();
var self = this; var self = this;
// Only create the checkbox if it can be used either to delete an entry or to // Only create the checkbox if it can be used either to delete an entry or to
...@@ -196,9 +196,13 @@ Visit.prototype.getResultDOM = function(propertyBag) { ...@@ -196,9 +196,13 @@ Visit.prototype.getResultDOM = function(propertyBag) {
var checkbox = document.createElement('input'); var checkbox = document.createElement('input');
checkbox.type = 'checkbox'; checkbox.type = 'checkbox';
checkbox.id = 'checkbox-' + this.id_; checkbox.id = 'checkbox-' + this.id_;
checkbox.setAttribute('aria-label',
loadTimeData.getString('removeFromHistory'));
checkbox.time = this.date.getTime(); checkbox.time = this.date.getTime();
checkbox.setAttribute('aria-label', loadTimeData.getStringF(
'entrySummary',
this.dateTimeOfDay,
this.starred_ ? loadTimeData.getString('bookmarked') : '',
this.title_,
this.domain_));
checkbox.addEventListener('click', checkboxClicked); checkbox.addEventListener('click', checkboxClicked);
entryBox.appendChild(checkbox); entryBox.appendChild(checkbox);
...@@ -743,6 +747,14 @@ HistoryModel.prototype.removeVisit = function(visit) { ...@@ -743,6 +747,14 @@ HistoryModel.prototype.removeVisit = function(visit) {
this.visits_.splice(index, 1); this.visits_.splice(index, 1);
}; };
/**
* Automatically generates a new visit ID.
* @return {number} The next visit ID.
*/
HistoryModel.prototype.getNextVisitId = function() {
return this.nextVisitId_++;
};
// HistoryModel, Private: ----------------------------------------------------- // HistoryModel, Private: -----------------------------------------------------
/** /**
......
...@@ -38,6 +38,11 @@ ...@@ -38,6 +38,11 @@
white-space: nowrap; white-space: nowrap;
} }
.device-contents {
margin: 0;
padding: 0;
}
.device-tab-entry { .device-tab-entry {
-webkit-margin-end: 8px; -webkit-margin-end: 8px;
-webkit-margin-start: 0; -webkit-margin-start: 0;
......
...@@ -189,6 +189,7 @@ Device.prototype.getDOMNode = function(maxNumTabs, row) { ...@@ -189,6 +189,7 @@ Device.prototype.getDOMNode = function(maxNumTabs, row) {
var dropDownButton = new cr.ui.ContextMenuButton; var dropDownButton = new cr.ui.ContextMenuButton;
dropDownButton.tabIndex = 0; dropDownButton.tabIndex = 0;
dropDownButton.classList.add('drop-down'); dropDownButton.classList.add('drop-down');
dropDownButton.title = loadTimeData.getString('actionMenuDescription');
dropDownButton.addEventListener('mousedown', function(event) { dropDownButton.addEventListener('mousedown', function(event) {
handleDropDownFocus(event); handleDropDownFocus(event);
// Mousedown handling of cr.ui.MenuButton.handleEvent calls // Mousedown handling of cr.ui.MenuButton.handleEvent calls
...@@ -242,7 +243,7 @@ Device.prototype.setSearchText = function(searchText) { ...@@ -242,7 +243,7 @@ Device.prototype.setSearchText = function(searchText) {
* @private * @private
*/ */
Device.prototype.createSessionContents_ = function(maxNumTabs) { Device.prototype.createSessionContents_ = function(maxNumTabs) {
var contents = createElementWithClassName('div', 'device-contents'); var contents = createElementWithClassName('ol', 'device-contents');
var sessionTag = this.session_.tag; var sessionTag = this.session_.tag;
var numTabsShown = 0; var numTabsShown = 0;
......
...@@ -173,6 +173,8 @@ content::WebUIDataSource* CreateHistoryUIHTMLSource(Profile* profile) { ...@@ -173,6 +173,8 @@ content::WebUIDataSource* CreateHistoryUIHTMLSource(Profile* profile) {
source->AddLocalizedString("cancel", IDS_CANCEL); source->AddLocalizedString("cancel", IDS_CANCEL);
source->AddLocalizedString("deleteConfirm", source->AddLocalizedString("deleteConfirm",
IDS_HISTORY_DELETE_PRIOR_VISITS_CONFIRM_BUTTON); IDS_HISTORY_DELETE_PRIOR_VISITS_CONFIRM_BUTTON);
source->AddLocalizedString("bookmarked", IDS_HISTORY_ENTRY_BOOKMARKED);
source->AddLocalizedString("entrySummary", IDS_HISTORY_ENTRY_SUMMARY);
source->AddBoolean("isFullHistorySyncEnabled", source->AddBoolean("isFullHistorySyncEnabled",
WebHistoryServiceFactory::GetForProfile(profile) != NULL); WebHistoryServiceFactory::GetForProfile(profile) != NULL);
source->AddBoolean("groupByDomain", source->AddBoolean("groupByDomain",
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment