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

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

Merged
cwhitten 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