fix(ui-date-input): fix DateInput2 not working with NVDA

Closes: INSTUI-4356

NVDA really does not like if we give role=listbox to a table, removing it fixes it getting stuck
TEST PLAN:
Try navigating a DateInput2 example with VO, NVDA, JAWS

Author: matyasf

packages/ui-a11y-content/src/AccessibleContent/index.tsx

@@ -33,11 +33,13 @@ import { propTypes, allowedProps } from './props'
 import type { AccessibleContentProps } from './props'
 
 /**
----
-category: components/utilities
----
-@module AccessibleContent
-**/
+ * ---
+ * category: components/utilities
+ * ---
+ * This component hides its children from screenreaders, they will read the text
+ * specified by the `alt` prop instead
+ * @module AccessibleContent
+ */
 class AccessibleContent extends Component<AccessibleContentProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps

packages/ui-a11y-content/src/AccessibleContent/props.ts

@@ -31,13 +31,18 @@ import type {
 } from '@instructure/shared-types'
 
 type AccessibleContentOwnProps = {
+  /**
+   * The text that screenreaders will read. Will not be visible.
+   */
   alt?: string
 
   /**
    * the element type to render the screen reader content as
    */
   as: AsElementType
-
+  /**
+   * Content that will be hidden from screenreaders (via `aria-hidden` set to `true`)
+   */
   children?: React.ReactNode
 }
 

packages/ui-date-input/src/DateInput2/__new-tests__/DateInput2.test.tsx

@@ -127,7 +127,7 @@ describe('<DateInput2 />', () => {
 
   it('should not show calendar table by default', async () => {
     render(<DateInputExample />)
-    const calendarTable = screen.queryByRole('listbox')
+    const calendarTable = screen.queryByRole('table')
 
     expect(calendarTable).not.toBeInTheDocument()
   })
@@ -141,8 +141,7 @@ describe('<DateInput2 />', () => {
     await userEvent.click(calendarButton)
 
     await waitFor(() => {
-      const calendarTable = screen.queryByRole('listbox')
-
+      const calendarTable = screen.queryByRole('table')
       expect(calendarTable).toBeInTheDocument()
     })
   })
@@ -258,7 +257,7 @@ describe('<DateInput2 />', () => {
     await userEvent.click(calendarButton)
 
     await waitFor(() => {
-      const calendarTable = screen.queryByRole('listbox')
+      const calendarTable = screen.queryByRole('table')
 
       expect(calendarTable).not.toBeInTheDocument()
     })

packages/ui-date-input/src/DateInput2/index.tsx

@@ -316,7 +316,6 @@ const DateInput2 = ({
             visibleMonth={selectedDate}
             locale={getLocale()}
             timezone={getTimezone()}
-            role="listbox"
             renderNextMonthButton={
               <IconButton
                 size="small"

packages/ui-react-utils/src/getElementType.ts

@@ -41,7 +41,13 @@ interface PropsObject {
  * ---
  * category: utilities/react
  * ---
- * Get the React element type for a component.
+ * Get the React element type for a component. It uses the following logic:
+ * 1. type defined by the `as` prop
+ * 2. type returned by the `getDefault()` parameter
+ * 3. `<a>` if it has a `href` or `to` prop
+ * 4. `<button>` if it has an `onClick` prop
+ * 5. the component's defaultProp's `as` field
+ * 6. `<span>` if none of the above
  *
  * @module getElementType
  * @param {ComponentType} Component