-
Notifications
You must be signed in to change notification settings - Fork 4
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.
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
Fix(rgaa): Nav attributes and aria-current for accessibility compliance #1239
base: develop
Are you sure you want to change the base?
Fix(rgaa): Nav attributes and aria-current for accessibility compliance #1239
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This pull request does not contain a valid label. Please add one of the following labels: ['type: feature', 'type: change', 'type: fix', 'type: removal', 'target: developer-experience', 'type: internal']
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The aria-label must be translated in locales files, in English only
@@ -10,7 +10,7 @@ | |||
</header> | |||
|
|||
<div class="vertical-tabs"> | |||
<nav> | |||
<nav role="navigation" aria-label="Sous menu - <%= translated_attribute(page.title) %>"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<nav role="navigation" aria-label="Sous menu - <%= translated_attribute(page.title) %>"> | |
<nav role="navigation" aria-label="<%= i18n.t(".navigation.aria_label", title: translated_attribute(page.title)) %>"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Translation key could just be aria_label
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks, changes made 👍
@@ -21,7 +21,7 @@ | |||
<ul id="dropdown-menu-pages" class="vertical-tabs__list" role="menu"> | |||
<% pages.each do |sibling| %> | |||
<li class="<%= "is-active" if page == sibling %>" role="menuitem"> | |||
<%= link_to translated_attribute(sibling.title), page_path(sibling.slug) %> | |||
<%= link_to translated_attribute(sibling.title), page_path(sibling.slug), aria_current: ("true"if page == sibling) %> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<%= link_to translated_attribute(sibling.title), page_path(sibling.slug), aria_current: ("true"if page == sibling) %> | |
<%= link_to translated_attribute(sibling.title), page_path(sibling.slug), aria_current: (page == sibling).to_s %> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Condition in itself returns a TrueClass or FalseClass, you can use the condition return as string directly
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed, thanks!
🎩 What?
Two parts:
🎩 Why?
This issue originates from an accessibility audit funded by the city of Lyon, targeting compliance with RGAA and corresponding WCAG standards. The changes ensure clearer navigation and improved usability for assistive technologies.
📌 Related Issues
📋 Subtasks
CHANGELOG
entry📷 Screenshots (optional)