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

Jump to bottom

fix(radio-button): focuses first focusable radio-button element in group. #7152

Merged
merged 11 commits into from
Jun 21, 2023
Merged

fix(radio-button): focuses first focusable radio-button element in group. #7152

merged 11 commits into from
Jun 21, 2023

Conversation

anveshmekala
Copy link
Contributor

@anveshmekala anveshmekala commented Jun 7, 2023 •
edited
Loading

Related Issue: #7113

Summary

This PR will focus the first focusable calcite-radio-button when the user Tab in to the group.

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 7, 2023
@anveshmekala anveshmekala changed the title fix(radio-button): focuses first focusable radio-button element in group. fix(radio-button): focuses first focusable radio-button element in group. Jun 7, 2023
@anveshmekala anveshmekala added skip visual snapshots Pull requests that do not need visual regression testing. pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed skip visual snapshots Pull requests that do not need visual regression testing. labels Jun 8, 2023
@anveshmekala anveshmekala requested a review from jcfranco June 14, 2023 21:45
@anveshmekala anveshmekala marked this pull request as ready for review June 14, 2023 21:45
@anveshmekala anveshmekala requested a review from a team as a code owner June 14, 2023 21:45
eriklharper
eriklharper requested changes Jun 14, 2023
View reviewed changes
Copy link
Contributor

@eriklharper eriklharper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you try updating other radio-buttons in a group in connectedCallback instead? If you can get that to work, let's also add a test for this that ensures the focus behavior is correct when adding or removing buttons.

@anveshmekala anveshmekala marked this pull request as draft June 16, 2023 17:10
eriklharper
eriklharper approved these changes Jun 16, 2023
View reviewed changes
Copy link
Contributor

@eriklharper eriklharper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks grand! Thanks for moving that logic into the connected callbacks :)

@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jun 20, 2023
@anveshmekala anveshmekala marked this pull request as ready for review June 20, 2023 16:52
eriklharper
eriklharper approved these changes Jun 20, 2023
View reviewed changes
Copy link
Contributor

@eriklharper eriklharper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks excellent, thanks for adding those extra tests! Just remove those console logs and we should be good to go :)

packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated Show resolved Hide resolved
@anveshmekala anveshmekala removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 20, 2023
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 20, 2023
jcfranco
jcfranco approved these changes Jun 20, 2023
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪
⚪🔘⚪⚪⚪🔘⚪🔘🔘🔘⚪⚪🔘🔘🔘⚪🔘🔘🔘🔘⚪🔘⚪
⚪🔘🔘⚪⚪🔘⚪⚪🔘⚪⚪🔘⚪⚪⚪⚪🔘⚪⚪⚪⚪🔘⚪
⚪🔘⚪🔘⚪🔘⚪⚪🔘⚪⚪🔘⚪⚪⚪⚪🔘🔘🔘⚪⚪🔘⚪
⚪🔘⚪⚪🔘🔘⚪⚪🔘⚪⚪🔘⚪⚪⚪⚪🔘⚪⚪⚪⚪⚪⚪
⚪🔘⚪⚪⚪🔘⚪🔘🔘🔘⚪⚪🔘🔘🔘⚪🔘🔘🔘🔘⚪🔘⚪
⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪

packages/calcite-components/src/components/radio-button/radio-button.tsx
@@ -94,6 +100,11 @@ export class RadioButton
/** When `true`, the component is not displayed and is not focusable or checkable. */
@Prop({ reflect: true }) hidden = false;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sidebar: we should revisit custom hidden props since it's a reflected prop on HTMLElement.

packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated
const radioButtons = this.queryButtons();
return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
const firstFocusable = radioButtons.find((radiobutton) => !radiobutton.disabled);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

radiobutton ➡️ radioButton

packages/calcite-components/src/components/radio-button/radio-button.tsx Outdated
private getTabIndex(): number | undefined {
if (this.disabled) {
return undefined;
}
return this.checked || this.isDefaultSelectable() ? 0 : -1;
if (this.checked || this.isFocusable()) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No love for the previous ternary? 😭

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, there was some extra code in if block earlier. Will revert to ternary.

@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jun 21, 2023
@anveshmekala anveshmekala merged commit dd7ec60 into master Jun 21, 2023
@anveshmekala anveshmekala deleted the anveshmekala/7113-fix-radio-button-first-focusable branch June 21, 2023 15:45
@github-actions github-actions bot added this to the 2023 June patch priorities milestone Jun 21, 2023
@calcite-admin calcite-admin mentioned this pull request Jun 21, 2023
Merged
benelan added a commit that referenced this pull request Jun 27, 2023
@calcite-admin @github-actions @benelan
chore: release latest (#7144)
2422120 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-components: 1.4.3</summary>

##
[1.4.3](https://github.com/Esri/calcite-components/compare/@esri/[email protected]...@esri/[email protected])
(2023-06-26)

### Bug Fixes

* **accordion-item:** support items working across shadowDOM ([#7035](#7035)) ([6378e35](6378e35)), closes [#6167](#6167)
* **alert:** Sets autoCloseDuration to "medium" by default
([#7157](#7157))
([1b9a8ed](1b9a8ed))
* **alert:** Update alert queue when an alert is removed from the DOM
([#7189](#7189))
([edd59eb](edd59eb))
* **combobox, dropdown, input-date-picker, input-time-picker, popover,
tooltip:** Prevent repositioning from affecting other floating
components
([#7178](#7178))
([1b02dae](1b02dae))
* Ensure mouse events are blocked for disabled components in Firefox
([#7107](#7107))
([271d985](271d985))
* **input-date-picker:** Fix showing the placeholder when resetting the
value ([#7156](#7156))
([8d60ffd](8d60ffd))
* **input, input-number:** Allows numeric characters.
([#7213](#7213))
([739f0af](739f0af))
* **input,input-number:** Allow typing decimal separator in firefox for
arabic locale
([#7173](#7173))
([595e6f2](595e6f2))
* **list:** No longer has incorrect border width
([a810943](a810943))
* **list:** Update selectedItems property on all item selection changes
([#7204](#7204))
([da048f6](da048f6))
* **menu-item:** Ensure correct order of rendered icons ([#7098](#7098)) ([fd344e9](fd344e9)), closes [#7097](#7097)

* **navigation:** Label is no longer a required property
([#7084](#7084))
([ba2bd4d](ba2bd4d))
* **radio-button-group:** No longer focus first radio button on label
click and adds `setFocus` method.
([#7050](#7050))
([4267b8c](4267b8c))
* **radio-button, radio-button-group:** Prevent emitting events when
selecting a checked radio button
([#7102](#7102))
([77fcc81](77fcc81))
* **radio-button:** Focuses first focusable radio-button element in
group. ([#7152](#7152))
([dd7ec60](dd7ec60))
* **scrim:** Responsively set the scale of the loading spinner
([#7182](#7182))
([72c5943](72c5943))
* **tooltip:** Improve component timing
([#7172](#7172))
([106f5d2](106f5d2))
* **tree-item:** Ensure expanded tree-item is displayed when expanded
and made visible
([#7216](#7216))
([3c0fbf5](3c0fbf5))

<details><summary>@esri/calcite-components-react: 1.4.3</summary>

##
[1.4.3](https://github.com/Esri/calcite-components/compare/@esri/[email protected]...@esri/[email protected])
(2023-06-26)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.4.3-next.7 to 1.4.3
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <[email protected]>
benelan added a commit that referenced this pull request Jun 27, 2023
@benelan
Merge remote-tracking branch 'origin/master' into geospatialem/chore-…
f0c9d87 
…issue-template-checkbox

* origin/master: (32 commits)
  ci: double build cc when publishing to workaround stencil types bug (#7227)
  build: bump package versions back to 1.5.0-next.5 (#7228)
  chore: release latest (#7144)
  ci: hardcode release version due to reverting feat (#7225)
  fix(tree-item): ensure expanded tree-item is displayed when expanded and made visible (#7216)
  ci(release-please): pin action version and allow manually running action (#7222)
  fix(input, input-number): allows numeric characters. (#7213)
  build(t9n): generate json file containing t9n values (#7214)
  chore: release next
  fix(combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip): Prevent repositioning from affecting other floating components (#7178)
  build: update browserslist db (#7192)
  build: ignore node_modules and build outputs when watching for changes during stencil tests (#7209)
  test: set up `disabled` helper to run a test per use case (#7089)
  ci: set design complete label conditionals (#7206)
  chore: release next
  fix(list): update selectedItems property on all item selection changes (#7204)
  chore: fix sorting logic for t9nmanifest entries (#7203)
  fix(radio-button):  focuses first focusable radio-button element in group. (#7152)
  chore: release next
  fix(alert): update alert queue when an alert is removed from the DOM (#7189)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eriklharper eriklharper eriklharper approved these changes

@jcfranco jcfranco jcfranco approved these changes

Assignees

@anveshmekala anveshmekala

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 June patch priorities
Development

Successfully merging this pull request may close these issues.
3 participants
@anveshmekala @jcfranco @eriklharper