fix: list selection behavior + accessibility

[prsdthkr]

Description

In this change, we

• add selected property for List.Selection to allow setting the checked state of the checkbox. This property will be internally set by the parent List.Item component based on the List.Item.selected property.
• add a selectable property to List to
  • add fd-list--selection class to <ul>
  • set <ul> role='listbox'
• remove List.Header and List.Footer from the list structure, they should be passed through the new header and footer List props.
• List.Header renders <h2-6> depending on List.headerLevel
• List.Footer renders <span>
• add an id property to List to associate List.Header as label
• add checkBoxAriaLabel to List.Selection for accessibility
• add headerClassName and footerClassName props to allow custom classes

Screen cap

Before

After

Know issues

• deviates from fundamental-styles markup for accessibility reasons

fixes #1164 #970

[netlify]

Deploy preview for fundamental-react ready!

Built with commit 0c28fd9

https://deploy-preview-1167--fundamental-react.netlify.app

[skvale]

Slightly easier to read syntax:

role={selectable ? 'listbox' : undefined}

[skvale]

quick unrelated change ListClasses -> listClasses

[skvale]

probably a nitpick

if (!(isHeader(child) || isFooter(child)) ) {
vs
if (!isHeader(child) && !isFooter(child)) {

But it brings up a bigger issue to me, we aren't supporting custom components or fragments. We should be able to consume this code and add the right props to the right children

const MyOtherItems = () => (
   <React.Fragment>
        <List.Item>
            <List.Text>List Item 2</List.Text>
        </List.Item>
        <List.Item>
            <List.Text>List Item 3</List.Text>
        </List.Item>
        <List.Item>
            <List.Text>List Item 4</List.Text>
        </List.Item>
   </React.Fragment>
);
// ....
const MyListHeader = () => <List.Header>List Header</List.Header>
// ...
<List>
        <MyListHeader />
        <List.Item>
            <List.Text>List Item 1</List.Text>
        </List.Item>
        <MyOtherItems />
        <List.Footer>List Footer</List.Footer>
    </List>

[prsdthkr]

Thanks for pointing this out. I removed the children scanning and made the header and footer as List props.

[skvale]

That's an interesting idea to get around the problem. I think we might want it to look more like this though

<List
  footer='My footer'
  header='My header'>
   // ...

and the List component would render them like

return (
  <>
    {header && <List.Header id={`${listId}-label`}>{header}</List.Header>}
    // ...
    {footer && <List.Footer>{footer}</List.Footer>}
  </>


footer: PropTypes.node,
header: PropTypes.node,

[prsdthkr]

This will mean that we cannot get fancy with the header and footer like here, right?

[skvale]

I guess it would look like

footer = {<React.Fragment><List.Text><b>Total</b></List.Text><List.Text secondary>7</List.Text></React.Fragment>}

instead of

        footer={
            <List.Footer>
                <List.Text><b>Total</b></List.Text>
                <List.Text secondary>7</List.Text>
            </List.Footer>
        }

[skvale]

React component
PropTypes.object

It's more accurate to say React node and PropTypes.node

[skvale]

This seems right to change the footer to a span, but do we need to stay in line with fundamental-styles here?

I've looked at a few of their examples and they all still show the footer as a li, like here: https://github.com/SAP/fundamental-styles/blob/master/stories/list/standard/standard-list.stories.js#L301

[skvale]

I guess this is part of

deviates from fundamental-styles markup for accessibility reasons

from your description, but is that OK to do? Do we document our deviations?

[prsdthkr]

Trying to get Got this change in fundamental-styles: SAP/fundamental-styles#1397

We can either jump the gun and get this change in fd-react or wait for the fd-styles change and subsequent fd-styles upgrade in fd-react.

[prsdthkr]

I'm for jumping the gun, as we will eventually be up to spec when fd-styles is upgraded :)