[Form] Add tabIndex={-1} to implicit submit form

[dleroux]

WHY are these changes introduced?

While doing an a11y audit on our Form component I found that our Form component is failing because ARIA hidden element must not contain focusable elements.

Our Form contains an implicitSubmit prop which generates a visually hidden submit button with aria-hidden set to true.

WHAT is this pull request doing?

adds a tabIndex={-1} to our Form implied submit button.

How to 🎩

Using Fast pass on the Accessibility extension for web ensure there are no errors with the playground below.

Copy-paste this code in playground/Playground.tsx:

import React, {useState, useCallback} from 'react';
import {Page, Form, FormLayout, TextField, Button} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <FormExample />
    </Page>
  );
}

class FormExample extends React.Component {
  state = {
    url: '',
  };

  render() {
    const {url} = this.state;

    return (
      <Form noValidate onSubmit={this.handleSubmit}>
        <FormLayout>
          <TextField
            value={url}
            onChange={this.handleChange('url')}
            label="App URL"
            type="url"
          />

          <Button submit>Submit</Button>
        </FormLayout>
      </Form>
    );
  }

  handleSubmit = (event) => {
    this.setState({url: ''});
  };

  handleChange = (field) => {
    return (value) => this.setState({[field]: value});
  };
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[dleroux]

@dpersing once you confirm that this in fact the behavior we want I'll update the changelog.

[github-actions]

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

Files modified	2
Files potentially affected	3

Details

All files potentially affected (total: 3)

• /src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx
• /src/components/ResourceList/components/FilterControl/FilterControl.tsx
• /src/components/ResourceList/ResourceList.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Form/Form.tsx (total: 3)

Files potentially affected (total: 3)

• /src/components/ResourceList/components/FilterControl/components/FilterCreator/FilterCreator.tsx
• /src/components/ResourceList/components/FilterControl/FilterControl.tsx
• /src/components/ResourceList/ResourceList.tsx

---

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

[dpersing]

This is an okay temporary fix. I'm curious as to why we're using visually hidden styles on a component that users aren't meant to interact with, however.

Hiding with display: none or hidden would avoid having to apply aria-hidden="true" and tabindex="-1".

[dleroux]

I believe is so that the form does submit by simply clicking enter as oppose to actually clicking on the button. Display none wouldn't have the same effect because the button would not be in the DOM.

If this is a temporary fix, what would the right fix be?

[dpersing]

Display none wouldn't have the same effect because the button would not be in the DOM.

Oh boy, you're right, now that I've reread the whole thing. 🤦‍♀ Let'er rip. 🎉

[kaelig]

Would it help consumers to see an example in the style guide, or is this an edge case we want to discourage?

[dleroux]

Would it help consumers to see an example in the style guide, or is this an edge case we want to discourage?

I'm not sure it's worth it because it is the default behavior. I'm guessing a safeguard for when people add more than 1 field and no submit button is present, clicking enter would not trigger the on submit.