Skip to content

Commit

Permalink
Merge pull request #47 from ProjectMirador/copy-labels
Browse files Browse the repository at this point in the history
Accessibility updates to copy buttons and textarea description
  • Loading branch information
mferrarini authored Aug 8, 2023
2 parents d6f7a7b + d228e21 commit 556e3da
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 6 deletions.
7 changes: 4 additions & 3 deletions __tests__/MiradorShareEmbed.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,18 @@ function createWrapper(props) {
describe('MiradorShareEmbed', () => {
let wrapper;

it('renders fieldsets w/ legends for each section of the embed component', () => {
it('renders fieldsets w/ legends or labels for each section of the embed component', () => {
wrapper = createWrapper();

expect(wrapper.find('WithStyles(ForwardRef(FormControl))[component="fieldset"]').length).toBe(2);
expect(wrapper.find('WithStyles(ForwardRef(FormLabel))[component="legend"]').length).toBe(2);
expect(wrapper.find('WithStyles(ForwardRef(FormLabel))').length).toBe(2);
expect(wrapper.find('WithStyles(ForwardRef(FormLabel))[component="legend"]').length).toBe(1);
expect(wrapper.find(
'WithStyles(ForwardRef(FormLabel))',
).at(0).props().children).toEqual('Select viewer size');
expect(wrapper.find(
'WithStyles(ForwardRef(FormLabel))',
).at(1).props().children).toEqual('then copy & paste code');
).at(1).props().children).toEqual('Copy & paste code');
});

it('renders a radio group w/ a form control for each of the size options', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/MiradorShareDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export class MiradorShareDialog extends Component {
/>
{' '}
<CopyToClipboard text={shareLinkText}>
<Button className={classes.copyButton} variant="outlined" color="primary">Copy</Button>
<Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link">Copy</Button>
</CopyToClipboard>
</div>
<Divider />
Expand Down
10 changes: 8 additions & 2 deletions src/MiradorShareEmbed.js
Original file line number Diff line number Diff line change
Expand Up @@ -151,17 +151,18 @@ class MiradorShareEmbed extends Component {
</RadioGroup>
</FormControl>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend" className={classes.legend}>then copy &amp; paste code</FormLabel>
<FormLabel className={classes.label} for="copyCode">Copy &amp; paste code</FormLabel>
<div className={classes.inputContainer}>
<TextField
id="copyCode"
fullWidth
multiline
rows={4}
value={this.embedCode()}
variant="filled"
/>
<CopyToClipboard text={this.embedCode()}>
<Button className={classes.copyButton} variant="outlined" color="primary">Copy</Button>
<Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code">Copy</Button>
</CopyToClipboard>
</div>
</FormControl>
Expand All @@ -176,6 +177,7 @@ MiradorShareEmbed.propTypes = {
formControl: PropTypes.string,
formControlLabel: PropTypes.string,
legend: PropTypes.string,
label: PropTypes.string,
inputContainer: PropTypes.string,
radioGroup: PropTypes.string,
selectedFormControlLabel: PropTypes.string,
Expand Down Expand Up @@ -221,6 +223,10 @@ const styles = theme => ({
paddingBottom: theme.spacing(),
paddingTop: theme.spacing(),
},
label: {
paddingBottom: theme.spacing(),
paddingTop: theme.spacing(),
},
inputContainer: {
alignItems: 'flex-end',
display: 'flex',
Expand Down

0 comments on commit 556e3da

Please sign in to comment.