Skip to content

Commit

Permalink
MM-62046 Associate most labels with controls and enable label-has-ass…
Browse files Browse the repository at this point in the history 
…ociated-control ESLint rule (mattermost#29510)

* Remove label from add_user_to_channel_modal.tsx

The label isn't needed here because it was incorrectly used for error
text. I had to add the display: block to the .modal__error class to
ensure the top margin was the same as before, but I could remove the
font-weight from that class since it was only needed to counteract
the weight that Bootstrap adds for labels.
:

* Remove label from bleve_settings.tsx and replace with SettingSet

It doesn't seem correct to use a label here because it isn't tied to a
single form field. Since this component is a set of fields (a fieldset,
if you will) that looks like a setting, it seemed like a good place to
use SettingSet.

* Remove label from brand_image_setting.tsx, replace with SettingSet, and improve a11y of upload button

Like the last commit for BleveSettings, this setting is multiple inputs,
so it makes more sense as a fieldset/SettingSet.

While doing that, I also changed how the file upload button in
BrandImageSetting works because the new HTML broke how it worked before.
Previously, we overlayed an transparent file input over the button for it,
but the sizing for that got messed up, and that causes some weird
accessibility and breaks some things like hover effects. Instead, the
file input is now fully hidden, and clicking on the button triggers the
file input programatically. The behaviour is otherwise the same, but the
button now shows the hover style and there's only one keyboard focus for
the button.

* Remove some more labels from PluginManagement and use SettingSet there

* Add for attribute to labels in compliance_reports.tsx

* Use SettingSet and add the for attribute to another label in DatabaseSettings

* Use SettingSet in ElasticsearchSettings

* Add for attribute to label in GroupProfile

* Don't use label for help text in TeamEditionRightPanel

For this, I had to add a new CSS class to make the element appear as if
it was a label element as affected by Bootstrap. There's likely some
cases that this won't work, but it applies the same margin and
font-weight.

* Don't use label for help text in TrialBanner

* Don't use label for a heading in PasswordSettings

* Don't use label element in table in ChannelModeration

This text is more like a legend element in SettingSet, but I didn't use
that because it's in a table. This could possibly be given its own
CSS class.

* Don't use label element for error text in AdvancedTextEditor and MessageSubmitError

* Don't use label for help text and add for attribute in RenameChannelModal

* Don't use label for error text in SelectTeam

* Add for attribute to labels in various components

* Turn jsx-a11y/label-has-associated-control to an error

* Fix E2E test
  • Loading branch information
@hmhealey
hmhealey authored Dec 17, 2024
1 parent 0e4e7ca commit f11ed97
Show file tree
Hide file tree
Showing 40 changed files with 1,367 additions and 1,562 deletions.
2 changes: 1 addition & 1 deletion e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe('Customization', () => {

cy.findByTestId('CustomBrandImage').should('be.visible').within(() => {
// * Verify that setting is visible and matches text content
cy.get('label').should('be.visible').and('have.text', 'Custom Brand Image:');
cy.get('legend').should('be.visible').and('have.text', 'Custom Brand Image:');

// * Verify that help setting is visible and matches text content
const contents = 'Customize your user experience by adding a custom image to your login screen. Recommended maximum image size is less than 2 MB.';
Expand Down
4 changes: 1 addition & 3 deletions ...omponents/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,7 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
value=""
/>
</div>
<div>
<br />
</div>
<div />
</ModalBody>
<ModalFooter
bsClass="modal-footer"
Expand Down
9 changes: 4 additions & 5 deletions webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,16 +224,16 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
if (!this.state.saving) {
if (this.state.submitError) {
errorMsg = (
<label
<span
id='add-user-to-channel-modal__invite-error'
className='modal__error has-error control-label'
>
{this.state.submitError}
</label>
</span>
);
} else if (targetUserIsMemberOfSelectedChannel) {
errorMsg = (
<label
<span
id='add-user-to-channel-modal__user-is-member'
className='modal__error has-error control-label'
>
Expand All @@ -244,7 +244,7 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
name,
}}
/>
</label>
</span>
);
}
}
Expand Down Expand Up @@ -317,7 +317,6 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
</div>
<div>
{errorMsg}
<br/>
</div>
</Modal.Body>
<Modal.Footer>
Expand Down
110 changes: 48 additions & 62 deletions webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,43 +57,36 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
setByEnv={false}
value=""
/>
<div
className="form-group"
>
<label
className="control-label col-sm-4"
>
<MemoizedFormattedMessage
<SettingSet
label={
<Memo(MemoizedFormattedMessage)
defaultMessage="Bulk Indexing:"
id="admin.bleve.bulkIndexingTitle"
/>
</label>
}
>
<div
className="col-sm-8"
className="job-table-setting"
>
<div
className="job-table-setting"
>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.bleve.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.bleve.createJob.help"
/>
}
disabled={true}
getExtraInfoText={[Function]}
jobType="bleve_post_indexing"
/>
</div>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.bleve.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.bleve.createJob.help"
/>
}
disabled={true}
getExtraInfoText={[Function]}
jobType="bleve_post_indexing"
/>
</div>
</div>
</SettingSet>
<RequestButton
buttonText={
<Memo(MemoizedFormattedMessage)
Expand Down Expand Up @@ -260,43 +253,36 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
setByEnv={false}
value="bleve.idx"
/>
<div
className="form-group"
>
<label
className="control-label col-sm-4"
>
<MemoizedFormattedMessage
<SettingSet
label={
<Memo(MemoizedFormattedMessage)
defaultMessage="Bulk Indexing:"
id="admin.bleve.bulkIndexingTitle"
/>
</label>
}
>
<div
className="col-sm-8"
className="job-table-setting"
>
<div
className="job-table-setting"
>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.bleve.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.bleve.createJob.help"
/>
}
disabled={false}
getExtraInfoText={[Function]}
jobType="bleve_post_indexing"
/>
</div>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.bleve.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.bleve.createJob.help"
/>
}
disabled={false}
getExtraInfoText={[Function]}
jobType="bleve_post_indexing"
/>
</div>
</div>
</SettingSet>
<RequestButton
buttonText={
<Memo(MemoizedFormattedMessage)
Expand Down
39 changes: 17 additions & 22 deletions webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,39 +340,33 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
setByEnv={false}
value={true}
/>
<div
className="form-group"
>
<label
className="control-label col-sm-4"
>
<MemoizedFormattedMessage
<SettingSet
label={
<Memo(MemoizedFormattedMessage)
defaultMessage="Schema Migrations:"
id="admin.database.migrations_table.title"
/>
</label>
}
>
<div
className="col-sm-8"
className="migrations-table-setting"
>
<div
className="migrations-table-setting"
>
<Connect(Component)
createHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All applied migrations."
id="admin.database.migrations_table.help_text"
/>
}
/>
</div>
<Connect(Component)
createHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All applied migrations."
id="admin.database.migrations_table.help_text"
/>
}
/>
</div>
</div>
</SettingSet>
<div
className="form-group"
>
<label
className="control-label col-sm-4"
htmlFor="activeSearchBackend"
>
<MemoizedFormattedMessage
defaultMessage="Active Search Backend:"
Expand All @@ -385,6 +379,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
<input
className="form-control"
disabled={true}
id="activeSearchBackend"
type="text"
value=""
/>
Expand Down
108 changes: 47 additions & 61 deletions .../channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,43 +288,36 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
}
}
/>
<div
className="form-group"
>
<label
className="control-label col-sm-4"
>
<MemoizedFormattedMessage
<SettingSet
label={
<Memo(MemoizedFormattedMessage)
defaultMessage="Bulk Indexing:"
id="admin.elasticsearch.bulkIndexingTitle"
/>
</label>
}
>
<div
className="col-sm-8"
className="job-table-setting"
>
<div
className="job-table-setting"
>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.elasticsearch.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.elasticsearch.createJob.help"
/>
}
disabled={true}
getExtraInfoText={[Function]}
jobType="elasticsearch_post_indexing"
/>
</div>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.elasticsearch.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.elasticsearch.createJob.help"
/>
}
disabled={true}
getExtraInfoText={[Function]}
jobType="elasticsearch_post_indexing"
/>
</div>
</div>
</SettingSet>
<RequestButton
buttonText={
<Memo(MemoizedFormattedMessage)
Expand Down Expand Up @@ -790,42 +783,35 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
}
}
/>
<div
className="form-group"
>
<label
className="control-label col-sm-4"
>
<MemoizedFormattedMessage
<SettingSet
label={
<Memo(MemoizedFormattedMessage)
defaultMessage="Bulk Indexing:"
id="admin.elasticsearch.bulkIndexingTitle"
/>
</label>
}
>
<div
className="col-sm-8"
className="job-table-setting"
>
<div
className="job-table-setting"
>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.elasticsearch.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.elasticsearch.createJob.help"
/>
}
getExtraInfoText={[Function]}
jobType="elasticsearch_post_indexing"
/>
</div>
<Connect(JobTable)
createJobButtonText={
<Memo(MemoizedFormattedMessage)
defaultMessage="Index Now"
id="admin.elasticsearch.createJob.title"
/>
}
createJobHelpText={
<Memo(MemoizedFormattedMessage)
defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
id="admin.elasticsearch.createJob.help"
/>
}
getExtraInfoText={[Function]}
jobType="elasticsearch_post_indexing"
/>
</div>
</div>
</SettingSet>
<RequestButton
buttonText={
<Memo(MemoizedFormattedMessage)
Expand Down
Loading

0 comments on commit f11ed97

Please sign in to comment.