Skip to content

Calendar: add ARIA labels #1476

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

Merged
MLoughry merged 12 commits into from
Apr 20, 2017
Merged

Calendar: add ARIA labels #1476

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c231983
Add aria labels for Calendar items
MLoughry Apr 11, 2017
486c15d
Add change file
MLoughry Apr 11, 2017
bdd5061
Merge branch 'master' into calendar/add-aria-labels
MLoughry Apr 11, 2017
d8fa7fe
Merge branch 'master' into calendar/add-aria-labels
MLoughry Apr 11, 2017
f6836de
Merge branch 'master' into calendar/add-aria-labels
MLoughry Apr 11, 2017
dc1e667
Merge branch 'master' into calendar/add-aria-labels
MLoughry Apr 11, 2017
2e15942
Merge branch 'master' into calendar/add-aria-labels
MLoughry Apr 12, 2017
bcc01ea
Merge branch 'master' into calendar/add-aria-labels
micahgodbolt Apr 13, 2017
2ec6c1d
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
MLoughry Apr 17, 2017
426d89e
Check for Intl API method existence
MLoughry Apr 17, 2017
7ef9640
Merge branch 'master' into calendar/add-aria-labels
micahgodbolt Apr 20, 2017
e91abe9
Merge branch 'master' into calendar/add-aria-labels
MLoughry Apr 20, 2017
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
10 changes: 10 additions & 0 deletions common/changes/calendar-add-aria-labels_2017-04-11-20-16.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Calendar: Add ARIA labels to day and month buttons",
"type": "patch"
}
],
"email": "miclo@microsoft.com"
}
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
onKeyDown={ (ev: React.KeyboardEvent<HTMLElement>) =>
this._navigateMonthEdge(ev, day.originalDate, weekIndex, dayIndex) }
aria-selected={ day.isSelected }
aria-label={ day.originalDate.toLocaleDateString() }

@dzearing dzearing Apr 15, 2017 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This I believe requires IE11, which may not work on IE10. Though we plan to not support IE10 in the near future, just to be safe here couldn't we just ask the user to pass this in? Or at least make sure that day.originalDate.toLocaleDateString exists before calling it?

id={ compareDates(navigatedDate, day.originalDate) ? activeDescendantId : null }
data-is-focusable={ true }
ref={ compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null }
Expand Down
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
className={ css('ms-DatePicker-monthOption', styles.monthOption) }
key={ index }
onClick={ this._selectMonthCallbacks[index] }
aria-label={ setMonth(navigatedDate, index).toLocaleString([], { month: 'long', year: 'numeric' }) }
data-is-focusable={ true }
>
{ month }
Expand Down