feat: use styles for showing headers instead of heading. This is a ac…

…cessibility enhancement.
dnbexperience · Jan 30, 2019 · 8a7831c · 8a7831c
1 parent d3ca2fc
commit 8a7831c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js
@@ -97,7 +97,7 @@ const linkStyle = css`
   transition: background-color 0.5s ease;
 `
 
-const Header = styled.h3`
+const Header = styled.span`
   margin: 0;
 
   text-align: center;
@@ -175,11 +175,11 @@ export default class Card extends PureComponent {
             >
               <Box>
                 <Svg {...svgParams} />
-                <Header>{title}</Header>
+                <Header className="dnb-lead">{title}</Header>
                 <About>{about}</About>
               </Box>
 
-              <BottomWrapper>
+              <BottomWrapper aria-hidden>
                 <Button
                   variant="tertiary"
                   icon="chevron_right"

diff --git a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
@@ -22,6 +22,9 @@ h6 > small {
   line-height: 0; // for vertical alignment, we have to have no line-height
 }
 
+.dnb-h1,
+.dnb-h2,
+.dnb-lead,
 h1,
 h2,
 h3,
@@ -37,6 +40,7 @@ h6 {
   color: var(--color-emerald-green);
 }
 
+.dnb-h1,
 h1 {
   font-size: var(--font-size-xx-large); // 48px
   line-height: 3.5rem; // 56px
@@ -49,6 +53,7 @@ h1 > small {
   line-height: 3rem; // 48px
 }
 
+.dnb-h2,
 h2 {
   font-size: var(--font-size-medium); // 24px
   font-size: 2rem; // 24px