Skip to content

Commit 4d17fe7

Browse files
Virtute90Virtute90
authored
fix(a11y): hero component
1 parent c0a92be commit 4d17fe7

File tree

10 files changed

+767
-599
lines changed

10 files changed

+767
-599
lines changed

‎.storybook/preview.tsx‎ renamed to ‎.storybook/preview.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Preview } from "@storybook/react";
22
import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
3-
import "../assets/css/bi-fonts.scss";
43
import "../assets/css/storybook-fixes.css";
4+
import "../assets/docs/scss/bi-fonts.scss";
5+
import "../assets/docs/scss/docs.scss";
6+
57
import theme from "./theme";
68

79
const preview: Preview = {

‎assets/css/accesibility.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.bd-callout-accessibility {
2+
border-left-color: #10925f !important;
3+
}
4+
5+
.bd-callout {
6+
padding: 1.25rem;
7+
margin-top: 1.25rem;
8+
margin-bottom: 1.25rem;
9+
border: 1px solid #eee;
10+
border-left-width: .25rem;
11+
border-radius: .25rem;
12+
}

‎assets/docs/scss/_callouts.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.bd-callout {
2+
padding: 1.25rem;
3+
margin-top: 1.25rem;
4+
margin-bottom: 1.25rem;
5+
border: 1px solid #eee;
6+
border-left-width: 0.25rem;
7+
border-radius: 0.25rem;
8+
9+
h4 {
10+
margin-top: 0;
11+
margin-bottom: 0.25rem;
12+
}
13+
h3 {
14+
margin-top: 0;
15+
margin-bottom: 0.25rem;
16+
}
17+
18+
p:last-child {
19+
margin-bottom: 0;
20+
}
21+
22+
code {
23+
border-radius: 0.25rem;
24+
}
25+
26+
& + .bd-callout {
27+
margin-top: -0.25rem;
28+
}
29+
}
30+
31+
// Variations
32+
@mixin bs-callout-variant($color) {
33+
border-left-color: darken($color, 10%);
34+
h4 {
35+
color: darken($color, 10%);
36+
}
37+
h3 {
38+
color: darken($color, 10%);
39+
}
40+
}
41+
42+
.bd-callout-info {
43+
@include bs-callout-variant($docs-info);
44+
}
45+
46+
.bd-callout-warning {
47+
@include bs-callout-variant($docs-warning);
48+
}
49+
50+
.bd-callout-danger {
51+
@include bs-callout-variant($docs-danger);
52+
}
53+
54+
.bd-callout-accessibility {
55+
h4 {
56+
color: $docs-accessibility;
57+
}
58+
border-left-color: lighten($docs-accessibility, 10%);
59+
h3 {
60+
color: $docs-accessibility;
61+
}
62+
border-left-color: lighten($docs-accessibility, 10%);
63+
}

‎assets/docs/scss/_colors.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
//
2+
// Docs color palette classes
3+
//
4+
5+
@each $color, $value in $colors {
6+
.swatch-#{$color} {
7+
color: color-contrast($value);
8+
background-color: #{$value};
9+
}
10+
}
11+
12+
@each $color, $value in $theme-colors {
13+
.swatch-#{$color} {
14+
color: color-contrast($value);
15+
background-color: #{$value};
16+
}
17+
}
18+
19+
@each $color, $value in $grays {
20+
.swatch-#{$color} {
21+
color: color-contrast($value);
22+
background-color: #{$value};
23+
}
24+
}
25+
26+
$primary-bright: lighten(saturate($primary, 5%), 15%) !default;
27+
$primary-light: lighten(saturate($primary, 5%), 45%) !default;
28+
$docs-info: rgb(23, 50, 77) !default;
29+
$docs-warning: rgb(255, 151, 0) !default;
30+
$docs-danger: rgb(248, 62, 90) !default;
31+
$docs-accessibility: rgb(11, 100, 65) !default;
32+
$docs-dark: #3e5266 !default;

‎assets/css/bi-fonts.scss‎ renamed to ‎assets/docs/scss/bi-fonts.scss‎

File renamed without changes.

‎assets/docs/scss/docs.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*!
2+
* Bootstrap Docs (https://getbootstrap.com)
3+
* Copyright 2011-2017 The Bootstrap Authors
4+
* Copyright 2011-2017 Twitter, Inc.
5+
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
6+
* details, see https://creativecommons.org/licenses/by/3.0/.
7+
*/
8+
// Dev notes
9+
//
10+
// Background information on nomenclature and architecture decisions here.
11+
//
12+
// - Bootstrap functions, variables, and mixins are included for easy reuse.
13+
// Doing so gives us access to the same core utilities provided by Bootstrap.
14+
// For example, consistent media queries through those mixins.
15+
//
16+
// - Bootstrap's **docs variables** are prefixed with `$docs-`.
17+
// These custom colors avoid collision with the components Bootstrap provides.
18+
//
19+
// - Classes are prefixed with `.bd-`.
20+
// These classes indicate custom-built or modified components for the design
21+
// and layout of the Bootstrap docs. They are not included in our builds.
22+
//
23+
// Happy Bootstrapping!
24+
@import '../../../node_modules/bootstrap/scss/functions';
25+
@import '../../../node_modules/bootstrap/scss/mixins';
26+
@import '../../../node_modules/bootstrap/scss/variables';
27+
// Load docs components
28+
@import 'colors';
29+
@import 'callouts';

‎src/Hero/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { FC, HTMLAttributes, ElementType } from 'react';
21
import classname from 'classnames';
2+
import React, { ElementType, FC, HTMLAttributes } from 'react';
33

44
export interface HeroProps extends HTMLAttributes<HTMLElement> {
55
/** Utilizzarlo in caso di utilizzo di componenti personalizzati */
@@ -16,7 +16,7 @@ export interface HeroProps extends HTMLAttributes<HTMLElement> {
1616
}
1717

1818
export const Hero: FC<HeroProps> = ({
19-
tag: Tag = 'div',
19+
tag: Tag = 'section',
2020
small,
2121
centered,
2222
overlay,

‎stories/Components/Hero.stories.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
} from '../../src';
2020

2121
const meta: Meta<typeof Hero> = {
22-
title: "Documentazione/Menu di navigazione/Hero",
22+
title: "Documentazione/Componenti/Hero",
2323
component: Hero,
2424
};
2525

@@ -29,7 +29,7 @@ type Story = StoryObj<typeof Hero>;
2929

3030
export const HeroConSfondo: Story = {
3131
render: () => (
32-
<Hero>
32+
<Hero aria-label='In evidenza'>
3333
<HeroBackground
3434
src='https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg'
3535
title='image title'
@@ -41,7 +41,7 @@ export const HeroConSfondo: Story = {
4141

4242
export const HeroConSfondoSmall: Story = {
4343
render: () => (
44-
<Hero small>
44+
<Hero aria-label='In evidenza' small>
4545
<HeroBackground
4646
src='https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg'
4747
title='image title'
@@ -74,7 +74,7 @@ export const HeroConTestoCentrato: Story = {
7474
<Hero centered>
7575
<HeroBody>
7676
<HeroCategory>Category</HeroCategory>
77-
<HeroTitle>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
77+
<HeroTitle tag={'h2'}>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
7878
<p className='d-none d-lg-block'>
7979
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
8080
donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
@@ -97,7 +97,7 @@ export const HeroConTestoSuSfondo: Story = {
9797
/>
9898
<HeroBody>
9999
<HeroCategory>Category</HeroCategory>
100-
<HeroTitle>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
100+
<HeroTitle tag={'h2'}>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
101101
<p className='d-none d-lg-block'>
102102
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
103103
donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
@@ -118,7 +118,7 @@ export const HeroConTestoSuSfondoOverlayPrimario: Story = {
118118
/>
119119
<HeroBody>
120120
<HeroCategory>Category</HeroCategory>
121-
<HeroTitle>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
121+
<HeroTitle tag={'h2'}>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</HeroTitle>
122122
<p className='d-none d-lg-block'>
123123
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
124124
donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
@@ -146,7 +146,7 @@ export const HeroConSfondoOverlayFiltro: Story = {
146146
export const HeroConSfondoMargineNegativo: Story = {
147147
render: () => (
148148
<>
149-
<Hero overlap>
149+
<Hero overlay='dark' overlap>
150150
<HeroBackground
151151
src='https://animals.sandiegozoo.org/sites/default/files/2016-08/animals_hero_mountains.jpg'
152152
title='image title'

‎stories/Documentation/Hero.mdx‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
2-
import { Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from '../../src';
2+
import { Code } from "@storybook/components";
3+
import { Callout, CalloutText, CalloutTitle, Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from '../../src';
34
import * as HeroStories from '../Components/Hero.stories';
45

56
<Meta of={HeroStories} />
67

78
# Hero
89

9-
## Lo Hero (ciò che Bootstrap definisce “Jumbotron”) è un componente per la presentazione di contenuti in evidenza.
10+
### Lo Hero (ciò che Bootstrap definisce “Jumbotron”) è un componente per la presentazione di contenuti in evidenza.
1011

11-
Il cosiddetto `Hero` è un componente leggero e flessibile che può facoltativamente estendere l’intera finestra per mostrare i messaggi in evidenza sul tuo sito. Di seguito una serie di esempi con la descrizione degli elementi e delle classi applicabili.
12+
La `hero` è un componente leggero e flessibile che può facoltativamente estendere l’intera finestra per mostrare i messaggi in evidenza sul tuo sito. Di seguito una serie di esempi con la descrizione degli elementi e delle classi applicabili.
1213

1314
Il componente `Hero` può contenere
1415

@@ -18,7 +19,16 @@ Il componente `Hero` può contenere
1819
- Call to action - `HeroButton`
1920
- Immagine di background - `HeroBackground`
2021

21-
### Con immagine
22+
## Con immagine
23+
24+
<div className="docs">
25+
<div className="bd-callout bd-callout-accessibility">
26+
<h3 id='accessibilità'>Accessibilità sola immagine</h3>
27+
<p>
28+
Nel caso di un componente hero con sola immagine utilizzare il componente con attributo <Code>aria-label="In evidenza"</Code>.
29+
</p>
30+
</div>
31+
</div>
2232

2333
<Canvas of={HeroStories.HeroConSfondo} />
2434

@@ -30,6 +40,15 @@ Per ottenere il componente `Hero` nella sua versione più piccola utilizzare l'a
3040

3141
## Con contenuti testuali
3242

43+
<div className="docs">
44+
<div className="bd-callout bd-callout-accessibility">
45+
<h3 id='accessibilità'>Accessibilità contenuti testuali</h3>
46+
<p>
47+
Nei casi in cui fossero presenti contenuti testuali utilizzare per il titolo il livello <Code>h</Code> corretto a seconda del contesto.
48+
</p>
49+
</div>
50+
</div>
51+
3352
Esempio di Hero con tutti i componenti testuali
3453

3554
<Canvas of={HeroStories.HeroConTesto} />
@@ -42,7 +61,16 @@ Per ottenere il componente `Hero` centrando i testi orizzontalmente aggiungere l
4261

4362
## Con testi ed immagine di sfondo
4463

45-
Per visualizzare i testi in overlay sulle immagini, viene creato un div scuro in opacità per migliorare la leggibilità del testo in caso di immagini dai toni chiari. Aggiungere al componente `Hero` l'attributo `overlay` con il colore desiderato (tra `dark`, `primary` o `filter`). Di seguito l'esempio con `overlay='dark'`:
64+
Per visualizzare i testi in overlay sulle immagini, viene creato un div scuro in opacità per migliorare la leggibilità del testo in caso di immagini dai toni chiari. Aggiungere al componente `Hero` l'attributo `overlay` con il colore desiderato (tra `dark`, `primary` o `filter`). Di seguito l'esempio con `overlay='dark'`
65+
66+
<div className="docs">
67+
<div className="bd-callout bd-callout-accessibility">
68+
<h3 id='accessibilità'>Accessibilità e contrasto</h3>
69+
<p>
70+
Verificare che l’immagine utilizzata assicuri sempre un adeguato contrasto rispetto al testo.
71+
</p>
72+
</div>
73+
</div>
4674

4775
<Canvas of={HeroStories.HeroConTestoSuSfondo} />
4876

@@ -60,7 +88,7 @@ Per aggiungere un filtro di tipo “screen” utilizzare `overlay="filter"`:
6088

6189
## Con immagine e margine negativo per contenuti sovrapposti
6290

63-
In alcuni casi, il contenuto che seguirà la card può sovrapporsi al componente `Hero`. Aggiungere l'attributo `overlap` per far si che il contenuto seguente si sovrapponga al componente `Hero` (in questo caso il componente seguente è una card):
91+
In alcuni casi, il contenuto che seguirà la card può sovrapporsi al componente `Hero`. Aggiungere gli attributi `overlap` e `overlay="dark"` per far si che il contenuto seguente si sovrapponga al componente `Hero` (in questo caso il componente seguente è una card):
6492

6593
<Canvas of={HeroStories.HeroConSfondoMargineNegativo} />
6694

0 commit comments

Comments
 (0)