MWPW-123745 SVG alt text #401

rgclayton · 2023-01-20T18:02:44Z

Feature added to svg images that allows authors to add alt text.

Adds the ability to author alt text on svg images.
Defaults to empty alt tag on the image if no alt text is authored. Per accessibility best practices this declares the image as "decorative".

Authors can add a pipe character " | " after the image path followed by whatever text is desired to be displayed as alt text.

Fixed bug where all svg images added to a page were treated as links when previewed.
Now, only svgs that have a different href will be treated as links.

Resolves: MWPW-123745

Test URLs:

Bacom Test URLs:

Added feature to svg images to allow for authors to add alt text.

aem-code-sync · 2023-01-20T18:02:46Z

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

Re-run PSI Checks

aem-code-sync · 2023-01-20T18:03:05Z

Page	Score	PSI Audit	Google
/drafts/rclayton/svg-alt-tag?martech=off

codecov · 2023-01-20T18:06:11Z

Codecov Report

Merging #401 (6b2f9e5) into main (625c989) will decrease coverage by 0.02%.
The diff coverage is 91.66%.

@@            Coverage Diff             @@
##             main     #401      +/-   ##
==========================================
- Coverage   98.91%   98.89%   -0.02%     
==========================================
  Files          79       79              
  Lines       20847    20864      +17     
==========================================
+ Hits        20620    20634      +14     
- Misses        227      230       +3

Impacted Files	Coverage Δ
libs/utils/utils.js	`96.90% <91.66%> (-0.36%)`	⬇️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

meganthecoder · 2023-01-24T19:38:11Z

libs/utils/utils.js

+  const altTextFlagIndex =  textContent.indexOf('|');
+  const sanitizeTextContent = altTextFlagIndex === -1
+    ? textContent
+    : textContent?.slice(0 ,altTextFlagIndex).trim();


Minor spacing issue. Is your eslint working?

Suggested change

: textContent?.slice(0 ,altTextFlagIndex).trim();

: textContent?.slice(0, altTextFlagIndex).trim();

Is your eslint working?

I thought it was. Looks like I need to double check.

meganthecoder · 2023-01-24T19:39:38Z

libs/utils/utils.js

@@ -335,13 +335,24 @@ export async function loadBlock(block) {

 export function decorateSVG(a) {
  const { textContent, href } = a;
-  const ext = textContent?.substr(textContent.lastIndexOf('.') + 1);
+  const altTextFlagIndex =  textContent.indexOf('|');
+  const sanitizeTextContent = altTextFlagIndex === -1


Usually verbs are for functions. Would sanitizedTextContent be more appropriate?

meganthecoder · 2023-01-24T19:40:41Z

libs/utils/utils.js

+  const textContentUrl = new URL(sanitizeTextContent);
+  const hrefUrl = new URL(href);


new URL can throw errors if the url is just a slug. Are you positive that the url will always have a domain? If not, it would be good to put these in a try-catch block

Fixed. Thanks for the feedback @meganthecoder!

aem-code-sync · 2023-01-25T00:24:25Z

Page	Score	PSI Audit	Google
/drafts/rclayton/svg-alt-tag?martech=off

aem-code-sync · 2023-01-25T03:09:46Z

Page	Score	PSI Audit	Google
/drafts/rclayton/svg-alt-tag?martech=off

auniverseaway · 2023-01-25T03:27:50Z

@rgclayton we will need to address test coverage tomorrow.

* MWPW-122131 - Embed Blocks (#348) * add twitter auto_block * add tiktok * add tiktok test * add vimeo * add instagram * add slideshare * minor fix * fix vimeo player link * fix vimeo url check * PR feedback Co-authored-by: Chris Millar <cmillar@adobe.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> * MWPW-120782 - Fix Chart Color Order (#393) * MWPW-109331 - Carousel (#375) * Carousel v1 * PR feedback, clean up * PR feedback. Clean up. Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> * MWPW-124631 check if adobe logo block exists in document (#406) check if adobe logo block exists in doc * Migrate Walls.io (#378) * add walls.io block * add test * fix css * fix url vulnerability * pr feedback * fix vulnerability * pr feedback * MWPW-124632 [Milo] No character count in the review component text box (#407) * MWPW-124584 (#411) Co-authored-by: Blaine Gunn <gunn@adobe.com> * MWPW-124845 - Start Project button missing for only some projects (#409) MWPW-124845 - Start Project button missing for only English Copy Projects - update start button show condition to handle the case where there are no translation projects Resolves: MWPW-124845 * MWPW-124277 - Link Localization not working for some links in Gnav and Footer (#396) - call decorateLinks for gnav in gnav init instead of individual blocks - removed decorateSVG and localizeLink instances as it is called in decorateLinks - added tests to verify link localization in gnav menu, breadcrumb, cta, brand link - call decorateLinks for footer links in init method - added try catch in utils for empty href or malformed href - fix https://business.adobe.com/au getting converted to https://business.adobe.com/au/au - add test for this fix - Support www.adobe.com link localization and add test for the same Resolves: MWPW-124277 * MWPW-124277 - Regression Fix Link Localization (#416) MWPW-124277 - Regression Fix Link Localization for - Retaining the per menu localize link to avoid regression issue noticed with few links not being localized. Resolves: MWPW-124277 * MWPW-123893 - Review Schema (#415) * Add product schema to review block * MWPW-123745 SVG alt text (#401) * MWPW-123745 SVG alt text Added feature to svg images to allow for authors to add alt text. * PR feedback Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Chris Millar <cmillar@adobe.com> * MWPW-120020 - Event-driven Modals (#403) * Ability to open a modal with a custom event * Ability to customize the look and behavior of a modal * Turned GeoRouting on for Milo * MWPW-1224169 Updated How-to block (#404) * MWPW-1224169 Updated How-to block * Fix tests; Update ld json * Update inline image size * Die gracefully with old format * full backwards compatibility Co-authored-by: ChrisChrisChris <chrischrischris@users.noreply.github.com> * small windows fix (#418) * MWPW-123760 (#383) Co-authored-by: Chris Millar <cmillar@adobe.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> * MWPW-124906 - Embed links inside text block (#420) Co-authored-by: Chris Millar <cmillar@adobe.com> * MWPW-124846 - Loc Support fragments at any level in hierarchy (#419) Co-authored-by: bhagwath <bhagwath@adobe.com> * MWPW-125032 Brand Block: using an SVG link for logo breaks gnav rendering (#422) * MWPW-120802 - Diagonal Labels for Chart (#412) * MWPW-120802 - Diagonal Labels for Chart * pr * Add asset support to library * Add Franklin customer library support * Remove 3rd party libraries if not used * Add utils test coverage (#427) Co-authored-by: Ryan Clayton <rclayton@adobe.com> * A simple `reading-time` block to estimate the reading time of the article (#356) * A simple block to estimate the reading time of the article * reading-time: typo in the css * reading-time: small change to the css * reading-time PR review changes * added placeholders for localization of the '5 min read' text * [reading-time]: add a placeholder key for singular reading time value * [reading-time]: less strict scoping for css * [reading-time]: less strict scoping for css * [reading-time]: text-align center only if it's in a center section * reading-time tests added * reading-time tests added * Fixing bug for faas import from link clicked. (#424) * Fixing bug for faas import from link clicked. * adding ||= sytex. * same as before. * MWPW-122611 - [GH Action] Old browser function detection (#423) * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions * MWPW-122611 - [GH Action] Old browser function detection - add a Github action to check for unsupported functions --------- Co-authored-by: Aaron Mauchley <mauchley@adobe.com> * removing display none from accordion (#433) --------- Co-authored-by: Saugat Malla <saugat013@gmail.com> Co-authored-by: Chris Millar <cmillar@adobe.com> Co-authored-by: Ryan Clayton <rgclayton@gmail.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: Ryan Clayton <rclayton@adobe.com> Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> Co-authored-by: Mirko Sagolj <37147400+msagolj@users.noreply.github.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Blaine Gunn <gunn@adobe.com> Co-authored-by: Janaki R Bhagwath <janaki.r.bhagwath@gmail.com> Co-authored-by: bhagwath <bhagwath@adobe.com> Co-authored-by: Solène <62023521+So1ene@users.noreply.github.com> Co-authored-by: Sean Choi <seanchoi@adobe.com> Co-authored-by: jckautzmann <jkautzma@adobe.com> Co-authored-by: Aaron Mauchley <mauchley@adobe.com> Co-authored-by: Brad Johnson <fullcolorcoder@gmail.com>

MWPW-123745 SVG alt text

5114ffd

Added feature to svg images to allow for authors to add alt text.

rgclayton requested review from auniverseaway and chrischrischris January 20, 2023 18:02

rgclayton requested a review from ryanmparrish January 20, 2023 18:03

auniverseaway approved these changes Jan 24, 2023

View reviewed changes

meganthecoder reviewed Jan 24, 2023

View reviewed changes

PR feedback

ea9b8f1

auniverseaway self-assigned this Jan 25, 2023

auniverseaway added the verified PR has been E2E tested by a reviewer label Jan 25, 2023

Merge branch 'main' into mwpw-123745-svg-alt-text

6b2f9e5

auniverseaway merged commit c550d57 into main Jan 25, 2023

auniverseaway deleted the mwpw-123745-svg-alt-text branch January 25, 2023 03:28

So1ene mentioned this pull request Apr 21, 2023

MWPW-128103: Marquee Multiple Logos, Marquee Split Update #614

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MWPW-123745 SVG alt text #401

MWPW-123745 SVG alt text #401

rgclayton commented Jan 20, 2023

aem-code-sync bot commented Jan 20, 2023

aem-code-sync bot commented Jan 20, 2023

codecov bot commented Jan 20, 2023 •

edited

Loading

meganthecoder Jan 24, 2023

rgclayton Jan 25, 2023

meganthecoder Jan 24, 2023

meganthecoder Jan 24, 2023 •

edited

Loading

rgclayton Jan 25, 2023

aem-code-sync bot commented Jan 25, 2023

aem-code-sync bot commented Jan 25, 2023

auniverseaway commented Jan 25, 2023

	: textContent?.slice(0 ,altTextFlagIndex).trim();
	: textContent?.slice(0, altTextFlagIndex).trim();

		const textContentUrl = new URL(sanitizeTextContent);
		const hrefUrl = new URL(href);

MWPW-123745 SVG alt text #401

MWPW-123745 SVG alt text #401

Conversation

rgclayton commented Jan 20, 2023

aem-code-sync bot commented Jan 20, 2023

aem-code-sync bot commented Jan 20, 2023

codecov bot commented Jan 20, 2023 • edited Loading

Codecov Report

meganthecoder Jan 24, 2023

Choose a reason for hiding this comment

rgclayton Jan 25, 2023

Choose a reason for hiding this comment

meganthecoder Jan 24, 2023

Choose a reason for hiding this comment

meganthecoder Jan 24, 2023 • edited Loading

Choose a reason for hiding this comment

rgclayton Jan 25, 2023

Choose a reason for hiding this comment

aem-code-sync bot commented Jan 25, 2023

aem-code-sync bot commented Jan 25, 2023

auniverseaway commented Jan 25, 2023

codecov bot commented Jan 20, 2023 •

edited

Loading

meganthecoder Jan 24, 2023 •

edited

Loading