Skip to content

Alter id on EuiFormRow wrapping element#2588

Merged
thompsongl merged 6 commits intoelastic:masterfrom
thompsongl:form-row-id
Dec 5, 2019
Merged

Alter id on EuiFormRow wrapping element#2588
thompsongl merged 6 commits intoelastic:masterfrom
thompsongl:form-row-id

Conversation

@thompsongl
Copy link
Copy Markdown
Contributor

@thompsongl thompsongl commented Dec 3, 2019

Summary

Work in #2569 highlights a case where EuiFormRow can improperly render multiple elements with the same id. This only happens when an id is directly passed to EuiFormRow ( id remains part of ...rest). Regardless, the cloned child form control is the intended target for the id, not the wrapping element.

Options:

  1. Remove id from the wrapping element entirely (what I've currently done)
  2. Create a new id (e.g., ${id}-row) so the wrapping element is still referencable (what's currently done)
  3. ???

I think it's likely that comprehensive axe analysis would find more than just the one case highlighted in #2569, especially in Kibana.

Checklist

- [ ] Checked in dark mode
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox
- [ ] Props have proper autodocs
- [ ] Added documentation examples

  • Added or updated jest tests
  • Checked for breaking changes and labeled appropriately

- [ ] Checked for accessibility including keyboard-only and screenreader modes

  • A changelog entry exists and is marked appropriately

@thompsongl thompsongl mentioned this pull request Dec 3, 2019
4 tasks
@myasonik
Copy link
Copy Markdown
Contributor

myasonik commented Dec 3, 2019

Any concern that there's now no way to pass an ID to EuiFormRow?

Also, does this constitute a breaking change? (Someone could be expecting the ID on either element to do some hacky things...)

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Dec 3, 2019

I agree with @myasonik, I think we should keep an id on the form row but append -row or something to it. This would definitely be a breaking change as it could break some functional tests.

@thompsongl
Copy link
Copy Markdown
Contributor Author

I can work on Option 2 👍

@myasonik myasonik added breaking change PRs with breaking changes. (Don't delete - used for automation) accessibility labels Dec 3, 2019
Copy link
Copy Markdown
Contributor

@myasonik myasonik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤞 This doesn't make updating Kibana a huge pain...

@thompsongl
Copy link
Copy Markdown
Contributor Author

Snapshot changes in Kibana appear to be all additions, so that's good. Any functional test failures caused by this will point towards places where data-test-subj should've probably been used instead.

@thompsongl thompsongl changed the title Remove id from EuiFormRow wrapping element Alter id on EuiFormRow wrapping element Dec 4, 2019
@thompsongl thompsongl merged commit 9e87fe3 into elastic:master Dec 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility breaking change PRs with breaking changes. (Don't delete - used for automation)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants