Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

a11y: change button to icon in FieldLabel.tsx #2551

Merged
merged 6 commits into from
Apr 8, 2020
Merged

a11y: change button to icon in FieldLabel.tsx #2551

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79e936f
Update FieldLabel.tsx
beyackle Apr 7, 2020
c1d00a2
Merge branch 'master' into beyackle/formTooltipIcon
beyackle Apr 7, 2020
513a4fd
Update FieldLabel.tsx
beyackle Apr 7, 2020
f667cdb
Merge branch 'master' into beyackle/formTooltipIcon
cwhitten Apr 7, 2020
3a0777e
Merge branch 'master' into beyackle/formTooltipIcon
a-b-r-o-w-n Apr 7, 2020
40b3369
Merge branch 'master' into beyackle/formTooltipIcon
cwhitten Apr 8, 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
48 changes: 29 additions & 19 deletions 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 @@ -2,7 +2,7 @@
// Licensed under the MIT License.
import React from 'react';
import { DirectionalHint, TooltipHost, TooltipDelay } from 'office-ui-fabric-react/lib/Tooltip';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { NeutralColors } from '@uifabric/fluent-theme';
Expand Down Expand Up @@ -32,7 +32,9 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = function Descripti
styles: { root: { width: '288px', padding: '17px 28px' } },
onRenderContent: () => (
<div>
<h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }}>{title}</h3>
<h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }} aria-label={title + '.'}>
{title}
</h3>
<p>{description}</p>
{helpLink && (
<Link href={helpLink} target="_blank" rel="noopener noreferrer">
Expand All @@ -43,22 +45,24 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = function Descripti
),
}}
>
<IconButton
aria-labelledby={`${id}-description`}
iconProps={{
iconName: 'Unknown',
}}
styles={{
root: { width: '20px', minWidth: '20px', height: '20px' },
rootHovered: { backgroundColor: 'transparent' },
rootChecked: { backgroundColor: 'transparent' },
icon: {
color: NeutralColors.gray160,
fontSize: '12px',
marginBottom: '-2px',
},
}}
/>
<div tabIndex={0}>
<Icon
aria-labelledby={`${id}-description`}
iconName={'Unknown'}
styles={{
root: {
width: '16px',
minWidth: '16px',
height: '16px',
color: NeutralColors.gray160,
fontSize: '12px',
marginBottom: '-2px',
paddingLeft: '4px',
paddingTop: '4px',
},
}}
/>
</div>
</TooltipHost>
);
};
Expand Down Expand Up @@ -90,7 +94,13 @@ const FieldLabel: React.FC<FieldLabelProps> = props => {
},
}}
>
{label}
<div
style={{
marginRight: '4px',
}}
>
{label}
</div>
<DescriptionCallout description={description} id={id} title={label} helpLink={helpLink} />
</Label>
);
Expand Down