Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MA-12]: Add label to form field in channel header #12

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[MA-12]: Add label to form field in channel header #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a889b4e
[MA-12]: Add label to form field in channel header
SaurabhSharma-884 Dec 9, 2024
8ac7d8e
[MA-12]: Update aria attributes and tests
SaurabhSharma-884 Dec 17, 2024
10c4a4f
[MA-12]: Update snapshots, fix e2e test
SaurabhSharma-884 Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ describe('Channel Settings - Channel Header', () => {
cy.findByText('Edit Channel Header').click();

// # Type something in the header edit box
cy.get('[aria-label="edit the channel header..."]').clear().type('This is the new header content');
cy.get('textarea[placeholder="Edit the channel header..."]').clear().type('This is the new header content');

// * Verify the "Preview" button exists
cy.findByText('Preview').should('be.visible');

// * Verify that before hitting the preview button, the style on the textbox is `display: block`
cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'block');
cy.get('textarea[placeholder="Edit the channel header..."]').should('have.css', 'display', 'block');

// # Click the "Preview" button
cy.findByText('Preview').click();
Expand All @@ -51,7 +51,7 @@ describe('Channel Settings - Channel Header', () => {
cy.findByText('Edit').should('be.visible');

// * Verify that the display is now none on the textbox element
cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'none');
cy.get('textarea[placeholder="Edit the channel header..."]').should('have.css', 'display', 'none');
});
});
});
4 changes: 2 additions & 2 deletions ...ss/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ describe('Verify Accessibility Support in different input fields', () => {
cy.apiAddUserToTeam(testTeam.id, user.id).then(() => {
cy.apiAddUserToChannel(testChannel.id, user.id).then(() => {
// * Verify Accessibility support in post input field
cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).clear().focus();
cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).clear().focus();

// # Ensure User list is cached once in UI
cy.uiGetPostTextBox().type('@').wait(TIMEOUTS.FIVE_SEC);
Expand Down Expand Up @@ -168,7 +168,7 @@ describe('Verify Accessibility Support in different input fields', () => {
it('MM-T1458 Verify Accessibility Support in Main Post Input', () => {
cy.get('#advancedTextEditorCell').within(() => {
// * Verify Accessibility Support in Main Post input
cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');

// # Set a11y focus on the textbox
cy.get('#FormattingControl_bold').focus().tab({shift: true});
Expand Down
17 changes: 0 additions & 17 deletions webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,7 @@

exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
<div>
<div
data-testid="autosize_textarea_placeholder"
id="autosize_textarea_placeholder"
style={
Object {
"background": "none",
"borderColor": "transparent",
"opacity": 0.75,
"overflow": "hidden",
"pointerEvents": "none",
"position": "absolute",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap",
}
}
/>
<textarea
aria-label=""
data-testid="autosize_textarea"
dir="auto"
height={0}
Expand Down
10 changes: 5 additions & 5 deletions webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,15 +227,15 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
}),
);

expect(screen.getByLabelText('write to test channel')).toHaveValue('original draft');
expect(screen.getByPlaceholderText('Write to Test Channel')).toHaveValue('original draft');

rerender(
<AdvancedTextEditor
{...baseProps}
channelId={otherChannelId}
/>,
);
expect(screen.getByLabelText('write to other channel')).toHaveValue('a different draft');
expect(screen.getByPlaceholderText('Write to Other Channel')).toHaveValue('a different draft');
});

it('should save a new draft when changing channels', () => {
Expand All @@ -246,7 +246,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
initialState,
);

userEvent.type(screen.getByLabelText('write to test channel'), 'some text');
userEvent.type(screen.getByPlaceholderText('Write to Test Channel'), 'some text');

expect(mockedUpdateDraft).not.toHaveBeenCalled();

Expand Down Expand Up @@ -312,7 +312,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
}),
);

userEvent.type(screen.getByLabelText('write to test channel'), ' plus some new text');
userEvent.type(screen.getByPlaceholderText('Write to Test Channel'), ' plus some new text');

expect(mockedUpdateDraft).not.toHaveBeenCalled();

Expand Down Expand Up @@ -348,7 +348,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
}),
);

userEvent.clear(screen.getByLabelText('write to test channel'));
userEvent.clear(screen.getByPlaceholderText('Write to Test Channel'));

expect(mockedRemoveDraft).not.toHaveBeenCalled();
expect(mockedUpdateDraft).not.toHaveBeenCalled();
Expand Down
20 changes: 2 additions & 18 deletions webapp/channels/src/components/autosize_textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,21 +130,6 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
heightProps.height = height.current;
}

let textareaPlaceholder = null;
const placeholderAriaLabel = placeholder ? placeholder.toLowerCase() : '';
if (!value && !defaultValue) {
textareaPlaceholder = (
<div
{...otherProps}
id={`${id}_placeholder`}
data-testid={`${id}_placeholder`}
style={styles.placeholder}
>
{placeholder}
</div>
);
}

let referenceValue = value || defaultValue;
if (referenceValue?.endsWith('\n')) {
// In a div, the browser doesn't always count characters at the end of a line when measuring the dimensions
Expand All @@ -158,16 +143,15 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
}

return (
<div>
{textareaPlaceholder}
<div >
<textarea
ref={setTextareaRef}
data-testid={id}
id={id}
{...heightProps}
{...otherProps}
placeholder={placeholder}
role='textbox'
aria-label={placeholderAriaLabel}
dir='auto'
disabled={disabled}
onChange={onChange}
Expand Down
35 changes: 25 additions & 10 deletions ...omponents/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,15 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
componentClass="div"
>
<div>
<p>
<label
className="textarea-label"
htmlFor="edit_textbox"
>
<MemoizedFormattedMessage
defaultMessage="Edit the text appearing next to the channel name in the header."
id="edit_channel_header_modal.description"
/>
</p>
</label>
<div
className="textarea-wrapper"
>
Expand Down Expand Up @@ -183,12 +186,15 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
componentClass="div"
>
<div>
<p>
<label
className="textarea-label"
htmlFor="edit_textbox"
>
<MemoizedFormattedMessage
defaultMessage="Edit the text appearing next to the channel name in the header."
id="edit_channel_header_modal.description"
/>
</p>
</label>
<div
className="textarea-wrapper"
>
Expand Down Expand Up @@ -331,12 +337,15 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
componentClass="div"
>
<div>
<p>
<label
className="textarea-label"
htmlFor="edit_textbox"
>
<MemoizedFormattedMessage
defaultMessage="Edit the text appearing next to the channel name in the header."
id="edit_channel_header_modal.description"
/>
</p>
</label>
<div
className="textarea-wrapper"
>
Expand Down Expand Up @@ -471,12 +480,15 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
componentClass="div"
>
<div>
<p>
<label
className="textarea-label"
htmlFor="edit_textbox"
>
<MemoizedFormattedMessage
defaultMessage="Edit the text appearing next to the channel name in the header."
id="edit_channel_header_modal.description"
/>
</p>
</label>
<div
className="textarea-wrapper"
>
Expand Down Expand Up @@ -601,12 +613,15 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
componentClass="div"
>
<div>
<p>
<label
className="textarea-label"
htmlFor="edit_textbox"
>
<MemoizedFormattedMessage
defaultMessage="Edit the text appearing next to the channel name in the header."
id="edit_channel_header_modal.description"
/>
</p>
</label>
<div
className="textarea-wrapper"
>
Expand Down
7 changes: 5 additions & 2 deletions webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,12 +227,15 @@ export class EditChannelHeaderModal extends React.PureComponent<Props, State> {
</Modal.Header>
<Modal.Body bsClass='modal-body edit-modal-body'>
<div>
<p>
<label
htmlFor='edit_textbox'
className='textarea-label'
>
<FormattedMessage
id='edit_channel_header_modal.description'
defaultMessage='Edit the text appearing next to the channel name in the header.'
/>
</p>
</label>
<div className='textarea-wrapper'>
<Textbox
value={this.state.header!}
Expand Down
5 changes: 5 additions & 0 deletions webapp/channels/src/sass/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@
.edit-modal-body {
overflow: visible;

.textarea-label {
margin-bottom: 10px;
font-weight: 400;
}

.custom-textarea {
height: auto;
min-height: 8em;
Expand Down
5 changes: 5 additions & 0 deletions webapp/channels/src/sass/components/_post.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@
background: #ffffac !important;
color: #d04444 !important;
}

&::placeholder {
text-overflow: ellipsis;
white-space: pre;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,6 @@ describe('identifyElementRegion', () => {
expect(identifyElementRegion(screen.getByText(post.message))).toEqual('post');
});

expect(identifyElementRegion(screen.getByText('Write to ' + channel.display_name))).toEqual('post_textbox');
expect(identifyElementRegion(screen.getByPlaceholderText('Write to ' + channel.display_name))).toEqual('post_textbox');
});
});
Loading