Skip to content

(#1112) Updates guide cards accessibility #1927

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.

Sign up for GitHub

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

Merged
olitharp-nci merged 1 commit into from
Nov 26, 2024
Merged

(#1112) Updates guide cards accessibility #1927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 55 additions & 93 deletions docs/content/components/guide-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ variations:
and risk factors, early detection and diagnosis, and
treatment options.
</p>
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" aria-label="label for the list of buttons">
<li>
<a
href="#!"
Expand Down Expand Up @@ -81,10 +81,10 @@ variations:
<div class="nci-guide-card">
<div class="nci-guide-card__wrapper">
<div class="nci-guide-card__body">
<h2 class="nci-guide-card__title">
<h2 class="nci-guide-card__title" id="list-label">
Research Grant Funding
</h2>
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" aria-labelledby="list-label">
<li>
<a
href="#!"
Expand Down Expand Up @@ -174,98 +174,60 @@ code_snippets:
elements:
- title: Guide Card with Image and Description
preview: true
code: |
<div class="nci-guide-card nci-guide-card--with-image-and-description">
<div class="nci-guide-card__wrapper">
<picture class="nci-guide-card__image">
<img
src="../16x9_placeholder.png"
alt="Patients and Caregivers Image"
/>
</picture>
<div class="nci-guide-card__body">
<p class="nci-guide-card__description">
NCI is the nation's trusted source for cancer
information. We're here with information about causes
and risk factors, early detection and diagnosis, and
treatment options.
</p>
<ul class="nci-card__button-group">
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Funding Opportunities
</a>
</li>
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Cancer Moonshot Funding Opportunities
</a>
</li>
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Funding Strategy
</a>
</li>
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Research Program Contacts
</a>
</li>
</ul>
</div>
</div>
</div>
twig_template_path: components/nci-guide-card/nci-guide-card.twig
code: >
{
"modifier": "nci-guide-card--with-image-and-description",
"image": "../16x9_placeholder.png",
"altText": "image alt text",
"cardLabel": "aria-label for the guide card with image",
"description": "NCI is the nation's trusted source for cancer information. We're here with information about causes and risk factors, early detection and diagnosis, and treatment options.",
"buttongroup": [
{
"title": "Funding Opportunities",
"url": "http://cancer.gov"
},
{
"title": "Cancer Moonshot Funding Opportunities",
"url": "http://cancer.gov"
},
{
"title": "Funding Strategy",
"url": "http://cancer.gov"
},
{
"title": "Research Program Contacts",
"url": "http://cancer.gov"
}
]
}
- title: Guide Card without Image and Description
preview: true
code: |
<div class="nci-guide-card">
<div class="nci-guide-card__wrapper">
<div class="nci-guide-card__body">
<h2 class="nci-guide-card__title">
Research Grant Funding
</h2>
<ul class="nci-card__button-group">
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Funding Opportunities
</a>
</li>
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Cancer Moonshot Funding Opportunities
</a>
</li>
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Funding Strategy
</a>
</li>
<li>
<a
href="#!"
class="usa-button usa-button--outline usa-button--secondary">
Research Program Contacts
</a>
</li>
</ul>
</div>
</div>
</div>

twig_template_path: components/nci-guide-card/nci-guide-card.twig
code: >
{
"title": "Research Grant Funding",
"modifier": "",
"cardLabel": "aria-label for research grant funding guide card",
"buttongroup": [
{
"title": "Funding Opportunities",
"url": "http://cancer.gov"
},
{
"title": "Cancer Moonshot Funding Opportunities",
"url": "http://cancer.gov"
},
{
"title": "Funding Strategy",
"url": "http://cancer.gov"
},
{
"title": "Research Program Contacts",
"url": "http://cancer.gov"
}
]
}
packages:
intro: |
Import this Sass partial into your stylesheet.
Expand Down
24 changes: 14 additions & 10 deletions docs/content/templates/guide-card-row.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations

```html
<div class="nci-title-aligned-card-group">
<h2 class="nci-guide-card__header">
<h2 id="header1" class="nci-guide-card__header">
Patients and Caregivers, with a Title Long Enough to Wrap to a Second Line
</h2>
<div class="nci-guide-card nci-guide-card--with-image-and-description">
Expand All @@ -73,7 +73,7 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations
with information about causes and risk factors, early detection and
diagnosis, and treatment options.
</p>
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" aria-labelled-by="header1">
<li>
<a
href="#!"
Expand Down Expand Up @@ -120,7 +120,7 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations
</div>
</div>
</div>
<h2 class="nci-guide-card__header">Researchers</h2>
<h2 id="header2" class="nci-guide-card__header">Researchers</h2>
<div class="nci-guide-card nci-guide-card--with-image-and-description">
<div class="nci-guide-card__wrapper">
<picture class="nci-guide-card__image">
Expand All @@ -132,7 +132,7 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations
supports the best scientists and research projects through a rigorous
grant application and peer review process.
</p>
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" aria-labelledby="header2">
<li>
<a
href="#!"
Expand Down Expand Up @@ -180,8 +180,10 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations
<li class="nci-guide-card desktop:grid-col-4">
<div class="nci-guide-card__wrapper">
<div class="nci-guide-card__body">
<h2 class="nci-guide-card__title">Research Grant Funding</h2>
<ul class="nci-card__button-group">
<h2 id="title1" class="nci-guide-card__title">
Research Grant Funding
</h2>
<ul class="nci-card__button-group" aria-labelledby="title1">
<li>
<a
href="#!"
Expand Down Expand Up @@ -232,8 +234,8 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations
<li class="nci-guide-card desktop:grid-col-4">
<div class="nci-guide-card__wrapper">
<div class="nci-guide-card__body">
<h2 class="nci-guide-card__title">Grants Process</h2>
<ul class="nci-card__button-group">
<h2 id="title2" class="nci-guide-card__title">Grants Process</h2>
<ul class="nci-card__button-group" aria-labelledby="title2">
<li>
<a
href="#!"
Expand All @@ -256,8 +258,10 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations
<li class="nci-guide-card desktop:grid-col-4">
<div class="nci-guide-card__wrapper">
<div class="nci-guide-card__body">
<h2 class="nci-guide-card__title">Funding for Training</h2>
<ul class="nci-card__button-group">
<h2 id="title3" class="nci-guide-card__title">
Funding for Training
</h2>
<ul class="nci-card__button-group" aria-labelledby="title3">
<li>
<a
href="#!"
Expand Down
8 changes: 4 additions & 4 deletions packages/ncids-twig/components/nci-guide-card/nci-guide-card-group.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
<li class="nci-guide-card desktop:grid-col-4">
<div class="nci-guide-card__wrapper">
<div class="nci-guide-card__body">
<h2 class="nci-guide-card__title">{{ card.title }}</h2>
<ul class="nci-card__button-group">
<h2 id="{{ card.title|url_encode }}" class="nci-guide-card__title">{{ card.title }}</h2>
<ul class="nci-card__button-group" aria-labelledby="{{ card.title|url_encode }}">
{% for item in card.buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
{{ item.title }}
</a>
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
Expand Down
66 changes: 30 additions & 36 deletions packages/ncids-twig/components/nci-guide-card/nci-guide-card-tile-aligned.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,34 @@
<section class="usa-section usa-section--light">
<div class="grid-container">
<div class="nci-title-aligned-card-group">
{% for card in cards %}
<h2 class="nci-guide-card__header">
{{ card.header }}
</h2>
<div class="nci-guide-card {{ card.modifier }}">
<div class="nci-guide-card__wrapper">
{% if card.image %}
<picture class="nci-guide-card__image">
<img
src={{ card.image }}
alt="{{ card.altText }}"
/>
</picture>
{% endif %}
<div class="nci-guide-card__body">
{% if card.title %}
<h2 class="nci-guide-card__title">{{ card.title }}</h2>
{% endif %}
{% if card.description %}
<p class="nci-guide-card__description">{{ card.description }}</p>
{% endif %}
<ul class="nci-card__button-group">
{% for item in card.buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% for card in cards %}
<h2 class="nci-guide-card__header" id="{{ card.header|url_encode }}">
{{ card.header }}
</h2>
<div class="nci-guide-card {{ card.modifier }}">
<div class="nci-guide-card__wrapper">
{% if card.image %}
<picture class="nci-guide-card__image">
<img src={{ card.image }} alt="{{ card.altText }}"/>
</picture>
{% endif %}
<div class="nci-guide-card__body">
{% if card.description %}
<p class="nci-guide-card__description">{{ card.description }}</p>
{% endif %}
<ul class="nci-card__button-group" aria-labelledby="{{ card.header|url_encode }}">
{% for item in card.buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
55 changes: 26 additions & 29 deletions packages/ncids-twig/components/nci-guide-card/nci-guide-card.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
<div id="nci-card" class="grid-container">
<div class="nci-guide-card {{ modifier }}">
<div class="nci-guide-card__wrapper">
{% if image %}
<picture class="nci-guide-card__image">
<img
src={{ image }}
alt="{{ altText }}"
/>
</picture>
{% endif %}
<div class="nci-guide-card__body">
{% if title %}
<h2 class="nci-guide-card__title">{{ title }}</h2>
{% endif %}
{% if description %}
<p class="nci-guide-card__description">{{ description }}</p>
{% endif %}
<ul class="nci-card__button-group">
{% for item in buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="nci-guide-card {{ modifier }}">
<div class="nci-guide-card__wrapper">
{% if image %}
<picture class="nci-guide-card__image">
<img src={{ image }} alt="{{ altText }}" />
</picture>
{% endif %}
<div class="nci-guide-card__body">
{% if title %}
<h2 id="{{ title|url_encode }}" class="nci-guide-card__title">{{ title }}</h2>
{% endif %}
{% if description %}
<p class="nci-guide-card__description">{{ description }}</p>
{% endif %}
<ul class="nci-card__button-group" {% if title %} aria-labelledby="{{ title|url_encode }}" {% else %} aria-label="{{ cardLabel }}" {% endif %}>
{% for item in buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
Loading