feat(RowList, BoxedRowList, Inline): support list a11y role (#1068)

WEB-1719

`RowList` and `BoxedRowList` will have `role="list"` by default, and the
children `Row`/`BoxedRow` elements will have the `role="listitem"` by
default.

`Inline` will allow to setup `role="list"` and their children will have
the `role="listitem` set automatically, as we were [already doing with
`Stack`](https:/Telefonica/mistica-web/blob/master/src/stack.tsx#L64)

Playroom to test the PR with a screen reader:

https://mistica-hxdstsm8w-tuentisre.vercel.app/playroom/preview/#?code=N4Igxg9gJgpiBcIA8AlCB3AMgSwM4BcA+AHQDsACc1Dc-bfAGxgF5iQAVept82XMAE7YADnQilWIACIx+Q0dnE9xABQGzczYAAoAlOWaFywAL4nyAehIUqadLS4s2nRjHIAmHn0EixEtjJyvooUniDkquq4mjr6hsZmltZIFnY4BNZkSABCEAAeMFBpeERklDn5hXYOrpIu3OHe8n6SgT4KSuGRGlp6Bkam5lZlVLkFRTR0tc6OHl6y7S0BC80hc12kaj2x-QlDyRZjVRjppaRZABIQQgBe4vgAhgwAyoIQDAzW5QCSpAzYpDcAneThA-wIPFwwgeYBYwAAHCYvpQqABhAAWIkIGJE5AAjCkccJkeUidjMcIPISKSS0TSieQAMzUrEjUn0inkAAsLOJbLpWIZAFZeciUr9-oCDldbvcnq9gR9rCAADQgfDomAAWzgiGyDAeAFcQCYgA

src/__tests__/list-test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {RowList, Row} from '../list';
+import {RowList, Row, BoxedRowList, BoxedRow} from '../list';
 import {RadioGroup} from '../radio-button';
 import {screen, render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -13,6 +13,40 @@ import {
 } from '..';
 import {makeTheme} from './test-utils';
 
+test('RowList has a list role by default', () => {
+ render(
+ <ThemeContextProvider theme={makeTheme()}>
+ <RowList>
+ <Row title="Title" to="/somewhere" />
+ <Row title="Title 2" />
+ </RowList>
+ </ThemeContextProvider>
+ );
+
+ const list = screen.getByRole('list');
+ expect(list).toBeInTheDocument();
+
+ const items = screen.getAllByRole('listitem');
+ expect(items).toHaveLength(2);
+});
+
+test('BoxedRowList has a list role by default', () => {
+ render(
+ <ThemeContextProvider theme={makeTheme()}>
+ <BoxedRowList>
+ <BoxedRow title="Title" to="/somewhere" />
+ <BoxedRow title="Title 2" />
+ </BoxedRowList>
+ </ThemeContextProvider>
+ );
+
+ const list = screen.getByRole('list');
+ expect(list).toBeInTheDocument();
+
+ const items = screen.getAllByRole('listitem');
+ expect(items).toHaveLength(2);
+});
+
 test('Row which navigates', () => {
  render(
  <ThemeContextProvider theme={makeTheme()}>

src/inline.tsx

@@ -80,6 +80,7 @@ const Inline: React.FC<Props> = ({
  {React.Children.map(children, (child) =>
  !!child || child === 0 ? (
  <div
+ role={role === 'list' ? 'listitem' : undefined}
  style={{
  // Hack to fix https://jira.tid.es/browse/WEB-1683
  // In iOS the inline component sometimes cuts the last line of the content

src/list.tsx

@@ -655,9 +655,13 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
  );
 });
 
-export const Row = React.forwardRef<TouchableElement, RowContentProps>(({dataAttributes, ...props}, ref) => (
- <RowContent {...props} ref={ref} dataAttributes={{'component-name': 'Row', ...dataAttributes}} />
-));
+export const Row = React.forwardRef<TouchableElement, RowContentProps>(
+ ({dataAttributes, role = 'listitem', ...props}, ref) => (
+ <div role={role}>
+ <RowContent {...props} ref={ref} dataAttributes={{'component-name': 'Row', ...dataAttributes}} />
+ </div>
+ )
+);
 
 type RowListProps = {
  children: React.ReactNode;
@@ -666,7 +670,12 @@ type RowListProps = {
  dataAttributes?: DataAttributes;
 };
 
-export const RowList: React.FC<RowListProps> = ({children, ariaLabelledby, role, dataAttributes}) => {
+export const RowList: React.FC<RowListProps> = ({
+ children,
+ ariaLabelledby,
+ role = 'list',
+ dataAttributes,
+}) => {
  const lastIndex = React.Children.count(children) - 1;
  return (
  <div
@@ -733,7 +742,7 @@ type BoxedRowListProps = {
 export const BoxedRowList: React.FC<BoxedRowListProps> = ({
  children,
  ariaLabelledby,
- role,
+ role = 'list',
  dataAttributes,
 }) => (
  <Stack