Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

a11y: Added aria label to help links #2630

Merged
cwhitten merged 2 commits into from
Apr 13, 2020
Merged

a11y: Added aria label to help links #2630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11fbb5e
fix: Added aria label to help links
tdurnford Apr 13, 2020
6b1ebf4
Merge branch 'master' into fix/form-aria-labels
corinagum Apr 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/FormTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { jsx } from '@emotion/core';
import React from 'react';
import { FontWeights } from '@uifabric/styling';
import { FontSizes } from '@uifabric/fluent-theme';
import { Link } from 'office-ui-fabric-react/lib/Link';
import startCase from 'lodash/startCase';
import formatMessage from 'format-message';
import { UIOptions, JSONSchema7 } from '@bfc/extension';
Expand Down Expand Up @@ -45,6 +46,10 @@ const FormTitle: React.FC<FormTitleProps> = props => {
return designerName || uiLabel || schema.title || startCase(name);
};

const getHelpLinkLabel = (): string => {
return (uiLabel || schema.title || startCase(name) || '').toLowerCase();
};

const getSubTitle = (): string => {
return uiSubtitle || uiLabel || formData.$kind;
};
Expand Down Expand Up @@ -92,9 +97,14 @@ const FormTitle: React.FC<FormTitleProps> = props => {
<React.Fragment>
<br />
<br />
<a href={uiOptions?.helpLink} target="_blank" rel="noopener noreferrer">
<Link
href={uiOptions?.helpLink}
target="_blank"
rel="noopener noreferrer"
aria-label={formatMessage('Learn more about {title}', { title: getHelpLinkLabel() })}
>
{formatMessage('Learn more')}
</a>
</Link>
</React.Fragment>
)}
</p>
Expand Down
7 changes: 6 additions & 1 deletion Composer/packages/extensions/adaptive-form/src/components/FieldLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = function Descripti
</h3>
<p>{description}</p>
{helpLink && (
<Link href={helpLink} target="_blank" rel="noopener noreferrer">
<Link
href={helpLink}
target="_blank"
rel="noopener noreferrer"
aria-label={formatMessage('Learn more about {title}', { title: title.toLowerCase() })}
>
{formatMessage('Learn more')}
</Link>
)}
Expand Down