Skip to content

(#1112) Add Aria Label to Guide Cards #1864

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

Closed
karlikpj wants to merge 1 commit into from
Closed

(#1112) Add Aria Label to Guide Cards #1864

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
8 changes: 4 additions & 4 deletions docs/content/components/guide-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
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="guide-card-label">
Research Grant Funding
</h2>
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" aria-labelledby="guide-card-label">
<li>
<a
href="#!"
Expand Down Expand Up @@ -229,10 +229,10 @@ code_snippets:
<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="guide-card-label">
Research Grant Funding
</h2>
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" aria-labelledby="guide-card-label">
<li>
<a
href="#!"
Expand Down
43 changes: 33 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 class="nci-guide-card__header" id="guide-card-caregivers">
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,10 @@ 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-labelledby="guide-card-caregivers"
>
<li>
<a
href="#!"
Expand Down Expand Up @@ -120,7 +123,9 @@ Refer to [Guide Card](/components/guide-card) for best practice recommendations
</div>
</div>
</div>
<h2 class="nci-guide-card__header">Researchers</h2>
<h2 class="nci-guide-card__header" id="guide-card-researchers">
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 +137,10 @@ 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="guide-card-researchers"
>
<li>
<a
href="#!"
Expand Down Expand Up @@ -180,8 +188,13 @@ 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 class="nci-guide-card__title" id="guide-card-research">
Research Grant Funding
</h2>
<ul
class="nci-card__button-group"
aria-labelledby="guide-card-researchers"
>
<li>
<a
href="#!"
Expand Down Expand Up @@ -232,8 +245,13 @@ 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 class="nci-guide-card__title" id="guide-card-grants">
Grants Process
</h2>
<ul
class="nci-card__button-group"
aria-labelledby="guide-card-grants"
>
<li>
<a
href="#!"
Expand All @@ -256,8 +274,13 @@ 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 class="nci-guide-card__title" id="guide-card-funding">
Funding for Training
</h2>
<ul
class="nci-card__button-group"
aria-labelledby="guide-card-funding"
>
<li>
<a
href="#!"
Expand Down
4 changes: 2 additions & 2 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,8 +6,8 @@
<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 class="nci-guide-card__title" id={{ card.cardId }}>{{ card.title }}</h2>
<ul class="nci-card__button-group" aria-labelledby={{ card.cardId }}>
{% for item in card.buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
Expand Down
4 changes: 2 additions & 2 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
Expand Up @@ -2,7 +2,7 @@
<div class="grid-container">
<div class="nci-title-aligned-card-group">
{% for card in cards %}
<h2 class="nci-guide-card__header">
<h2 class="nci-guide-card__header" {% if card.header %}id={{ card.cardId }}{% endif %}>
{{ card.header }}
</h2>
<div class="nci-guide-card {{ card.modifier }}">
Expand All @@ -22,7 +22,7 @@
{% if card.description %}
<p class="nci-guide-card__description">{{ card.description }}</p>
{% endif %}
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" aria-labelledby={{ card.cardId }}>
{% for item in card.buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
Expand Down
6 changes: 3 additions & 3 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
Expand Up @@ -9,14 +9,14 @@
/>
</picture>
{% endif %}
<div class="nci-guide-card__body">
<div class="nci-guide-card__body" >
{% if title %}
<h2 class="nci-guide-card__title">{{ title }}</h2>
<h2 class="nci-guide-card__title" id={{ cardId }}>{{ title }}</h2>
{% endif %}
{% if description %}
<p class="nci-guide-card__description">{{ description }}</p>
{% endif %}
<ul class="nci-card__button-group">
<ul class="nci-card__button-group" {% if title %}aria-labelledby={{ cardId }}{% endif %}>
{% for item in buttongroup %}
<li>
<a href="{{ item.url }}" class="usa-button usa-button--outline usa-button--secondary">
Expand Down
4 changes: 4 additions & 0 deletions ...ng/ncids-css-testing/stories/components/nci-guide-card/nci-guide-card.default.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const Default = () => (
css={css}
html={Template.bind({})({
title: 'Research Grant Funding',
cardId: 'default-card',
'modifier': 'desktop:grid-col-4',
'buttongroup': [
{
Expand Down Expand Up @@ -49,6 +50,7 @@ export const CardGroup = () => (
'cards': [
{
'title': 'Research Grant Funding',
cardId: 'card-group-research-funding',
'buttongroup': [
{
'title': 'Funding Opportunities',
Expand All @@ -70,6 +72,7 @@ export const CardGroup = () => (
},
{
'title': 'Grants Process',
cardId: 'card-group-grants-process',
'buttongroup': [
{
'title': 'Apply for a Grant',
Expand All @@ -91,6 +94,7 @@ export const CardGroup = () => (
},
{
'title': 'Funding for Training',
cardId: 'card-group-training',
'buttongroup': [
{
'title': 'Funding for Cancer Training',
Expand Down
4 changes: 4 additions & 0 deletions ...ncids-css-testing/stories/components/nci-guide-card/nci-guide-card.test-cases.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export const TitleAlignedCardGroupWithoutDescription = () => (
'image': img_placeholder_16x9,
'altText': 'Patients and Caregivers',
'modifier': 'nci-guide-card--with-image-and-description',
'cardId': 'guide-card-patients-caregivers',
'buttongroup': [
{
'title': 'Funding Opportunities',
Expand All @@ -107,6 +108,7 @@ export const TitleAlignedCardGroupWithoutDescription = () => (
'image': img_placeholder_16x9,
'altText': 'Researchers',
'modifier': 'nci-guide-card--with-image-and-description',
'cardId': 'guide-card-researchers',
'buttongroup': [
{
'title': 'Apply for a Grand',
Expand Down Expand Up @@ -139,6 +141,7 @@ export const TitleAlignedCardGroupWithoutImage = () => (
{
'header': 'Patients and Caregivers, with a Title Long Enough to Wrap to a Second Line',
'modifier': 'nci-guide-card--with-image-and-description',
'cardId': 'guide-card-patients-caregivers',
'description': 'NCI is the nation&apos;s trusted source for cancer information. We&apos;re here with information about causes and risk factors, early detection and diagnosis, and treatment options.',
'buttongroup': [
{
Expand All @@ -162,6 +165,7 @@ export const TitleAlignedCardGroupWithoutImage = () => (
{
'header': 'Researchers',
'modifier': 'nci-guide-card--with-image-and-description',
'cardId': 'guide-card-patients-Researchers',
'description': 'Support for the best science underpins everything NCI does. NCI supports the best scientists and research projects through a rigorous grant application and peer review process.',
'buttongroup': [
{
Expand Down
3 changes: 3 additions & 0 deletions ...g/ncids-css-testing/stories/components/nci-guide-card/nci-guide-card.variants.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const SingleGuideCardWithImageAndDescriptionWithoutHeading = () => (
css={css}
html={Template.bind({})({
'image': img_placeholder_16x9,
'cardId': 'guide-card-image-and-description',
'altText': 'Grants and Research',
'modifier': 'nci-guide-card--with-image-and-description',
'description': 'NCI is the nation&apos;s trusted source for cancer information. We&apos;re here with information about causes and risk factors, early detection and diagnosis, and treatment options.',
Expand Down Expand Up @@ -53,6 +54,7 @@ export const TitleAlignedCardGroup = () => (
{
'header': 'Patients and Caregivers, with a Title Long Enough to Wrap to a Second Line',
'image': img_placeholder_16x9,
'cardId': 'guide-caregivers',
'altText': 'Patients and Caregivers',
'modifier': 'nci-guide-card--with-image-and-description',
'description': 'NCI is the nation&apos;s trusted source for cancer information. We&apos;re here with information about causes and risk factors, early detection and diagnosis, and treatment options.',
Expand All @@ -79,6 +81,7 @@ export const TitleAlignedCardGroup = () => (
'header': 'Researchers',
'image': img_placeholder_16x9,
'altText': 'Researchers',
'cardId': 'guide-card-researchers',
'modifier': 'nci-guide-card--with-image-and-description',
'description': 'Support for the best science underpins everything NCI does. NCI supports the best scientists and research projects through a rigorous grant application and peer review process.',
'buttongroup': [
Expand Down
8 changes: 4 additions & 4 deletions testing/ncids-css-testing/stories/templates/cgov-home/default.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ const html = `
<section class="usa-section usa-section--light">
<div class="grid-container">
<div class="nci-title-aligned-card-group">
<h2 class="nci-guide-card__header">
<h2 class="nci-guide-card__header" id="card-caregivers">
Patients and Caregivers, with a Title Long Enough to Wrap to a Second
Line
</h2>
Expand All @@ -172,7 +172,7 @@ const html = `
here 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-labelledby="card-caregivers">
<li>
<a
href="#"
Expand Down Expand Up @@ -205,7 +205,7 @@ const html = `
</div>
</div>
</div>
<h2 class="nci-guide-card__header">Researchers</h2>
<h2 class="nci-guide-card__header" aria-labelledby="card-researchers">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 @@ -217,7 +217,7 @@ const html = `
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="card-researchers">
<li>
<a
href="#"
Expand Down