DatePicker blog post and docs updates (#3233)

Author: devongovett

README.md

@@ -20,6 +20,12 @@ A library of React Hooks that provides cross-platform state management for your
 
 [More information about React Stately](https://react-spectrum.adobe.com/react-stately/index.html)
 
+### Internationalized
+
+A collection of framework-agnostic internationalization libraries for the web.
+
+[Internationalized Packages](https://react-spectrum.adobe.com/internationalized/index.html)
+
 ## Features
 
 * ♿️ **[Accessible](https://react-spectrum.adobe.com/react-aria/accessibility.html)** – Accessibility and behavior is implemented according to [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/), including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.

packages/@internationalized/date/docs/CalendarDate.mdx

@@ -48,6 +48,15 @@ import {parseDate} from '@internationalized/date';
 let date = parseDate('2022-02-03');
 ```
 
+Today's date can be retrieved using the <TypeLink links={docs.links} type={docs.exports.today} /> function. This requires a time zone identifier to be provided, which is used to determine the local date. The <TypeLink links={docs.links} type={docs.exports.getLocalTimeZone} /> function can be used to retrieve the user's current time zone.
+
+```tsx
+import {today, getLocalTimeZone} from '@internationalized/date';
+
+let nyDate = today('America/New_York');
+let localDate = today(getLocalTimeZone());
+```
+
 Once you have a `CalendarDate` object, you can read its properties, or manipulate it as described in the [Manipulating dates](#manipulating-dates) section below. You can also convert it to an ISO 8601 string, native JavaScript `Date` object, or another representation. See the [Conversion](#conversion) section below for details.
 
 ```tsx
@@ -320,7 +329,7 @@ isWeekday(date, 'en-US'); // false
 isWeekday(date, 'he-IL'); // true
 
 isWeekend(date, 'en-US'); // true
-isWeekday(date, 'he-IL'); // false
+isWeekend(date, 'he-IL'); // false
 ```
 
 ### Weeks in month

packages/@internationalized/date/docs/CalendarDateTime.mdx

@@ -378,7 +378,7 @@ isWeekday(date, 'en-US'); // false
 isWeekday(date, 'he-IL'); // true
 
 isWeekend(date, 'en-US'); // true
-isWeekday(date, 'he-IL'); // false
+isWeekend(date, 'he-IL'); // false
 ```
 
 ### Weeks in month

packages/@internationalized/date/docs/ZonedDateTime.mdx

@@ -61,6 +61,15 @@ let date = parseAbsolute('2021-11-07T07:45:00Z', 'America/Los_Angeles');
 let date = parseAbsoluteToLocal('2021-11-07T07:45:00Z');
 ```
 
+The current time can be retrieved using the <TypeLink links={docs.links} type={docs.exports.now} /> function. This requires a time zone identifier to be provided, which is used to determine the local time. The <TypeLink links={docs.links} type={docs.exports.getLocalTimeZone} /> function can be used to retrieve the user's current time zone.
+
+```tsx
+import {now, getLocalTimeZone} from '@internationalized/date';
+
+let nyTime = now('America/New_York');
+let localTime = now(getLocalTimeZone());
+```
+
 Once you have a `ZonedDateTime` object, you can read its properties, or manipulate it as described in the [Manipulating dates](#manipulating-dates) section below. You can also convert it to an ISO 8601 string, native JavaScript `Date` object, or another representation. See the [Conversion](#conversion) section below for details.
 
 ```tsx
@@ -464,7 +473,7 @@ isWeekday(date, 'en-US'); // false
 isWeekday(date, 'he-IL'); // true
 
 isWeekend(date, 'en-US'); // true
-isWeekday(date, 'he-IL'); // false
+isWeekend(date, 'he-IL'); // false
 ```
 
 ### Weeks in month

packages/@internationalized/date/docs/index.mdx

@@ -17,7 +17,8 @@ import packageData from '@internationalized/date/package.json';
 category: Date and Time
 keywords: [date, time]
 order: -1
-title: Introduction
+navigationTitle: Introduction
+description: The @internationalized/date package provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
 ---
 
 # @internationalized/date

packages/@internationalized/number/docs/index.mdx

@@ -17,7 +17,8 @@ import packageData from '@internationalized/number/package.json';
 category: Numbers
 keywords: [number, internationalization]
 order: 0
-title: Introduction
+navigationTitle: Introduction
+description: The @internationalized/number package provides utilities for formatting and parsing numbers across locales and numbering systems.
 ---
 
 # @internationalized/number

packages/@react-aria/calendar/docs/useCalendar.mdx

@@ -51,9 +51,13 @@ There is no standalone calendar element in HTML. `<input type="date">` is close,
 * **Accessible** – Calendar cells can be navigated and selected using the keyboard, and localized screen reader messages are included to announce when the selection and visible date range change.
 * **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
 
+Read our [blog post](../blog/date-and-time-pickers-for-all.html) for more details about the internationalization, accessibility, and user experience features implemented by `useCalendar`.
+
 ## Anatomy
 
-<Anatomy />
+<Anatomy
+  role="img"
+  aria-label="Anatomy diagram of a calendar component, which consists of a heading, grid of cells, previous, and next buttons." />
 
 A calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date.
 

packages/@react-aria/calendar/docs/useRangeCalendar.mdx

@@ -50,9 +50,13 @@ There is no standalone range calendar element in HTML. Two separate `<input type
 * **Touch friendly** – Date ranges can be selected by dragging over dates in the calendar using a touch screen, and all interactions are accessible using touch-based screen readers.
 * **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
 
+Read our [blog post](../blog/date-and-time-pickers-for-all.html) for more details about the internationalization, accessibility, and user experience features implemented by `useRangeCalendar`.
+
 ## Anatomy
 
-<Anatomy />
+<Anatomy
+  role="img"
+  aria-label="Anatomy diagram of a range calendar component, which consists of a heading, grid of cells, previous, and next buttons." />
 
 A range calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating through time. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date range. Once a start date is selected, the user can navigate to another date using the keyboard or by hovering over it, and clicking it or pressing the <Keyboard>Enter</Keyboard> key commits the selected date range.
 

packages/@react-aria/datepicker/docs/useDateField.mdx

@@ -49,9 +49,13 @@ A date field can be built using `<input type="date">`, but this is very limited
 * **Touch friendly** – Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
 * **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
 
+Read our [blog post](../blog/date-and-time-pickers-for-all.html) for more details about the internationalization, accessibility, and user experience features implemented by `useDateField`.
+
 ## Anatomy
 
-<Anatomy />
+<Anatomy
+  role="img"
+  aria-label="Anatomy diagram of a date field component, which consists of a label, field, segments for each date unit." />
 
 A date field consists of a label, and a group of segments representing each unit of a date and time (e.g. years, months, days, etc.). Each segment is individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
 
@@ -261,7 +265,7 @@ import {parseZonedDateTime} from '@internationalized/date';
   defaultValue={parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]')} />
 ```
 
-`useDateField` displays times in the time zone included in the `ZoneDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
+`useDateField` displays times in the time zone included in the `ZonedDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
 
 ```tsx example
 import {parseAbsoluteToLocal} from '@internationalized/date';

packages/@react-aria/datepicker/docs/useDatePicker.mdx

@@ -49,9 +49,13 @@ A date picker can be built using `<input type="date">`, but this is very limited
 * **Touch friendly** – Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
 * **Customizable** – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.
 
+Read our [blog post](../blog/date-and-time-pickers-for-all.html) for more details about the internationalization, accessibility, and user experience features implemented by `useDatePicker`.
+
 ## Anatomy
 
-<Anatomy />
+<Anatomy
+  role="img"
+  aria-label="Anatomy diagram of an expanded date picker component, which consists of a labelled group containing a date field, and a button that toggles a popover dialog containing a calendar." />
 
 A date picker consists of a label, and group containing a [date field](useDateField.html) and a button. Clicking the button opens a popup containing a [calendar](useCalendar.html). The date field includes segments representing each unit of a date and time (e.g. years, months, days, etc.), each of which is individually focusable and editable using the keyboard. The calendar popup offers a more visual way of choosing a date.
 
@@ -518,7 +522,7 @@ import {parseZonedDateTime} from '@internationalized/date';
   defaultValue={parseZonedDateTime('2022-11-07T00:45[America/Los_Angeles]')} />
 ```
 
-`useDatePicker` displays times in the time zone included in the `ZoneDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
+`useDatePicker` displays times in the time zone included in the `ZonedDateTime` object. The above example is always displayed in Pacific Standard Time because the `America/Los_Angeles` time zone identifier is provided. [@internationalized/date](../internationalized/date/) includes functions for converting dates between time zones, or parsing a date directly into a specific time zone or the user's local time zone, as shown below.
 
 ```tsx example
 import {parseAbsoluteToLocal} from '@internationalized/date';