cloud-gov / pages-uswds-11ty

An 11ty SSG template using USWDS
Other
16 stars 8 forks source link

Include aria-hidden attribute to Image shortcodes. #52

Open cannandev opened 6 months ago

cannandev commented 6 months ago

USWDS 3.0 adds an aria-hidden attribute to images. The two shortcodes image and image_with_class only have src, cls, alt parameters. It should also support an aria parameter.

Notes

Example: USWDS Banner

<img
  aria-hidden="true"
  class="usa-banner__header-flag"
  src="/assets/img/us_flag_small.png"
  alt=""
/>

Implementation notes

The imageWithClassShortcode function in index.js can be updated with a new parameter, whose default is true.

async function imageWithClassShortcode(
  src,
  cls,
  alt,
  aria=true,
) {
...
  return `<img src="${pathPrefix}${data.url}" class="${cls}" alt="${alt}" aria-hidden="${aria}" loading="lazy" decoding="async">`;
};

Acceptance Criteria

Thanks for all your hard work! 🙇🏾‍♀️