jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ssR-1668/1683 Accessibility updates for date picker

Browse source
This commit is contained in:
Alex Humphries 2024-11-07 11:59:49 -05:00
parent 0081ed569d
commit 573a08743d
1 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/digital-components/date-picker/date-picker.vue
View file

@ -74,8 +74,9 @@
@click="fireDateSelectedEvent"
@keypress.enter="fireDateSelectedEvent" />
<label
:aria-label="getDateLabel(date, month)"
:for="`${month.monthLabel}-${date.dateNum.toString()}`">
<span>{{ date.dateNum.toString() }}</span>
<span aria-hidden="true">{{ date.dateNum.toString() }}</span>
</label>
</div>
</div>
@ -785,6 +786,19 @@ export default {
}
};
window.requestAnimationFrame(step);
},
getDateLabel(date, month) {
const dateStr = `${month.yearNum?.toString()}-${month.monthIndex?.toString()}-${date.dateNum.toString()}`;
const dateObj = convertDateStringToDate(dateStr);
const labelOptions = {
weekday: 'long',
month: 'long',
day: 'numeric',
year: 'numeric'
};
let label = dateObj.toLocaleDateString('en-US', labelOptions);
date.isSelectable ? label += ', available' : label += ', unavailable';
return label;
}
}
};