[added] Apply custom data- and aria- props to content div

[Munter]

Changes proposed:

• Apply aria-* and data-* props to the modal content div

Acceptance Checklist:

• All commits have been squashed to one.
• The commit message follows the guidelines in CONTRIBUTING.md.
• Documentation (README.md) and examples have been updated as needed.
• If this is a code change, a spec testing the functionality has been added.
• If the commit message has [changed] or [removed], there is an upgrade path above.

[diasbruno]

This looks good for aria attributes.

[diasbruno]

Maybe move this function to a helper?

[afercia]

It would be great to have the ability to add ARIA attributes on the modal, this would be necessary for example when the modal content is mainly text:

The text inside the modal won't be announced because screen readers enter in focus mode when role=dialog is set., Using aria-describedby to target the text and optionally aria-labelledby to target the visible heading would solve the accessibility issue.

[diasbruno]

Hi @Munter, we have v2.0.0 available now. We could make this PR to allow the user to pass data-* attributes and later we can think about adding aria-*. Any thoughts?

[Munter]

@diasbruno Thanks for the heads up. I switched to react-a11y-modal because this was a blocker to me. I don't have the bandwidth to port this to v2

[diasbruno]

@Munter no problem. Thank you.

[diasbruno]

@Munter Do you mind if I slice your PR and add to react-modal?

[Munter]

Take and modify whatever you need from this. It would be a fine addition to the library to get those features in

[WickyNilliams]

Is this no longer supported?

[diasbruno]

@WickyNilliams aria- attribute is available. See https://github.com/reactjs/react-modal#additional-aria-attributes.

[WickyNilliams]

ah... i specifically wanted data-* attributes, as hooks for targeting elements in tests

[diasbruno]

One option is place those attributes in a wrapper on the content <div /> or something else.

<Modal ...>
    <div data-x=... >...</div>
</Modal>

[diasbruno]

@WickyNilliams Can you open a new issue to make it easy to track?

[WickyNilliams]

Yeah that's what I did eventually, but not ideal.

Sure thing! I'll make one now