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.

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(accessibilityFixes): Accessibility Fixes #27

Merged
merged 10 commits into from
Mar 11, 2025

Conversation

jarvisraymond-uchicago
Copy link
Contributor

@jarvisraymond-uchicago jarvisraymond-uchicago commented Mar 5, 2025

Link to JIRA ticket if there is one:
https://ctds-planx.atlassian.net/browse/HP-1748

Accessibility Fixes

  • Makes "Newly Available Datasets" text on Newly Available Datasets page a H1 header
  • Adds <title> element to both pages: the HTML titles will use format "Page Title | HEAL Data Platform"
  • Adds lang="en" attribute to <html> element
  • All page's main content is now wrapper in a <main> element
  • Adds a skip navigation control to skip the navigation. On focus state it will be visible.

BEFORE
image
image

AFTER
Skip to main added:
image

Automated axe DevTools tests pass 100%
image
image

Improvements

  • Remediates accessibility issues

@jarvisraymond-uchicago jarvisraymond-uchicago changed the title fix(accessibilityFixes): initial commit fix(accessibilityFixes): Accessibility Fixes Mar 6, 2025
@jarvisraymond-uchicago jarvisraymond-uchicago marked this pull request as ready for review March 10, 2025 16:21
const PageTitle: React.FC<PageTitleProps> = ({ pageName }) => {
return (
<Head>
<title>{`${pageName} | HEAL Data Platform`}</title>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we compensate for if pageName is not provided?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is ok for now

  • If another DEV creates a page using the PageTitle component, TypesScript will require that they pass the pageName prop with a string
  • If a page is created without the PageTitle component, the user's web browser will display the URL of the page or the name of the website as the title in the title bar or tab. In some cases, it may also show "Untitled" or a similar default message, depending on the browser being used.
  • If we need different functionality going forward, like pages with a default page title such as only "HEAL Data Platform" we can add that functionality when needed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sounds good

Copy link
Contributor

@mfshao mfshao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

overall great except for a minor question

Copy link

@cemile-ctds cemile-ctds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a background color to the quote section, like hero section. In the event that the image is not displayed, we need a fallback color to ensure the quote text is still visible. Additionally, please ensure the color contrast ratio between the text and background meets accessibility standards for readability.

@jarvisraymond-uchicago jarvisraymond-uchicago merged commit 2f14215 into main Mar 11, 2025
4 checks passed
@jarvisraymond-uchicago jarvisraymond-uchicago deleted the fix/accessibilityFixes branch March 11, 2025 13:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants