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

some accessibilty changes #359

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

some accessibilty changes #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/UXClient/Components/AvailabilityChart/AvailabilityChart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,14 +310,14 @@ class AvailabilityChart extends ChartComponent{
.classed("tsi-zoomButtonContainer", true);
buttonsDiv.append("button")
.attr("class", "tsi-zoomButton tsi-zoomButtonIn")
.attr('aria-label', this.getString('zoom in'))
.attr('aria-label', this.getString('A line chart zoom in'))
.attr('title', this.getString('zoom in'))
.on("click", () => {
this.zoom("in", midpoint);
});
buttonsDiv.append("button")
.attr("class", "tsi-zoomButton tsi-zoomButtonOut")
.attr('aria-label', this.getString('zoom out'))
.attr('aria-label', this.getString('A line chart zoom out'))
.attr('title', this.getString('zoom out'))
.on("click", () => {
this.zoom("out", midpoint);
Expand Down
12 changes: 10 additions & 2 deletions src/UXClient/Components/DateTimePicker/DateTimePicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@
}
}

.tsi-timeRequired {
color: #a80000;
}

.tsi-dateTimePicker {

animation: tsi-slideIn 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
Expand Down Expand Up @@ -260,7 +264,7 @@
border-radius: 2px;
line-height: 14px;
&.tsi-buttonDisabled {
background-color: grey;
background-color: grey !important;
}
}

Expand All @@ -273,8 +277,12 @@
}

.tsi-errorMessageContainer {
background-color: darkorange;
background-color: #B36200;
color: white;
@media screen and (-ms-high-contrast: active) {
-ms-high-contrast-adjust: none;
background-color: #B36200;
}
.tsi-errorMessage {
padding: 8px;
}
Expand Down
63 changes: 34 additions & 29 deletions src/UXClient/Components/DateTimePicker/DateTimePicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ class DateTimePicker extends ChartComponent{
["Last 30 Days", 30 * 24 * 60 * 60 * 1000],
["Last 90 Days", 90 * 24 * 60 * 60 * 1000]
];


constructor(renderTarget: Element){
super(renderTarget);
Expand Down Expand Up @@ -85,7 +85,7 @@ class DateTimePicker extends ChartComponent{
var oldOffsetMinutes = Utils.getMinutesToUTC(oldOffset, this[currValue]);
var utcMillis = this[currValue] - (oldOffsetMinutes * 60 * 1000);
this[currValue] = utcMillis - Utils.getOffsetMinutes(this.chartOptions.offset, utcMillis) * 60 * 1000;
});
});

this.setFromMillis(this.fromMillis);
this.setToMillis(this.toMillis);
Expand All @@ -110,8 +110,8 @@ class DateTimePicker extends ChartComponent{
this.isSettingStartTime = true;
}

public render (chartOptions: any = {}, minMillis: number, maxMillis: number,
fromMillis: number = null, toMillis: number = null, onSet = null, onCancel = null) {
public render (chartOptions: any = {}, minMillis: number, maxMillis: number,
fromMillis: number = null, toMillis: number = null, onSet = null, onCancel = null) {
this.isSettingStartTime = true;
this.minMillis = minMillis;
this.maxMillis = maxMillis;
Expand All @@ -130,7 +130,7 @@ class DateTimePicker extends ChartComponent{
this.fromMillis = fromMillis;
this.toMillis = toMillis;
this.onSet = onSet;
this.onCancel = onCancel;
this.onCancel = onCancel;
this.targetElement = d3.select(this.renderTarget)
.classed("tsi-dateTimePicker", true);
this.targetElement.html('');
Expand Down Expand Up @@ -167,7 +167,7 @@ class DateTimePicker extends ChartComponent{
self.onSet(self.fromMillis, self.toMillis, self.chartOptions.offset, self.maxMillis === self.toMillis, self.getCurrentQuickTime());
self.onSaveOrCancel();
});

var cancelButton = saveButtonContainer.append('button')
.attr('class', 'tsi-cancelButton')
.text(this.getString('Cancel'))
Expand All @@ -188,8 +188,8 @@ class DateTimePicker extends ChartComponent{
//originally set toMillis to last possible time
this.toMillis = this.maxMillis;
this.setFromMillis(fromMillis);
this.setToMillis(toMillis);
this.setToMillis(toMillis);

this.targetElement.append("div").classed("tsi-errorMessageContainer", true);
this.createTimePicker();
this.createCalendar();
Expand All @@ -208,14 +208,14 @@ class DateTimePicker extends ChartComponent{
['from', 'to'].forEach((fromOrTo) => {
var selectedDate = new Date(this[fromOrTo + 'Millis']);
this.calendarPicker.setDate(this.roundDay(Utils.offsetFromUTC(selectedDate)));
this[fromOrTo + 'Input'].node().value = this.createTimeString(Utils.offsetFromUTC(selectedDate));
this[fromOrTo + 'Input'].node().value = this.createTimeString(Utils.offsetFromUTC(selectedDate));
})
}

private setFromQuickTimes (relativeMillis) {
this.isSettingStartTime = true;
this.setToMillis(this.maxMillis);
this.setFromMillis(this.maxMillis - relativeMillis);
this.setFromMillis(this.maxMillis - relativeMillis);
this.updateDisplayedFromDateTime();
this.updateDisplayedToDateTime();
this.calendarPicker.draw();
Expand All @@ -235,13 +235,13 @@ class DateTimePicker extends ChartComponent{
// wrap around tab order if dTP in modal form
let firstQuickTime = enteredQuickTimes.filter((d, i) => {
return (i === 0);
})
.on('keydown', () => {
if (d3.event.keyCode === 9 && d3.event.shiftKey && this.chartOptions.dTPIsModal) { // shift tab
this.dateTimeSelectionPanel.select(".tsi-saveButtonContainer").select(".tsi-cancelButton").node().focus();
d3.event.preventDefault();
}
});
})
.on('keydown', () => {
if (d3.event.keyCode === 9 && d3.event.shiftKey && this.chartOptions.dTPIsModal) { // shift tab
this.dateTimeSelectionPanel.select(".tsi-saveButtonContainer").select(".tsi-cancelButton").node().focus();
d3.event.preventDefault();
}
});

if (this.chartOptions.dTPIsModal) {
firstQuickTime.node().focus();
Expand Down Expand Up @@ -288,7 +288,7 @@ class DateTimePicker extends ChartComponent{
this.chartOptions.offset = newOffset;
this.setNewOffset(oldOffset);
if (matchingQuickTime !== -1) {
this.setFromQuickTimes(matchingQuickTime);
this.setFromQuickTimes(matchingQuickTime);
}
}, (typeof offset == "string" ? offset : "UTC"));
d3.select(timezonePicker.renderTarget).select('select')
Expand Down Expand Up @@ -345,7 +345,7 @@ class DateTimePicker extends ChartComponent{
};

//@ts-ignore
this.calendarPicker = new Pikaday({
this.calendarPicker = new Pikaday({
bound: false,
container: this.calendar.node(),
field: this.calendar.node(),
Expand All @@ -358,13 +358,13 @@ class DateTimePicker extends ChartComponent{
},
onDraw: (d) => {
if (this.isSettingStartTime)
return;
return;
var self = this;
this.calendar.select(".pika-single").selectAll(".pika-day")
.on("mouseover", function (d) {
.on("mouseover", function (d) {
var date = new Date( Number(d3.select(this).attr("data-pika-year")),
Number(d3.select(this).attr("data-pika-month")),
Number(d3.select(this).attr("data-pika-day")));
Number(d3.select(this).attr("data-pika-month")),
Number(d3.select(this).attr("data-pika-day")));
if (!self.isSettingStartTime) {
if (date.valueOf() < self.anchorDate.valueOf() && self.startRange.valueOf() != date.valueOf()) {
self.setTimeRange(date, false);
Expand All @@ -390,8 +390,8 @@ class DateTimePicker extends ChartComponent{
return (this.toMillis === this.maxMillis && (this.toMillis - this.fromMillis === d[1]));
}
this.quickTimesPanel.selectAll('.tsi-quickTime')
.classed('tsi-isSelected', isSelected)
.attr('aria-pressed', isSelected);
.classed('tsi-isSelected', isSelected)
.attr('aria-pressed', isSelected);
}

private setFromDate (calendarDate: Date) {
Expand Down Expand Up @@ -433,7 +433,7 @@ class DateTimePicker extends ChartComponent{
this.setIsSaveable(rangeErrorCheck.isSaveable);
this.displayRangeErrors(rangeErrorCheck.errors);
this.setSelectedQuickTimes();
}
}

private setToMillis (millis: number) {
var rangeErrorCheck = this.rangeIsValid(this.fromMillis, millis);
Expand All @@ -451,6 +451,8 @@ class DateTimePicker extends ChartComponent{
.enter()
.append("div")
.classed("tsi-errorMessage", true)
.attr('role', 'alert')
.attr('aria-live', 'assertive')
.text(d => d);
}
}
Expand Down Expand Up @@ -482,11 +484,11 @@ class DateTimePicker extends ChartComponent{
accumulatedErrors.push("*Start time is after last possible time (" + this.getTimeFormat()(this.maxMillis) + ")");
}
if (prospectiveToMillis > this.maxMillis) {
accumulatedErrors.push("*End time is after last possible time (" + this.getTimeFormat()(this.maxMillis) + ")");
accumulatedErrors.push("*End time is after last possible time (" + this.getTimeFormat()(this.maxMillis) + ")");
}
if (prospectiveToMillis < this.minMillis) {
accumulatedErrors.push("*End time is before first possible time (" + this.getTimeFormat()(this.minMillis) + ")");
}
}
}
return {
rangeIsValid : (accumulatedErrors.length == 0),
Expand Down Expand Up @@ -516,7 +518,7 @@ class DateTimePicker extends ChartComponent{
private offsetFromUTC (date: Date) {
var dateCopy = new Date(date.valueOf())
dateCopy.setTime(dateCopy.getTime() + dateCopy.getTimezoneOffset()*60*1000 );
return dateCopy;
return dateCopy;
}

private checkDateTimeValidity () {
Expand Down Expand Up @@ -547,6 +549,9 @@ class DateTimePicker extends ChartComponent{
.attr('for', inputID)
.attr('aria-label', `${startOrEnd === 'start' ? this.getString('Start time input') : this.getString('End time input')}`)
.text(this.getString(startOrEnd));
let timeRequired = timeLabel.append("span")
Copy link
Collaborator

Choose a reason for hiding this comment

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

I see you've declared the variable timeRequired here, where are you using it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have removed the timeRequired variable in my next commit.

.classed("tsi-timeRequired", true)
.text(this.getString('*'));
let inputName = startOrEnd === 'start' ? 'fromInput' : 'toInput'
this[inputName] = fromOrToContainer.append('input')
.attr('class', 'tsi-dateTimeInput', true)
Expand Down
3 changes: 3 additions & 0 deletions src/UXClient/Models/Strings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,12 @@ class Strings {
"timezone selection": "timezone selection",
"Start time input": "Start time input",
"End time input": "End time input",
"*": "*",
"snap end time to latest": "snap end time to latest",
"zoom in": "zoom in",
"zoom out": "zoom out",
Copy link
Contributor

@thomasricci thomasricci Jun 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Do you still need these "zoom in" "zoom out"?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We need this as it is used in title attribute.

"A line chart zoom in": "A line chart zoom in",
"A line chart zoom out": "A line chart zoom out",
"select quick time of": "select quick time of",
"a time selection control dialog": "a time selection control dialog.",
"a button to launch a time selection dialog current selected time is ": "a button to launch a time selection dialog. current selected time is ",
Expand Down