Accessibility existing issues all#139
Open
amadulhaxxani wants to merge 5 commits intoclarin-v7from
Open
Conversation
Set HTML lang attributes based on metadata language for various description and metadata display elements to improve i18n and accessibility. Updated templates to bind [attr.lang] on spans, links and browse links; metadata-values now passes mdValue.language into render templates; clarin description component now emits per-entry language and value pairs; ClarinItemBoxView stores itemDescriptionLang; SidebarSearchListElement supports descriptionLang with a getDescriptionLang() hook and OrgUnit implementation returns the description language. These changes ensure displayed metadata uses the correct language attribute when available.
Add ARIA attributes and move icon markup to improve screen-reader support across several components. Updated templates to include aria-label on interactive buttons (info, calendar, remove/save/delete/clear actions) and aria-hidden on decorative <i> icons. Adjusted calendar button markup to place the calendar icon inside the button element. Added corresponding i18n keys in many locale JSON5 files so the new labels are translatable (English provided and placeholder entries added across locales; some locales include TODO notes for translation). These changes are focused on accessibility and localization support.
Replace several presentational heading tags with semantically appropriate heading levels (convert h4/h3/h5/h6 to h2/h3 with existing styling classes) across home, footer and item templates to improve document structure. Add aria-hidden to the hidden repository link and aria-live/aria-atomic to the pagination info for better accessibility. Update footer markup to group links into separate ULs (removing BRs) and adjust SCSS selectors to target both heading elements and .h4 class, plus spacing for stacked lists. Also add TranslateModule.forRoot() to an existing-relation-list-element spec to satisfy translations in tests.
There was a problem hiding this comment.
Pull request overview
Frontend accessibility improvements across multiple templates/components, focusing on language metadata propagation (lang attributes), improved screen reader labeling for icon-only controls, and more semantic/consistent heading markup.
Changes:
- Propagate metadata language into rendered DOM via
[attr.lang]across multiple item/metadata display components. - Add ARIA labels to icon-only buttons and mark decorative icons as
aria-hiddenwhere applicable (incl. pagination live region improvements). - Update headings/structure in key templates (home page, footer, files section) and add related styling + i18n keys (EN/CS) + one test module import.
Reviewed changes
Copilot reviewed 29 out of 29 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/assets/i18n/en.json5 | Adds new i18n keys used by newly introduced ARIA labels/tooltips. |
| src/assets/i18n/cs.json5 | Adds corresponding i18n keys for Czech locale. |
| src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html | Adds aria-label to info button; hides decorative icon from AT. |
| src/app/shared/pagination/pagination.component.html | Adds live-region attributes to pagination info for announcements. |
| src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts | Introduces descriptionLang plumbing via overridable getDescriptionLang(). |
| src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html | Applies [attr.lang] to sidebar description container. |
| src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html | Adds translated aria-labels to icon-only relation-group actions. |
| src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.spec.ts | Imports TranslateModule.forRoot() for test stability. |
| src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html | Adds translated aria-label to “remove related item” icon button. |
| src/app/shared/clarin-item-box-view/clarin-item-box-view.component.ts | Captures description metadata language alongside the value. |
| src/app/shared/clarin-item-box-view/clarin-item-box-view.component.html | Renders item description with [attr.lang]. |
| src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html | Adds aria-labels to calendar toggle buttons; uses decorative <i aria-hidden>. |
| src/app/item-page/views-downloads-statistics/views-downloads-statistics.component.html | Marks metric toggle icons as decorative (aria-hidden). |
| src/app/item-page/simple/field-components/clarin-description-item-field/clarin-description-item-field.component.ts | Refactors description rendering to keep per-entry value + language. |
| src/app/item-page/simple/field-components/clarin-description-item-field/clarin-description-item-field.component.html | Iterates description entries and applies [attr.lang] per entry. |
| src/app/item-page/full/field-components/file-section/full-file-section.component.html | Adds [attr.lang] to file description metadata display. |
| src/app/item-page/field-components/metadata-values/metadata-values.component.html | Propagates metadata language through template outlet and binds [attr.lang] across rendering modes. |
| src/app/item-page/edit-item-page/item-delete/item-delete.component.html | Adds aria-label to info button; hides decorative icon from AT. |
| src/app/item-page/clarin-files-section/clarin-files-section.component.html | Adjusts heading semantics for files section. |
| src/app/home-page/home-page.component.html | Adjusts semantic heading tags while preserving visual sizing via classes. |
| src/app/footer/footer.component.scss | Extends styling to support heading classes and updates spacing for new footer structure. |
| src/app/footer/footer.component.html | Replaces footer headings with semantic headings + utility classes; restructures lists. |
| src/app/entity-groups/research-entities/metadata-representations/org-unit/org-unit-item-metadata-list-element.component.html | Adds [attr.lang] to OrgUnit description rendering. |
| src/app/entity-groups/research-entities/item-list-elements/sidebar-search-list-elements/org-unit/org-unit-sidebar-search-list-element.component.ts | Implements getDescriptionLang() for OrgUnit sidebar elements. |
| src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html | Adds [attr.lang] to OrgUnit search result description. |
| src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html | Adds [attr.lang] to project description rendering. |
| src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html | Adds [attr.lang] to journal description rendering. |
| src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html | Adds [attr.lang] to journal volume description rendering. |
| src/app/clarin-navbar-top/clarin-navbar-top.component.html | Marks hidden repository path anchor as aria-hidden. |
Replace English strings with Czech translations in src/assets/i18n/cs.json5 for the following keys: form.relation-group.save, form.relation-group.delete, form.relation-group.clear, and submission.cc-license.field-info. Improves localization for relation-group actions and the CC license field.
Accessibility tweak: add aria-hidden="true" to the Font Awesome paperclip icon so screen readers ignore the decorative icon. Also replace the non-breaking space inside the <i> tag with a regular space between the icon and the heading text in clarin-files-section.component.html.
This was
linked to
issues
May 4, 2026
Open
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem description
This branch focuses on frontend accessibility improvements
Analysis
What was changed:
Copilot review