-
Notifications
You must be signed in to change notification settings - Fork 415
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
aria-selected added to Item Edit "Status" Tab. Fixed ID: 470076 #2063
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.
@CrisGuzmanS : Thanks again! This looks good & it works. However, I realized my recommendations were missing the Aria "role" attributes that I believe these tabs still require. If you could add them in this PR as well, that'd be appreciated. See my inline comment below.
(If you don't have time to make these small changes, let me know. We can always move this PR forward as-is and see if someone else can add the "role" attributes)
@@ -4,7 +4,7 @@ | |||
<h2 class="border-bottom">{{'item.edit.head' | translate}}</h2> | |||
<div class="pt-2"> | |||
<ul class="nav nav-tabs justify-content-start"> | |||
<li *ngFor="let page of pages" class="nav-item"> | |||
<li *ngFor="let page of pages" class="nav-item" [attr.aria-selected]="page.page === currentPage"> |
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.
I think this looks good! However, I just realized that the recommendation for tabs is to set the roles "tablist" and "tab". See the docs at https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
So, I think we need to add two more small things here.
- First, on the
<ul>
just above this we should have<ul role="tablist"..
- Seconding, on this
<li>
we should add the<li role="tab"..
Once those are in place, I think this aligns better with the recommendations in the docs above.
@tdonohue i can work on it. Tomorrow i will update the code |
i have added roles for ul and li (tablist and tab)
@tdonohue i already did the changes you recommended me. Please, let me know if everything is ok 👍 |
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 @CrisGuzmanS ! Finally got back to testing this & I can verify this fixes that first issue in #1190. Will merge immediately
Hi @tdonohue ✋, I am submitting this pull request as a solution to activity ID 470076 in issue 1190. Regarding "Selected state of the element is missing or incorrect."
References
Description
in each of the tabs of the page that opens when editing an item, an aria-selected has been added, if the tab is active, it will have the value of "true", if not, it will have the value of "false".
Instructions for Reviewers
List of changes in this PR:
To test my PR:
Checklist
yarn lint
yarn check-circ-deps
)package.json
), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.