Skip to content

Commit

Permalink
fix: arguments chips accessibility
Browse files Browse the repository at this point in the history 
* arguments chips structure changes

* update tag structure for accessibility and uniform tag in all pages

* update style and structure of chips, and clean code

* clean code chips

* add variable for crawler data-element in chips
  • Loading branch information
@lorycade
lorycade authored Nov 18, 2022
1 parent f78ac68 commit da95cbb
Show file tree
Hide file tree
Showing 19 changed files with 286 additions and 309 deletions.
42 changes: 23 additions & 19 deletions src/components/cmp-heading/cmp-heading-detail.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,45 @@
<div class="row">
<div class="col-lg-8">
{{#if h2}}
<h2 class="title-xxxlarge {{title-class}}">{{title}}</h2>
<h2 class="title-xxxlarge {{title-class}}">{{title}}</h2>
{{else}}
<h1 class="title-xxxlarge {{title-class}}" data-element="service-title">{{title}}</h1>
<h1 class="title-xxxlarge {{title-class}}" data-element="service-title">{{title}}</h1>
{{/if}}

{{#if label-tag-up}}
<div class="d-flex flex-wrap cmp-heading__tag">
<div class="cmp-tag">
<span class="cmp-tag__tag title-xsmall" data-element="service-status">Servizio attivo</span>
</div>
</div>
{{#if label-tag}}
<ul class="d-flex flex-wrap gap-1 my-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag=label-tag data-element="service-status" no-link=true}}
</li>
</ul>

{{/if}}

{{#if subTitle}}
<p class="subtitle-small {{pClass}}">{{{subTitle}}}</p>
<p class="subtitle-small {{pClass}}">{{{subTitle}}}</p>
{{/if}}

{{#if description}}
<p class="subtitle-small {{desClass}}" data-element="service-description">{{{description}}}</p>
<p class="subtitle-small {{desClass}}" data-element="service-description">{{{description}}}</p>
{{/if}}

{{#if button}}
{{>partials/button/button class="fw-bold"}}
{{>partials/button/button class="fw-bold"}}
{{/if}}

{{#if double-button}}
<div class="d-lg-flex gap-30 mb-2">
{{>partials/button/button class="fw-bold btn-primary mr-lg-30"}}
{{>partials/button/button class="fw-bold btn-outline-primary t-primary" label=second-label aria-label=second-ariaLabel}}
</div>
<div class="d-lg-flex gap-30 mb-2">
{{>partials/button/button class="fw-bold btn-primary mr-lg-30"}}
{{>partials/button/button class="fw-bold btn-outline-primary t-primary" label=second-label
aria-label=second-ariaLabel}}
</div>
{{/if}}
</div>
<div class="col-lg-3 offset-lg-1 mt-5 mt-lg-0">
<div class="dropdown">
<button aria-label="condividi sui social" class="btn btn-dropdown dropdown-toggle text-decoration-underline d-inline-flex align-items-center fs-0" type="button"
id="shareActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button aria-label="condividi sui social"
class="btn btn-dropdown dropdown-toggle text-decoration-underline d-inline-flex align-items-center fs-0"
type="button" id="shareActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg class="icon" aria-hidden="true">
<use xlink:href="../assets/bootstrap-italia/dist/svg/sprites.svg#it-share"></use>
</svg>
Expand Down Expand Up @@ -83,8 +86,9 @@
</div>
</div>
<div class="dropdown">
<button aria-label="vedi azioni da compiere sulla pagina" class="btn btn-dropdown dropdown-toggle text-decoration-underline d-inline-flex align-items-center fs-0" type="button"
id="viewActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button aria-label="vedi azioni da compiere sulla pagina"
class="btn btn-dropdown dropdown-toggle text-decoration-underline d-inline-flex align-items-center fs-0"
type="button" id="viewActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg class="icon" aria-hidden="true">
<use xlink:href="../assets/bootstrap-italia/dist/svg/sprites.svg#it-more-items"></use>
</svg>
Expand Down
6 changes: 0 additions & 6 deletions src/components/cmp-heading/cmp-heading.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,6 @@
{{else}}
<h1 class="title-xxxlarge {{title-class}}">{{title}}</h1>
{{/if}}
{{/if}}

{{#if label-tag-up}}
<div class="d-flex flex-wrap cmp-heading__tag">
{{>partials/cmp-tag/cmp-tag}}
</div>
{{/if}}

{{#if subTitle}}
Expand Down
18 changes: 9 additions & 9 deletions src/components/cmp-heading/cmp-heading.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,16 @@
}
}

.chip.chip-simple {
height: auto;
padding: 3px 10px;
// .chip.chip-simple {
// height: auto;
// padding: 3px 10px;

.chip-label {
height: auto;
line-height: 1.2;
transform: unset;
}
}
// .chip-label {
// height: auto;
// line-height: 1.2;
// transform: unset;
// }
// }

.dropdown {
display: inline-block;
Expand Down
12 changes: 8 additions & 4 deletions src/components/partials/cmp-tag/cmp-tag.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<div class="cmp-tag">
<a class="chip chip-simple {{class}} text-decoration-none" href="#" data-element="service-topic">
<span class="chip-label">{{label-tag}}{{label-tag-up}}</span>
</a>
{{#if no-link}}
<div class="chip chip-simple {{class}}" href="#" {{#if data-element}}data-element="{{data-element}}"{{/if}}>
<span class="chip-label">{{label-tag}}</span>
</div>
{{else}}
<a class="chip chip-simple {{class}}" href="#" {{#if data-element}}data-element="{{data-element}}"{{/if}}>
<span class="chip-label">{{label-tag}}</span>
</a>
{{/if}}
42 changes: 23 additions & 19 deletions src/components/partials/cmp-tag/cmp-tag.scss
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
.cmp-tag {
&__tag {
@include font(14, 14);
font-weight: 600;
color: #008758;
padding: 0 0.75rem;
border: 1px solid #008758;
.chip {
border-color: #007a52;
background: #fff;

.chip-label {
color: #007A52;
}

&:is(a) {
text-decoration: none;
border-radius: 50px;

@include media-breakpoint-up(md) {
font-weight: 700;
padding: 0 0.667rem;
&:hover:not(.chip-disabled) {
background-color: #007A52;

.chip-label {
color: #fff;
}
}
}

.bg-tag {
@include media-breakpoint-down (md) {
background-color: get-color(primary, main);
&:is(div) {
&:hover:not(.chip-disabled) {
background-color: transparent;
border-color: #007A52;


.chip-label{
color: get-color(white, main);
}
.chip-label {
color: #007A52;
}
}
}
}
}
22 changes: 15 additions & 7 deletions src/pages/servizi/iscrizione-graduatoria-trovare-informazioni-servizio.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
label="Richiesta di iscrizione online"
primary=true
class="text-button"
label-tag-up="Servizio attivo"
label-tag="Servizio attivo"
servizio-attivo=true
}}
</div>
Expand Down Expand Up @@ -158,12 +158,20 @@

<div class="col-12 mb-30">
<span class="text-paragraph-small">Argomenti:</span>
<div class="d-flex flex-wrap gap-2 mt-10 mb-30">
{{>partials/cmp-tag/cmp-tag label-tag="Educazione" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Famiglia" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Scuola materna" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Bambini 3 - 5 anni" class="t-primary bg-tag"}}
</div>
<ul class="d-flex flex-wrap gap-2 mt-10 mb-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Educazione" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Famiglia" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Scuola materna" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Bambini 3 - 5 anni" data-element="service-topic"}}
</li>
</ul>
<p class="text-paragraph-small mb-0">Pagina aggiornata il 14/04/2022</p>
</div>
</section>
Expand Down
10 changes: 6 additions & 4 deletions src/pages/servizi/pagamenti-dovuti-multa-trovare-informazioni-servizio.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
label="Paga online"
primary=true
class="text-button"
label-tag-up="Servizio attivo"
label-tag="Servizio attivo"
servizio-attivo=true
}}
</div>
Expand Down Expand Up @@ -138,9 +138,11 @@

<div class="col-12 mb-30">
<span class="text-paragraph-small">Argomenti:</span>
<div class="d-flex flex-wrap gap-2 mt-2 mb-30 ">
{{>partials/cmp-tag/cmp-tag label-tag="Pagamenti" class="bg-tag"}}
</div>
<ul class="d-flex flex-wrap gap-2 mt-10 mb-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Pagamenti" data-element="service-topic"}}
</li>
</ul>
<p class="text-paragraph-small mb-0">Pagina aggiornata il 14/04/2022</p>
</div>
</div>
Expand Down
14 changes: 9 additions & 5 deletions src/pages/servizi/pagamenti-dovuti-trovare-informazioni-servizio.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
label="Avvia richiesta online"
primary=true
class="text-button"
label-tag-up="Servizio attivo"
label-tag="Servizio attivo"
servizio-attivo=true
}}
</div>
Expand Down Expand Up @@ -178,10 +178,14 @@

<div class="col-12 mb-30">
<span class="text-paragraph-small">Argomenti:</span>
<div class="d-flex flex-wrap gap-2 mt-2 mb-30 ">
{{>partials/cmp-tag/cmp-tag label-tag="Abitazione" class="bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Pagamenti" class="bg-tag"}}
</div>
<ul class="d-flex flex-wrap gap-2 mt-10 mb-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Abitazione" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Pagamenti" data-element="service-topic"}}
</li>
</ul>
<p class="text-paragraph-small mb-0">Pagina aggiornata il 14/04/2022</p>
</div>
</div>
Expand Down
14 changes: 9 additions & 5 deletions src/pages/servizi/permessi-autorizzazioni-trovare-informazioni-servizio.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
label="Richiedi online"
primary=true
class="text-button"
label-tag-up="Servizio attivo"
label-tag="Servizio attivo"
servizio-attivo=true
}}
</div>
Expand Down Expand Up @@ -149,10 +149,14 @@

<div class="col-12 mb-30">
<span class="text-paragraph-small">Argomenti:</span>
<div class="d-flex flex-wrap gap-2 mt-10 mb-30">
{{>partials/cmp-tag/cmp-tag label-tag="Autovettura" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Permesso" class="t-primary bg-tag"}}
</div>
<ul class="d-flex flex-wrap gap-2 mt-10 mb-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Autovettura" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Permesso" data-element="service-topic"}}
</li>
</ul>
<p class="text-paragraph-small mb-0">Pagina aggiornata il 14/04/2022</p>
</div>
</section>
Expand Down
22 changes: 15 additions & 7 deletions src/pages/servizi/segnalazione-disservizio-trovare-informazioni-servizio.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
label="Segnala disservizio"
second-label="Tutte le segnalazioni"
class="text-button"
label-tag-up="Servizio attivo"
label-tag="Servizio attivo"
servizio-attivo=true
}}
</div>
Expand Down Expand Up @@ -156,12 +156,20 @@

<div class="col-12 mb-30">
<span class="text-paragraph-small">Argomenti:</span>
<div class="d-flex flex-wrap gap-2 mt-10 mb-30">
{{>partials/cmp-tag/cmp-tag label-tag="Gestione rifiuti" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Igiene pubblica" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Spazi verdi" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Inquinamento" class="t-primary bg-tag"}}
</div>
<ul class="d-flex flex-wrap gap-2 mt-10 mb-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Gestione rifiuti" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Igiene pubblica" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Spazi verdi" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Inquinamento" data-element="service-topic"}}
</li>
</ul>
<p class="text-paragraph-small mb-0">Pagina aggiornata il 14/04/2022</p>
</div>
</div>
Expand Down
10 changes: 6 additions & 4 deletions src/pages/servizi/segnalazione-disservizio-tutte-segnalazioni-trovare-informazioni.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
label="Segnala disservizio"
second-label="Tutte le segnalazioni"
class="text-button"
label-tag-up="Servizio attivo"
label-tag="Servizio attivo"
servizio-attivo=true
}}
</div>
Expand Down Expand Up @@ -160,9 +160,11 @@

<div class="col-12 mb-30">
<span class="text-paragraph-small">Argomenti:</span>
<div class="d-flex flex-wrap gap-2 mt-10 mb-30">
{{>partials/cmp-tag/cmp-tag label-tag="Servizio pubblico" class="t-primary bg-tag"}}
</div>
<ul class="d-flex flex-wrap gap-2 mt-10 mb-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Servizio pubblico" data-element="service-topic"}}
</li>
</ul>
<p class="text-paragraph-small mb-0">Pagina aggiornata il 14/04/2022</p>
</div>
</div>
Expand Down
18 changes: 12 additions & 6 deletions src/pages/servizi/servizi-pagamento-trovare-informazioni-sul-servizio.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
label="Richiedi online"
primary=true
class="text-button"
label-tag-up="Servizio attivo"
label-tag="Servizio attivo"
servizio-attivo=true
}}
</div>
Expand Down Expand Up @@ -165,11 +165,17 @@

<div class="col-12 mb-30">
<span class="text-paragraph-small">Argomenti:</span>
<div class="d-flex flex-wrap gap-2 mt-10 mb-30">
{{>partials/cmp-tag/cmp-tag label-tag="Educazione" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Famiglia" class="t-primary bg-tag"}}
{{>partials/cmp-tag/cmp-tag label-tag="Scuola" class="t-primary bg-tag"}}
</div>
<ul class="d-flex flex-wrap gap-2 mt-10 mb-3">
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Educazione" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Famiglia" data-element="service-topic"}}
</li>
<li>
{{>partials/cmp-tag/cmp-tag label-tag="Scuola" data-element="service-topic"}}
</li>
</ul>
<p class="text-paragraph-small mb-0">Pagina aggiornata il 14/04/2022</p>
</div>
</div>
Expand Down
Loading

1 comment on commit da95cbb

@vercel
Copy link

@vercel vercel bot commented on da95cbb Nov 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

design-comuni-pagine-statiche – ./

design-comuni-pagine-statiche.vercel.app
design-comuni-pagine-statiche-dip-trasformazione-digitale.vercel.app
design-comuni-pagine-sta-git-8a1dda-dip-trasformazione-digitale.vercel.app

Please sign in to comment.