INS-1517 Design 508 Fixes #488
Open
Conversation
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
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses 508 compliance issues identified by WAVE and AXE accessibility tools, primarily focusing on color contrast improvements and ARIA label additions to enhance accessibility for users with disabilities.
Changes:
- Updated color values across multiple components to meet WCAG contrast requirements
- Added aria-label attributes to interactive elements and descriptive alt text to images
- Refactored pagination component to use semantic HTML structure instead of nested divs
- Implemented unique IDs for footer email inputs across responsive variants
- Enhanced reset filter button with hover state functionality
Reviewed changes
Copilot reviewed 25 out of 29 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/landing/landingView.js | Fixed image alt text reference and updated text colors for better contrast |
| src/pages/landing/components/statsView.js | Adjusted text color for improved visibility |
| src/pages/error/Error.js | Converted background image to img element with alt text, updated button colors |
| src/pages/dataSets/SearchBox/index.js | Removed unused aria-describedby attribute |
| src/pages/dataSets/Filters/Filters.css | Updated reset text color for contrast compliance |
| src/pages/dataSets/Filters/FilterItem.js | Added aria-label to checkbox inputs |
| src/pages/dashTemplate/tabs/DefaultTabTheme.js | Updated program tab text color |
| src/pages/dashTemplate/sideBar/FilterThemeConfig.js | Adjusted sidebar typography color |
| src/pages/dashTemplate/sideBar/BentoFacetFilterStyle.js | Updated multiple colors and spacing for filter controls |
| src/pages/dashTemplate/sideBar/BentoFacetFilter.js | Added hover state logic for reset button and moved SearchView outside nested structure |
| src/pages/dashTemplate/filterQueryBar/QueryBarView.js | Integrated custom styles for query bar |
| src/pages/dashTemplate/filterQueryBar/QueryBarStyles.js | New file defining custom query bar styling |
| src/pages/about/aboutBody.js | Enhanced flowchart image alt text with descriptive content |
| src/pages/about/aboutBody.css | Updated link and header colors for contrast |
| src/components/Pagination/index.js | Refactored pagination to use BSPagination.Item with proper structure and alt text |
| src/components/Pagination/Pagination.css | Simplified CSS to support new semantic pagination structure |
| src/components/Header/components/SearchBarTablet.tsx | Removed empty label wrapper, added aria-label to search input |
| src/components/Header/components/SearchBarMobile.tsx | Removed empty label wrapper, added aria-label to search input |
| src/components/Header/components/SearchBarDesktop.tsx | Removed empty label wrapper, added aria-label to search input |
| src/components/Footer/FooterTablet.tsx | Changed email input ID to emailTablet for uniqueness |
| src/components/Footer/FooterMobile.tsx | Changed email input ID to emailMobile for uniqueness |
| src/components/Footer/FooterDesktop.tsx | Changed email input ID to emailDesktop for uniqueness |
| src/bento/landingPageData.js | Updated all image alt text with descriptive content |
| src/bento/dashTemplate.js | Replaced remote reset icon URL with local SVG assets for different states |
| public/index.html | Moved noscript element and added script to remove it when JS is available |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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.
Overview
Addressed 508 errors flagged in WAVE and AXE extensions. Primarily color contrast issues and aria labels.
Halt!
Please remember to approve, merge, publish, and install the updated packages into the FE to get the aria label changes as well.
CBIIT/bento-frontend#1188
Change Details (Specifics)
Related Ticket(s)
INS-1517