Skip to content

Commit

Permalink
feat(search-form): Removing aria label, adding support for extra clas…
Browse files Browse the repository at this point in the history 
…ses for the button and the input - FRONT-4479 (#3462)

* feat(search-form): Removing aria-label, supporting extra classes for button and input - FRONT-4479

* feat(search-form): Removing aria-label, supporting extra classes for button and input - FRONT-4479
  • Loading branch information
@planctus
planctus authored Jul 9, 2024
1 parent 256cce5 commit 46afda0
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 12 deletions.
94 changes: 90 additions & 4 deletions src/implementations/twig/components/search-form/__snapshots__/search-form.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ exports[`Search Form Default renders correctly 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down Expand Up @@ -65,7 +64,6 @@ exports[`Search Form Default renders correctly with extra attributes 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down Expand Up @@ -111,7 +109,96 @@ exports[`Search Form Default renders correctly with extra class names 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
<span
class="ecl-button__container"
>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-button__icon"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="/icons.svg#search"
/>
</svg>
<span
class="ecl-button__label"
data-ecl-label="true"
>
Search
</span>
</span>
</button>
</form>
</jest>
`;

exports[`Search Form Default renders correctly with extra classes on the button 1`] = `
<jest>
<form
class="ecl-search-form"
role="search"
>
<div
class="ecl-form-group"
>
<input
class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
id="search-input"
placeholder="Placeholder text"
type="search"
/>
</div>
<button
class="ecl-button ecl-button--ghost ecl-search-form__button button-extra-class"
type="submit"
>
<span
class="ecl-button__container"
>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-button__icon"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="/icons.svg#search"
/>
</svg>
<span
class="ecl-button__label"
data-ecl-label="true"
>
Search
</span>
</span>
</button>
</form>
</jest>
`;

exports[`Search Form Default renders correctly with extra classes on the input 1`] = `
<jest>
<form
class="ecl-search-form"
role="search"
>
<div
class="ecl-form-group"
>
<input
class="ecl-text-input ecl-text-input--m ecl-search-form__text-input input-extra-class"
id="search-input"
placeholder="Placeholder text"
type="search"
/>
</div>
<button
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down Expand Up @@ -157,7 +244,6 @@ exports[`Search Form Default renders correctly with extra form elements 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down
5 changes: 2 additions & 3 deletions src/implementations/twig/components/search-form/search-form.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
label: _label,
input: _text_input|merge({
input_type: 'search',
extra_classes: 'ecl-search-form__text-input',
extra_classes: 'ecl-search-form__text-input' ~ ( _text_input.extra_classes ? ' ' ~ _text_input.extra_classes : ''),
}),
extra_label_classes: 'ecl-search-form__label',
} only %}
Expand All @@ -62,8 +62,7 @@
name: 'search',
size: 'xs',
},
extra_classes: 'ecl-search-form__button',
extra_attributes: [{name: 'aria-label', value: 'Search'}],
extra_classes: 'ecl-search-form__button' ~ ( _button.extra_classes ? ' ' ~ _button.extra_classes : ''),
}) only %}
{% endif %}
{%- block extra_form_elements _extra_form_elements -%}
Expand Down
18 changes: 18 additions & 0 deletions src/implementations/twig/components/search-form/search-form.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,24 @@ describe('Search Form', () => {
return expect(render(withExtraAttributes)).resolves.toMatchSnapshot();
});

test('renders correctly with extra classes on the input', () => {
expect.assertions(1);

const withInputExtraClasses = JSON.parse(JSON.stringify(data));
withInputExtraClasses.text_input.extra_classes = 'input-extra-class';

return expect(render(withInputExtraClasses)).resolves.toMatchSnapshot();
});

test('renders correctly with extra classes on the button', () => {
expect.assertions(1);

const withButtonExtraClasses = JSON.parse(JSON.stringify(data));
withButtonExtraClasses.button.extra_classes = 'button-extra-class';

return expect(render(withButtonExtraClasses)).resolves.toMatchSnapshot();
});

test('renders correctly with extra form elements', () => {
expect.assertions(1);

Expand Down
5 changes: 0 additions & 5 deletions src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -938,7 +938,6 @@ exports[`Site Header EC renders correctly 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down Expand Up @@ -2018,7 +2017,6 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down Expand Up @@ -3078,7 +3076,6 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down Expand Up @@ -4136,7 +4133,6 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--ghost ecl-search-form__button"
type="submit"
>
Expand Down Expand Up @@ -5194,7 +5190,6 @@ exports[`Site Header EU renders correctly 1`] = `
/>
</div>
<button
aria-label="Search"
class="ecl-button ecl-button--primary ecl-search-form__button"
type="submit"
>
Expand Down

1 comment on commit 46afda0

@github-actions
Copy link

Choose a reason for hiding this comment

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

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.