fix(radio): change touch target to fix blocked aria-hidden on an <input> element error

[cotone-dev]

Fixes #5699

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[asyncLiz]

Mentioned in the PR, we still need a touch target that isn't inert. I think we can remove the input entirely and replace it with a touch target. Can you update this PR for that?

Replace the <input> here with:

<div class="touch-target"></div>

Replace the <input> touch target styles here with:

    .touch-target {
      height: 48px;
      position: absolute;
      width: 48px;
    }

    :host([touch-target='none']) .touch-target {
      width: 100%;
      height: 100%;
    }

And keep aria-hidden="true" on the <div class="container">

[cotone-dev]

@asyncLiz

Thank you for your prompt feedback.

I will make adjustments based on the information you provided.

This is my first pull request, so please excuse my rudimentary question.

I looked at the package.json file to set up a development server, but there are no scripts such as dev or start set up, so I couldn't figure out how to start it.

It seems that npm run build will build the server, but will I have to load this script in a separate index.html?

We apologize for the inconvenience, but we would appreciate it if you could let us know.

[asyncLiz]

We don't have a great dev server setup for external contributors yet. The only option right now is to run the package's catalog server and navigate to /components/radio/stories/.

[cotone-dev]

@asyncLiz
Thank you very much for your kind attention.
I was able to successfully set up the development server.

We will contact you again as soon as the adjustments are completed.

[cotone-dev]

@asyncLiz

Please excuse me for repeating myself.

Is <md-radio> in radio/demo/stories.ts provided by unpkg?

I need to edit radio/internal/radio.ts this time, but I am having trouble getting the changes to take effect.

On the other hand, the elements in radio/demo/stories.ts reflect the changes (e.g. changing “Cats” to “Cat”).

Your wisdom would be greatly appreciated.
Thank you in advance.

[asyncLiz]

Is <md-radio> in radio/demo/stories.ts provided by unpkg?

It may be, that sounds familiar. I haven't tried running it locally for development :(

I'm not sure I have a good suggestion. I think @VandeurenGlenn mentioned they had a script in their fork of the repo for development.

[cotone-dev]

@asyncLiz

Thank you for your response.
I understand the content.

So for now, I will only send the changes you proposed and he will be responsible for confirming the operation status, is that correct?

[asyncLiz]

You can make the changes and I'll verify it

[cotone-dev]

@asyncLiz

Understood.

While I regret not being able to test it in my environment this time, I will send you the proposed changes.

I'm interested in Lit and Google Material Components, and would appreciate the opportunity to learn more about them in the future.

Please let me know when the development environment for external contributors is ready.

Thank you for your time.

[asyncLiz]

Thanks! I'll take a look at this and test it internally

[asyncLiz]

Things look good! The one thing I see to improve is we can display: none the touch target instead of making it fit the width/height, like we do with button's touch target. Mind making that change?

:host([touch-target='none']) .touch-target {
  display: none;
}

[cotone-dev]

Understood. I will make the changes and get back to you shortly.

[cotone-dev]

@asyncLiz

Thank you very much for the series of guidance and reviews.