From 4d96087bbe7ebd28e02fece8564616fc053b089d Mon Sep 17 00:00:00 2001 From: IgnacioBecerra Date: Wed, 3 Feb 2021 18:03:12 -0800 Subject: [PATCH 1/6] fix(cta-card): add proper aria-label for video type --- packages/react/src/components/CTA/CTA.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/CTA/CTA.js b/packages/react/src/components/CTA/CTA.js index d61fa7f832e..21525f6dbff 100644 --- a/packages/react/src/components/CTA/CTA.js +++ b/packages/react/src/components/CTA/CTA.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -17,7 +17,7 @@ import { useVideoData } from '../../internal/hooks/useVideoData'; /** * CTA component. */ -const CTA = ({ style, type, customClassName, ...otherProps }) => { +const CTA = ({ style, type, customClassName, videoLabel, ...otherProps }) => { const [renderLightBox, openLightBox] = useState(false); const videoId = @@ -41,10 +41,11 @@ const CTA = ({ style, type, customClassName, ...otherProps }) => { renderLightBox, openLightBox, videoTitle, + videoLabel, ...otherProps, }; - const ariaLabel = otherProps?.copy ?? videoTitle[0].title; + const ariaLabel = type.includes('video') ? videoLabel : otherProps?.copy; const ariaProps = style === 'card' && { 'aria-label': ariaLabel, role: 'region', @@ -125,6 +126,12 @@ CTA.propTypes = { * Custom classname from parent. */ customClassName: PropTypes.string, + + /** + * Aria label to convey video playback upon interaction. + * Default label is in English, can be overridden by passing in a translated label. + */ + videoLabel: PropTypes.string, }; CTA.defaultProps = { @@ -132,6 +139,7 @@ CTA.defaultProps = { type: 'default', copy: '', href: '', + videoLabel: 'Plays video', }; export default CTA; From 09188d725486c40586fb399d0b34d7f6a1fbfb5d Mon Sep 17 00:00:00 2001 From: IgnacioBecerra Date: Thu, 4 Feb 2021 11:37:02 -0800 Subject: [PATCH 2/6] chore(cta-card): update snapshots --- .../__snapshots__/storyshots.test.js.snap | 1174 ++++++++++++++++- 1 file changed, 1158 insertions(+), 16 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 71ea5c27ae6..00798f6befe 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -434,6 +434,7 @@ exports[`Storyshots Components|CTA Button 1`] = ` "local", ] } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
@@ -17758,6 +18061,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -17797,6 +18101,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", }, "pictogram": undefined, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -17833,6 +18138,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", } } + videoLabel="Plays video" >
@@ -18000,6 +18309,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18039,6 +18349,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", }, "pictogram": undefined, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -18075,6 +18386,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", } } + videoLabel="Plays video" >
@@ -18242,6 +18557,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18281,6 +18597,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", }, "pictogram": undefined, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -18317,6 +18634,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", } } + videoLabel="Plays video" >
@@ -18484,6 +18805,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18523,6 +18845,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", }, "pictogram": undefined, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -18559,6 +18882,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", } } + videoLabel="Plays video" >
@@ -18726,6 +19053,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18765,6 +19093,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", }, "pictogram": undefined, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -18801,6 +19130,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` "type": "video", } } + videoLabel="Plays video" >
@@ -40878,6 +41413,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -40910,6 +41446,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -40939,6 +41476,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -47812,6 +48405,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -47844,6 +48438,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = ` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -47873,6 +48468,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = ` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -53727,6 +54378,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -53759,6 +54411,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = ` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -53788,6 +54441,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = ` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -64814,6 +65523,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -64846,6 +65556,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -64875,6 +65586,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -70991,6 +71758,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -71023,6 +71791,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -71052,6 +71821,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -76930,6 +77755,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -76962,6 +77788,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = ` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -76991,6 +77818,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = ` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -82602,6 +83485,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -82634,6 +83518,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = ` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -82663,6 +83548,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = ` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -88786,6 +89727,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -88818,6 +89760,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -88847,6 +89790,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
@@ -95786,6 +96785,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = ` renderLightBox={false} style="card" type="video" + videoLabel="Plays video" videoTitle={ Array [ Object { @@ -95818,6 +96818,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = ` "src": "1_9h94wo6b", "type": "video", }, + "videoLabel": "Plays video", } } customClassName="bx--card__video" @@ -95847,6 +96848,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = ` "type": "video", } } + videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
Date: Mon, 8 Feb 2021 07:26:53 -0800 Subject: [PATCH 3/6] fix(cta): added default aria labels --- packages/react/src/components/CTA/CTA.js | 17 ++++++++------- packages/react/src/components/CTA/CTALogic.js | 21 ++++++++++++++++++- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/react/src/components/CTA/CTA.js b/packages/react/src/components/CTA/CTA.js index 21525f6dbff..f3b58eeefe8 100644 --- a/packages/react/src/components/CTA/CTA.js +++ b/packages/react/src/components/CTA/CTA.js @@ -17,7 +17,7 @@ import { useVideoData } from '../../internal/hooks/useVideoData'; /** * CTA component. */ -const CTA = ({ style, type, customClassName, videoLabel, ...otherProps }) => { +const CTA = ({ style, type, customClassName, ariaLabel, ...otherProps }) => { const [renderLightBox, openLightBox] = useState(false); const videoId = @@ -41,13 +41,15 @@ const CTA = ({ style, type, customClassName, videoLabel, ...otherProps }) => { renderLightBox, openLightBox, videoTitle, - videoLabel, + ariaLabel, ...otherProps, }; - const ariaLabel = type.includes('video') ? videoLabel : otherProps?.copy; - const ariaProps = style === 'card' && { - 'aria-label': ariaLabel, + const label = `${otherProps?.copy}${ + ariaLabel ? ariaLabel : CTALogic.getDefaultLabel(type) + }`; + const ariaProps = style === ('card' || 'text') && { + 'aria-label': label, role: 'region', }; @@ -129,9 +131,9 @@ CTA.propTypes = { /** * Aria label to convey video playback upon interaction. - * Default label is in English, can be overridden by passing in a translated label. + * Default label is in English, can be overridden by passing in a custom translated label. */ - videoLabel: PropTypes.string, + ariaLabel: PropTypes.string, }; CTA.defaultProps = { @@ -139,7 +141,6 @@ CTA.defaultProps = { type: 'default', copy: '', href: '', - videoLabel: 'Plays video', }; export default CTA; diff --git a/packages/react/src/components/CTA/CTALogic.js b/packages/react/src/components/CTA/CTALogic.js index b6d9cbf7e10..793ab596bbc 100644 --- a/packages/react/src/components/CTA/CTALogic.js +++ b/packages/react/src/components/CTA/CTALogic.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -47,6 +47,25 @@ class CTALogic { } } + /** + * Gets the default aria label if translated label isn't provided. + * + * @param {string} type cta type { download | external | video } + * @returns {string} default type aria label + */ + static getDefaultLabel(type) { + switch (type) { + case 'download': + return ' - This link downloads a file'; + case 'external': + return ' - This link opens in a new tab'; + case 'video': + return ' - This link plays a video'; + default: + return ''; + } + } + /** * jump to target element onClick * From d3508652a0dc4d11fdd378b20147f53fbd1a343c Mon Sep 17 00:00:00 2001 From: IgnacioBecerra Date: Mon, 8 Feb 2021 14:28:13 -0800 Subject: [PATCH 4/6] chore(cta): updated snapshots --- .../__snapshots__/storyshots.test.js.snap | 1322 ++--------------- 1 file changed, 156 insertions(+), 1166 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 00798f6befe..a4ee9367742 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -434,7 +434,6 @@ exports[`Storyshots Components|CTA Button 1`] = ` "local", ] } - videoLabel="Plays video" >
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
Image alt text
@@ -18061,7 +17806,6 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18075,6 +17819,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = `
@@ -18309,7 +18049,6 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18323,6 +18062,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = `
@@ -18557,7 +18292,6 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18571,6 +18305,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = `
@@ -18805,7 +18535,6 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -18819,6 +18548,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = `
@@ -19053,7 +18778,6 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -19067,6 +18791,7 @@ exports[`Storyshots Components|ContentBlockCards With Videos 1`] = `
@@ -41413,7 +40956,6 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -41427,6 +40969,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
Image alt text
Image alt text
Image alt text
@@ -48405,7 +47895,6 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -48419,6 +47908,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
Image alt text
Image alt text
Image alt text
@@ -54378,7 +53815,6 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -54392,6 +53828,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
Image alt text
Image alt text
Image alt text
@@ -65523,7 +64907,6 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -65537,6 +64920,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
Image alt text
Image alt text
Image alt text
@@ -71758,7 +71089,6 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -71772,6 +71102,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
Image alt text
Image alt text
Image alt text
@@ -77755,7 +77033,6 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -77769,6 +77046,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
Image alt text
Image alt text
Image alt text
@@ -83485,7 +82710,6 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -83499,6 +82723,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
Image alt text
Image alt text
Image alt text
@@ -89727,7 +88899,6 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -89741,6 +88912,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
Image alt text
Image alt text
Image alt text
@@ -96785,7 +95904,6 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = ` renderLightBox={false} style="card" type="video" - videoLabel="Plays video" videoTitle={ Array [ Object { @@ -96799,6 +95917,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
Image alt text
Image alt text
Image alt text
Date: Thu, 11 Feb 2021 13:30:52 -0800 Subject: [PATCH 5/6] fix(cta): added custom role prop --- packages/react/src/components/CTA/CTA.js | 16 ++++++++++++++-- .../react/src/components/LinkList/LinkList.js | 1 + 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/CTA/CTA.js b/packages/react/src/components/CTA/CTA.js index f3b58eeefe8..c2474275119 100644 --- a/packages/react/src/components/CTA/CTA.js +++ b/packages/react/src/components/CTA/CTA.js @@ -17,7 +17,14 @@ import { useVideoData } from '../../internal/hooks/useVideoData'; /** * CTA component. */ -const CTA = ({ style, type, customClassName, ariaLabel, ...otherProps }) => { +const CTA = ({ + style, + type, + customClassName, + ariaLabel, + ariaRole, + ...otherProps +}) => { const [renderLightBox, openLightBox] = useState(false); const videoId = @@ -50,7 +57,7 @@ const CTA = ({ style, type, customClassName, ariaLabel, ...otherProps }) => { }`; const ariaProps = style === ('card' || 'text') && { 'aria-label': label, - role: 'region', + role: `${ariaRole ? ariaRole : 'region'}`, }; return ( @@ -134,6 +141,11 @@ CTA.propTypes = { * Default label is in English, can be overridden by passing in a custom translated label. */ ariaLabel: PropTypes.string, + + /** + * Aria role prop to set a custom role depending on the use within other components. + */ + ariaRole: PropTypes.string, }; CTA.defaultProps = { diff --git a/packages/react/src/components/LinkList/LinkList.js b/packages/react/src/components/LinkList/LinkList.js index 5f916708651..a2ca5bb5a98 100644 --- a/packages/react/src/components/LinkList/LinkList.js +++ b/packages/react/src/components/LinkList/LinkList.js @@ -39,6 +39,7 @@ const LinkList = ({ heading, iconPlacement, items, style }) => { key={index}> Date: Thu, 11 Feb 2021 14:23:08 -0800 Subject: [PATCH 6/6] chore(card): updated snapshots --- .../__snapshots__/storyshots.test.js.snap | 138 ++++++++++++++++-- 1 file changed, 122 insertions(+), 16 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index e08649bb007..509c8f43efe 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -22739,6 +22739,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ key="0" >