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

Jump to bottom

fix(inpage-navigation): Improve accessibility - FRONT-3660 #2568

Merged
merged 6 commits into from
Jun 21, 2022
Merged

fix(inpage-navigation): Improve accessibility - FRONT-3660 #2568

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4872e6d
fix(inpage-navigation): Improve accessibility - FRONT-3660
papegaill Jun 13, 2022
023c6fa
Merge branch 'v3.4.0-dev' into fix/FRONT-3660
emeryro Jun 16, 2022
89e7449
Use same id param
papegaill Jun 16, 2022
3e9b389
use param id for the trigger button
papegaill Jun 20, 2022
c71ecdc
Merge branch 'v3.4.0-dev' into fix/FRONT-3660
emeryro Jun 21, 2022
5f59f55
Merge branch 'v3.4.0-dev' into fix/FRONT-3660
papegaill Jun 21, 2022
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
1 change: 1 addition & 0 deletions src/implementations/twig/components/inpage-navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ npm install --save @ecl/twig-component-inpage-navigation

Parameters:

- **"id"** (string) (default: 'ecl-inpage-navigation-default')
- **"title"** (string) (default: '')
- **"links"** (associative array) (default: predefined structure):
- href: (string) (default: '')
Expand Down
21 changes: 12 additions & 9 deletions ...mentations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@
exports[`Inpage navigation renders correctly 1`] = `
<jest>
<nav
aria-labelledby="ecl-inpage-navigation-default"
class="ecl-inpage-navigation"
data-ecl-auto-init="InpageNavigation"
data-ecl-inpage-navigation="true"
>
<div
class="ecl-inpage-navigation__title"
id="ecl-inpage-navigation-default"
>
Page contents
</div>
Expand All @@ -20,7 +22,7 @@ exports[`Inpage navigation renders correctly 1`] = `
aria-expanded="false"
class="ecl-inpage-navigation__trigger"
data-ecl-inpage-navigation-trigger="true"
id="ecl-inpage-navigation-trigger"
id="ecl-inpage-navigation-default-trigger"
type="button"
>
<span
Expand All @@ -38,10 +40,9 @@ exports[`Inpage navigation renders correctly 1`] = `
</svg>
</button>
<ul
aria-labelledby="ecl-inpage-navigation-trigger"
class="ecl-inpage-navigation__list"
data-ecl-inpage-navigation-list="true"
id="ecl-inpage-navigation-list"
id="ecl-inpage-navigation-default-list"
>
<li
class="ecl-inpage-navigation__item"
Expand Down Expand Up @@ -96,6 +97,7 @@ exports[`Inpage navigation renders correctly 1`] = `
exports[`Inpage navigation renders correctly with extra attributes 1`] = `
<jest>
<nav
aria-labelledby="ecl-inpage-navigation-default"
class="ecl-inpage-navigation"
data-ecl-auto-init="InpageNavigation"
data-ecl-inpage-navigation="true"
Expand All @@ -104,6 +106,7 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
>
<div
class="ecl-inpage-navigation__title"
id="ecl-inpage-navigation-default"
>
Page contents
</div>
Expand All @@ -115,7 +118,7 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
aria-expanded="false"
class="ecl-inpage-navigation__trigger"
data-ecl-inpage-navigation-trigger="true"
id="ecl-inpage-navigation-trigger"
id="ecl-inpage-navigation-default-trigger"
type="button"
>
<span
Expand All @@ -133,10 +136,9 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
</svg>
</button>
<ul
aria-labelledby="ecl-inpage-navigation-trigger"
class="ecl-inpage-navigation__list"
data-ecl-inpage-navigation-list="true"
id="ecl-inpage-navigation-list"
id="ecl-inpage-navigation-default-list"
>
<li
class="ecl-inpage-navigation__item"
Expand Down Expand Up @@ -191,12 +193,14 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
exports[`Inpage navigation renders correctly with extra class names 1`] = `
<jest>
<nav
aria-labelledby="ecl-inpage-navigation-default"
class="ecl-inpage-navigation custom-class custom-class--test"
data-ecl-auto-init="InpageNavigation"
data-ecl-inpage-navigation="true"
>
<div
class="ecl-inpage-navigation__title"
id="ecl-inpage-navigation-default"
>
Page contents
</div>
Expand All @@ -208,7 +212,7 @@ exports[`Inpage navigation renders correctly with extra class names 1`] = `
aria-expanded="false"
class="ecl-inpage-navigation__trigger"
data-ecl-inpage-navigation-trigger="true"
id="ecl-inpage-navigation-trigger"
id="ecl-inpage-navigation-default-trigger"
type="button"
>
<span
Expand All @@ -226,10 +230,9 @@ exports[`Inpage navigation renders correctly with extra class names 1`] = `
</svg>
</button>
<ul
aria-labelledby="ecl-inpage-navigation-trigger"
class="ecl-inpage-navigation__list"
data-ecl-inpage-navigation-list="true"
id="ecl-inpage-navigation-list"
id="ecl-inpage-navigation-default-list"
>
<li
class="ecl-inpage-navigation__item"
Expand Down
11 changes: 6 additions & 5 deletions src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

{#
Parameters:
- "id" (string) (default: 'ecl-inpage-navigation-default')
- "title" (string) (default: '')
- "links" (array) (default: predefined structure): format: [
{
Expand All @@ -22,6 +23,7 @@

{# Internal properties #}

{% set _id = id|default('ecl-inpage-navigation-default') %}
{% set _css_class = 'ecl-inpage-navigation' %}
{% set _icon_path = icon_path|default('') %}
{% set _extra_attributes = 'data-ecl-auto-init="InpageNavigation"' %}
Expand All @@ -44,11 +46,11 @@

{# Print the result #}

<nav class="{{ _css_class }}"{{ _extra_attributes|raw }} data-ecl-inpage-navigation="true">
<div class="ecl-inpage-navigation__title">{{ title }}</div>
<nav class="{{ _css_class }}"{{ _extra_attributes|raw }} data-ecl-inpage-navigation="true" aria-labelledby="{{ _id }}">
<div class="ecl-inpage-navigation__title" id="{{ _id }}">{{ title }}</div>
<div class="ecl-inpage-navigation__body">
<button type="button" class="ecl-inpage-navigation__trigger"
id="ecl-inpage-navigation-trigger" data-ecl-inpage-navigation-trigger="true"
id="{{ _id }}-trigger" data-ecl-inpage-navigation-trigger="true"
aria-controls="ecl-inpage-navigation-list" aria-expanded="false"><span
class="ecl-inpage-navigation__trigger-current"
data-ecl-inpage-navigation-trigger-current="true"> </span>
Expand All @@ -61,8 +63,7 @@
extra_classes: 'ecl-icon--rotate-180 ecl-inpage-navigation__trigger-icon',
} only %}
</button>
<ul class="ecl-inpage-navigation__list" aria-labelledby="ecl-inpage-navigation-trigger"
data-ecl-inpage-navigation-list="true" id="ecl-inpage-navigation-list">
<ul class="ecl-inpage-navigation__list" data-ecl-inpage-navigation-list="true" id="{{ _id }}-list">
{% for link in links %}
<li class="ecl-inpage-navigation__item">
{% include '@ecl/link/link.html.twig' with {
Expand Down