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

Update highlight CSS for strong tags #3068

Merged
merged 13 commits into from
Mar 6, 2024

Conversation

rmccar
Copy link
Contributor

@rmccar rmccar commented Mar 4, 2024

What is the context of this PR?

Fixes: #3031

When the move from using <em> to <strong> tags for highlighted text was made the css wasn't updated. This PR fixes that and changes the implementation to now just need strong tags used in a header in order for the highlighting to the text to be applied. The option to add the ons-highlight class is still available to add to any other text if highlighting is needed outside of a header. For document list search result highlighting we should use <mark> which has also been updated to match our highlighting style.

The service manual documentation will need updating after this change.

Also some formatting has been fixed.

BREAKING CHANGE
Services using em tags to highlight text in titles will now need to use the strong tag instead.

How to review this PR

  • VR tests pass without changes
  • Adding strong tags to part of a header highlights the text
  • Adding the ons-highlight class to text also highlights the text

Checklist

This needs to be completed by the person raising the PR.

  • I have selected the correct Assignee
  • I have linked the correct Issue

Copy link

netlify bot commented Mar 4, 2024

Deploy Preview for ons-design-system-preview ready!

Name Link
🔨 Latest commit f43f526
🔍 Latest deploy log https://app.netlify.com/sites/ons-design-system-preview/deploys/65e838fd14dc8e00093fe479
😎 Deploy Preview https://deploy-preview-3068--ons-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@rmccar rmccar self-assigned this Mar 4, 2024
@rmccar rmccar added the Breaking changes This PR contains at least one breaking change label Mar 4, 2024
@rmccar rmccar changed the title Update highlight css for strong tags Update highlight CSS for strong tags Mar 6, 2024
@rmccar rmccar merged commit 435cccb into main Mar 6, 2024
11 checks passed
@rmccar rmccar deleted the fix/3031/update-highlight-css-for-strong-tags branch March 6, 2024 11:09
rmccar added a commit that referenced this pull request Mar 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Breaking changes This PR contains at least one breaking change
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use of colour: highlight contrast (WCAG 2.2 Level A - Accessibility)
4 participants