Skip to content

Commit

Permalink
fix: [Integrations > Add integration prompt][SCREEN READER]: Images a…
Browse files Browse the repository at this point in the history
…re decorative and should be removed from the accessibility tree (elastic#179805)

Closes: elastic/security-team#8989

## Description

The Add integration prompt has a number of images that are decorative,
but have alt text added. This could be confusing to screen reader users
because the images do not provide additional context or information.
Let's update them to have `alt=""` attributes so the images are removed
from the accessibility tree. Screenshot attached below.

### Steps to recreate

1. Create a new Security Serverless project if none exist
2. When the project is ready, open it and go to Integrations, under the
Project Settings in the lower left navigation
3. Search for DynamoDB in the Integrations, and click on the card
4. From the DynamoDB detail view, click "Add Amazon DynamoDB"
5. When the "Ready to add your first integration?" view loads, open Dev
Tools and verify the images highlighted have alt text.

### What was done? 
1. _role="presentation"_ was set to image container
2. removed extra `alt`'s attributes
  • Loading branch information
alexwizp authored Apr 2, 2024
1 parent 6d55cc8 commit 9e6376c
Showing 1 changed file with 6 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const CenteredEuiStepNumber = styled(EuiStepNumber)`
// step numbers are not centered in smaller layouts without this
const CenteredEuiImage = (props: EuiImageProps) => (
<div style={{ margin: '0 auto' }}>
<EuiImage {...props} />
<EuiImage role="presentation" {...props} />
</div>
);

Expand Down Expand Up @@ -93,10 +93,7 @@ const AddIntegrationStepsIllustrations = () => {
</EuiFlexItem>
<EuiFlexItem>
<div style={{ margin: '0 auto' }}>
<CenteredEuiImage
alt="Illustration of installing the Elastic Agent"
src={assetsBasePath + '1_install_agent.svg'}
/>
<CenteredEuiImage alt="" src={assetsBasePath + '1_install_agent.svg'} />
</div>
</EuiFlexItem>
<EuiFlexItem>
Expand Down Expand Up @@ -124,10 +121,7 @@ const AddIntegrationStepsIllustrations = () => {
</EuiShowFor>
<EuiHideFor sizes={['s', 'xs']}>
<EuiFlexItem grow={false}>
<CenteredEuiImage
alt="Illustration of an arrow pointing from left to right"
src={assetsBasePath + 'arrow_right_curve_over.svg'}
/>
<CenteredEuiImage alt="" src={assetsBasePath + 'arrow_right_curve_over.svg'} />
</EuiFlexItem>
</EuiHideFor>
<EuiFlexItem grow={false}>
Expand All @@ -136,10 +130,7 @@ const AddIntegrationStepsIllustrations = () => {
<CenteredEuiStepNumber status="incomplete" number={2} />
</EuiFlexItem>
<EuiFlexItem>
<CenteredEuiImage
alt="Illustration of adding an integration"
src={assetsBasePath + '2_add_integration.svg'}
/>
<CenteredEuiImage alt="" src={assetsBasePath + '2_add_integration.svg'} />
</EuiFlexItem>
<EuiFlexItem>
<EuiText textAlign="center">
Expand All @@ -166,10 +157,7 @@ const AddIntegrationStepsIllustrations = () => {
</EuiShowFor>
<EuiHideFor sizes={['s', 'xs']}>
<EuiFlexItem grow={false}>
<CenteredEuiImage
alt="Illustration of an arrow pointing from left to right"
src={assetsBasePath + 'arrow_right_curve_under.svg'}
/>
<CenteredEuiImage alt="" src={assetsBasePath + 'arrow_right_curve_under.svg'} />
</EuiFlexItem>
</EuiHideFor>
<EuiFlexItem grow={false}>
Expand All @@ -178,10 +166,7 @@ const AddIntegrationStepsIllustrations = () => {
<CenteredEuiStepNumber status="incomplete" number={3} />
</EuiFlexItem>
<EuiFlexItem>
<CenteredEuiImage
alt="Illustration of a dashboard with data"
src={assetsBasePath + '3_confirm_data.svg'}
/>
<CenteredEuiImage alt="" src={assetsBasePath + '3_confirm_data.svg'} />
</EuiFlexItem>
<EuiFlexItem>
<EuiText textAlign="center">
Expand Down

0 comments on commit 9e6376c

Please sign in to comment.