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

Merge pull request #895 from Safelite/feature/SSR-1668-and-1683

Browse source 
SSR-1668/1683 Accessibility updates for date picker
This commit is contained in:
AHumphriesSL 2024-11-11 09:03:05 -05:00 committed by GitHub
commit 140e090a24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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;
}
}
};