Skip to content

Commit

Permalink
feat(accessibility): add landmark and aria-label - FRONT-3947 (#2858)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emeryro
emeryro committed May 16, 2023
1 parent dc23273 commit 1d61dc4
Show file tree
Hide file tree
Showing 12 changed files with 62 additions and 5 deletions.
12 changes: 12 additions & 0 deletions src/implementations/twig/components/file/__snapshots__/file.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ exports[`File Thumbnail renders correctly 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -388,6 +389,7 @@ exports[`File Thumbnail renders correctly with deprecated data 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -733,6 +735,7 @@ exports[`File Thumbnail renders correctly with taxonomies 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -1037,6 +1040,7 @@ exports[`File Thumbnail renders correctly without an image 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -1314,6 +1318,7 @@ exports[`File With translation renders correctly 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -1548,6 +1553,7 @@ exports[`File With translation renders correctly with extra attributes 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -1780,6 +1786,7 @@ exports[`File With translation renders correctly with extra class names 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -2025,6 +2032,7 @@ exports[`File Without translation renders correctly 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -2109,6 +2117,7 @@ exports[`File Without translation renders correctly with a single label 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -2186,6 +2195,7 @@ exports[`File Without translation renders correctly with extra attributes 1`] =
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -2261,6 +2271,7 @@ exports[`File Without translation renders correctly with extra class names 1`] =
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down Expand Up @@ -2354,6 +2365,7 @@ exports[`File Without translation renders correctly with multiple labels 1`] = `
</div>
</div>
<a
aria-label="Download file State of the Union 2018 brochure"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
href="/example"
>
Expand Down
4 changes: 4 additions & 0 deletions src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ exports[`Menu Default renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -847,6 +848,7 @@ exports[`Menu Default renders correctly with extra attributes 1`] = `
data-ecl-menu-max-lines="2"
data-test="data-test-value"
data-test-1="data-test-value-1"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -1684,6 +1686,7 @@ exports[`Menu Default renders correctly with extra class names 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -2521,6 +2524,7 @@ exports[`Menu Translated renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down
1 change: 1 addition & 0 deletions src/implementations/twig/components/menu/menu.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
data-ecl-menu-max-lines="{{ _max_lines }}"
data-ecl-auto-init="Menu"
aria-expanded="false"
role="navigation"
{{ _extra_attributes|raw }}
>
<div class="ecl-menu__overlay" data-ecl-menu-overlay></div>
Expand Down
5 changes: 5 additions & 0 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 @@ -988,6 +988,7 @@ exports[`Site Header EC renders correctly 1`] = `
</div>
<div
class="ecl-site-header__search-container"
role="search"
>
<a
aria-controls="search-form-id"
Expand Down Expand Up @@ -2195,6 +2196,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
</div>
<div
class="ecl-site-header__search-container"
role="search"
>
<a
aria-controls="search-form-id"
Expand Down Expand Up @@ -3372,6 +3374,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
</div>
<div
class="ecl-site-header__search-container"
role="search"
>
<a
aria-controls="search-form-id"
Expand Down Expand Up @@ -4547,6 +4550,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
</div>
<div
class="ecl-site-header__search-container"
role="search"
>
<a
aria-controls="search-form-id"
Expand Down Expand Up @@ -5722,6 +5726,7 @@ exports[`Site Header EU renders correctly 1`] = `
</div>
<div
class="ecl-site-header__search-container"
role="search"
>
<a
aria-controls="search-form-id"
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/twig/components/site-header/site-header.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@

{# Search form #}
{% if _search_form is defined %}
<div class="ecl-site-header__search-container">
<div class="ecl-site-header__search-container" role="search">
{% if _search_toggle is not empty %}
<a
class="ecl-button ecl-button--ghost ecl-site-header__search-toggle"
Expand Down
14 changes: 14 additions & 0 deletions ...lementations/twig/deprecated/site-header-core/__snapshots__/site-header-core.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ exports[`EC Site Header Core Default renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -1684,6 +1685,7 @@ exports[`EC Site Header Core Default renders correctly when logged in 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -3178,6 +3180,7 @@ exports[`EC Site Header Core Default renders correctly with extra attributes 1`]
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -4670,6 +4673,7 @@ exports[`EC Site Header Core Default renders correctly with extra class names 1`
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -6162,6 +6166,7 @@ exports[`EC Site Header Core Translated renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -8012,6 +8017,7 @@ exports[`EC Site Header Core Translated renders correctly with extra attributes
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -9860,6 +9866,7 @@ exports[`EC Site Header Core Translated renders correctly with extra class names
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -11708,6 +11715,7 @@ exports[`EU Site Header Core Default renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -13232,6 +13240,7 @@ exports[`EU Site Header Core Default renders correctly when logged in 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -14726,6 +14735,7 @@ exports[`EU Site Header Core Default renders correctly with extra attributes 1`]
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -16218,6 +16228,7 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1`
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -17710,6 +17721,7 @@ exports[`EU Site Header Core Translated renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -19560,6 +19572,7 @@ exports[`EU Site Header Core Translated renders correctly with extra attributes
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -21408,6 +21421,7 @@ exports[`EU Site Header Core Translated renders correctly with extra class names
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down
7 changes: 7 additions & 0 deletions .../twig/deprecated/site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ exports[`Site Header Harmonised Group 1 renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -2073,6 +2074,7 @@ exports[`Site Header Harmonised Group 1 renders correctly when logged in 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -3935,6 +3937,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra attributes
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -5795,6 +5798,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra class names
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -7580,6 +7584,7 @@ exports[`Site Header Harmonised Group 2 renders correctly 1`] = `
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -9367,6 +9372,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra attributes
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down Expand Up @@ -11152,6 +11158,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra class names
data-ecl-auto-init="Menu"
data-ecl-menu=""
data-ecl-menu-max-lines="2"
role="navigation"
>
<div
class="ecl-menu__overlay"
Expand Down
Loading

1 comment on commit 1d61dc4

@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://v3-9-0-dev--europa-component-library.netlify.app

Please sign in to comment.