Skip to content

Commit

Permalink
fix(a11y): fix card violations
Browse files Browse the repository at this point in the history
affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web

Fix aria-labelledby error in svg images

ISSUES CLOSED: #375
  • Loading branch information
Elohina committed Jan 8, 2020
1 parent dc5baad commit 3f4cba1
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="grav-c-card-basic">
{% if href %}<a href="{{ href }}">{% endif %}
{{ image(img.src, img.alt, img.class) | safe }}
{% if href %}{{ inlineSvg('decoration-arrow-right') }}{% endif %}
{% if href %}{{ inlineSvg('decoration-arrow-right', customLabel="See more") }}{% endif %}
<h3 class="grav-c-card-basic__title">{{ title }}</h3>
{% if href %}</a>{% endif %}
<p>{{ content }}</p>
Expand Down
2 changes: 1 addition & 1 deletion packages/gravity-ui-web/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ Currently, Gravity's SVG symbol definitions need to be inlined into your HTML. T

The `height` and `width` properties should be set to ensure that your inline SVG's intrinsic size matches the aspect ratio of the referenced symbol. If you omit them, browsers will [default to a width of `150px` and a height of `100px`](https://www.sitepoint.com/replaced-elements-html-myths-realities/) and the chosen symbol will appear centered within that area.

The `aria-lebblledby` should be set to provide a text alternative for the SVG (equivalent to `alt` in `<img>` elements). All of Gravity's SVG symbol definitions contain alternative texts in their `<title>` elements and these have unique `id`s, so that they can be referenced from elsewhere via `aria-lebblledby`.
The `aria-labelledby` should be set to provide a text alternative for the SVG (equivalent to `alt` in `<img>` elements). All of Gravity's SVG symbol definitions contain alternative texts in their `<title>` elements and these have unique `id`s, so that they can be referenced from elsewhere via `aria-labelledby`.

You can look up these values manually in [Gravity's pattern library](http://style.buildit.digital/?p=particles-svg-symbols). For convenience and possible automation, Gravity also ships with a JSON file that contains the symbol and title IDs and the intrinsic width and height values for every available symbol. The format of this file is as follows:

Expand Down

0 comments on commit 3f4cba1

Please sign in to comment.