Props Proposal: Destructure `aria-` & `data-` props on Card component `article` element

BenjaminWFox-MuleSoft commented 1 year ago

Regarding the Card component, it doesn't de-structure aria- (or data-) props (like the way Button does for example).

Since the Card renders an article which shows up in the Landmarks menu (on screen reader on MacOS at least) it would be great to be able to give the element a more accessible label.

I'm happy to implement & submit a PR for this!

I think it would be sufficient to do something like this, but let me know:

// ...
import getAriaProps from '../../utilities/get-aria-props'; // <-- added line
import getDataProps from '../../utilities/get-data-props'; // <-- added line
// ...
const Card = (props) => {
    const ariaProps = getAriaProps(props); // <-- added line
    const dataProps = getDataProps(props); // <-- added line
    // ...

    return (
        <article
            id={props.id}
            className={classnames('slds-card', props.className)}
            style={props.style}
            {...ariaProps} // <-- added line
            {...dataProps} //  <-- added line
        >
            {!props.hasNoHeader && (
                <Header
                    header={props.header}
                    headingId={headingId}
                    icon={props.icon}
                    filter={props.filter}
                    filterId={filterId}
                    heading={props.heading}
                    headerActions={props.headerActions}
                    headerActionsId={headerActionsId}
                />
            )}
            {!empty ? (
                <Body id={bodyId} className={props.bodyClassName}>
                    {props.children}
                </Body>
            ) : (
                <Body id={bodyId} className={props.bodyClassName}>
                    {empty}
                </Body>
            )}
            {props.footer ? <Footer>{props.footer}</Footer> : null}
        </article>
    );
// ...

cc @interactivellama

welcome[bot] commented 1 year ago

Thanks for opening your first issue! :wave: If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

interactivellama commented 1 year ago

Looks good! Please proceed. Be sure to mention the props in the class comments, since there are no propTypes.

We have some release pipeline blockers right now for NPM publishing, so I can't promise a date, but if we can't hit it, self publish on a Git tag is an option until the pipeline issue can be mitigated.

BenjaminWFox-MuleSoft commented 1 year ago

@interactivellama Added https://github.com/salesforce/design-system-react/pull/3071 to address this.

salesforce / design-system-react

Props Proposal: Destructure `aria-` & `data-` props on Card component `article` element #3068