Add: ESLint rule that forbids a BaseControl that includes label prop but omits id #14151
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jorgefilipecosta
force-pushed
the
add/add-Eslint-rule-to-avoid-BaseControl-component-with-label-without-an-id
branch
from
2143bbd
to
1f91a94
Compare
jorgefilipecosta
added
[Tool] ESLint plugin
jorgefilipecosta
force-pushed
the
add/add-Eslint-rule-to-avoid-BaseControl-component-with-label-without-an-id
branch
from
1f91a94
to
4d0157c
Compare
jorgefilipecosta
requested review from
aduth,
ajitbohra,
chrisvanpatten,
gziolo,
nerrad,
noisysocks,
oandregal,
notnownikki,
ntwb,
Soean,
talldan and
youknowriad
as code owners
jorgefilipecosta
force-pushed
the
add/add-Eslint-rule-to-avoid-BaseControl-component-with-label-without-an-id
branch
from
4d0157c
to
a9824d1
Compare
aduth
reviewed
Mar 1, 2019
| ```jsx | ||
| <BaseControl | ||
| label="ok" | ||
| id="my-id" |
There was a problem hiding this comment.
Even if this is technically "correct" by the condition of the lint rule itself, it's still not a good example in that the id should direct to an input that the BaseControl wraps. Rather than <b>Child</b>, I'd prefer to see something like <input id="my-id" />
There was a problem hiding this comment.
Hi @aduth thank you for the review 👍 Your feedback was addressed.
jorgefilipecosta
added
the
[Status] In Progress
jorgefilipecosta
force-pushed
the
add/add-Eslint-rule-to-avoid-BaseControl-component-with-label-without-an-id
branch
from
a9824d1
to
d282f2c
Compare
jorgefilipecosta
removed
the
[Status] In Progress
aduth
reviewed
Mar 11, 2019
| ref={ this.posterImageButton } | ||
| > | ||
| { ! this.props.attributes.poster ? __( 'Select Poster Image' ) : __( 'Replace image' ) } | ||
| { ( |
There was a problem hiding this comment.
Out of curiosity, would it not have worked to just do something like?
{ /* TODO: ... */ }
{ /* eslint-disable-next-line @wordpress/no-base-control-with-label-without-id */ }
(avoid the extra nesting level)
There was a problem hiding this comment.
I think it would work, I simply used another nesting level because it was the idea that occurred to me.
jorgefilipecosta
added a commit
that referenced
this pull request
Mar 28, 2019
…14179) ## Description This PR applies a simple change to remove unnecessary BaseControl usage in the video block. It makes the video block code compliant with the lint rule being added on #14151. I tried a different approach use the BaseControl as a label for the button being rendered inside it, but in my tests with a screen reader the button text stops being used and BaseControl label starts getting used, in this case, this change does not make sense, the button text should be used. ## How has this been tested? I checked that the Poster Image buttons still work. I checked that no visual changes happen.
jorgefilipecosta
force-pushed
the
add/add-Eslint-rule-to-avoid-BaseControl-component-with-label-without-an-id
branch
from
d282f2c
to
af8a8a1
Compare
jorgefilipecosta
force-pushed
the
add/add-Eslint-rule-to-avoid-BaseControl-component-with-label-without-an-id
branch
from
af8a8a1
to
72c2dc4
Compare
This was referenced Sep 13, 2024
This was referenced Sep 14, 2024
This was referenced Sep 19, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes: #6989
Follows a suggestion by @aduth and creates an eslint rule that forbids a
BaseControlthat includeslabelprop but omitsid.Currently, CI is red because some code needs an update. I will submit right away a PR that fixes issue #13894 and makes the code compliant with our lint rule.
For now, I added some ignores, each case has it its complexities. For each, we need to decide if the usage of BaseControl makes sense, if an id should be provided or if the label needs to be removed a new child used instead.
I will submit a PR per case so we can discuss each case separately and make sure we don't create accessibility regressions.