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.

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

fix(table): Prevent duplicate scrollbars in certain browsers #8962

Merged
merged 4 commits into from Mar 19, 2024

Conversation

macandcheese
Copy link
Contributor

Related Issue: #8947

Summary

Fixes an issue in Chrome and Safari where double scrollbars would appear. As mentioned in the issue, it does seem to have to do with the conditional rendering of the assistive technology text. Firefox was unaffected. Honestly kind of a strange bug, I don't think (?) this has come up before with the AT hidden class we use.

cc @geospatialem to verify this still works as expected in JAWS / NVDA - the issue was introduced with the recent addition of the new interactionMode property, so let's verify this doesn't have a negative effect on AT.

@macandcheese macandcheese requested a review from a team as a code owner March 19, 2024 02:02
@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 19, 2024
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Mar 19, 2024
Copy link
Member

@geospatialem geospatialem left a comment

Choose a reason for hiding this comment

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

Testing-wise looks good in Chrome on Windows and AT is still working as-intended with JAWS and NVDA. 👍🏻

Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

🎉

@macandcheese macandcheese merged commit 8434eeb into main Mar 19, 2024
10 checks passed
@macandcheese macandcheese deleted the macandcheese/8947-fix-table-double-scrollbar branch March 19, 2024 22:58
@github-actions github-actions bot added this to the 2024-03-26 - Mar Release milestone Mar 19, 2024
</span>
{(this.selectionCell || this.readCellContentsToAT) && (
<span
aria-hidden={true}
Copy link
Member

Choose a reason for hiding this comment

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

Not sure if this is related to the issue, but this, and similar lines, should be using toAriaBoolean (see example). In its current form, it's setting a boolean on the attribute instead of "true" or "false".

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry @jcfranco , for some reason this comment just showed up / sent an email notification. Can you open an issue to update and I can fix as this is already merged.

Copy link
Member

Choose a reason for hiding this comment

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

☝️ #8976

geospatialem pushed a commit that referenced this pull request Mar 27, 2024
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.1.2</summary>

##
[2.1.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.1.1...@esri/calcite-design-tokens@2.1.2)
(2024-03-26)


### Bug Fixes

* Fix invalid font stacks
([#8964](#8964))
([d55186a](d55186a))
</details>

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

##
[2.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.6.0...@esri/calcite-components@2.7.0)
(2024-03-26)


### Features

* **button:** Add download property
([#8882](#8882))
([fc55dde](fc55dde))
* **color-picker:** Add `clearable` prop and deprecate `allowEmpty`
([#8910](#8910))
([f036ac2](f036ac2))
* **table-row:** Add alignment property
([#8961](#8961))
([1f81fd7](1f81fd7))
* **tabs:** Make component responsive
([#8616](#8616))
([83a2ef4](83a2ef4))
* **tile:** Add content-top and content-bottom slots, deprecate
content-start and content-end slots
([#8984](#8984))
([eb000d8](eb000d8))


### Bug Fixes

* **action-menu, combobox, dropdown, popover, tooltip:** Use click
instead of pointerdown for click contexts
([#8943](#8943))
([cd7eed9](cd7eed9))
* **card:** Do not apply text color to slotted footer items
([#8839](#8839))
([30a2068](30a2068))
* **combobox:** Prevent spacebar from opening the menu when focused on
chip's close button
([#8990](#8990))
([1a20d0e](1a20d0e))
* **dropdown:** Correct positioning behavior when inside a scrollable
container
([#8973](#8973))
([2524391](2524391))
* **input-time-picker:** Update toggle icon color
([#8955](#8955))
([ce3ac5c](ce3ac5c))
* **input, input-number, input-text:** Ensure values are initialized
properly for dist and components output targets
([#8997](#8997))
([9152211](9152211))
* **list, list-item:** Calcite-select becomes unresponsive in a
list-item if drag-disabled is true
([#8957](#8957))
([e408c62](e408c62))
* **list:** Fix filter box when scrolling in Safari
([#8938](#8938))
([ea8ea1e](ea8ea1e))
* **popover:** Prevent disabled reference elements from toggling popover
([#8983](#8983))
([9f4b14b](9f4b14b))
* **stepper:** Fix layout when switching modes dynamically to
`horizontal-single`
([#8946](#8946))
([01f58bf](01f58bf))
* **table:** Prevent duplicate scrollbars in certain browsers
([#8962](#8962))
([8434eeb](8434eeb))
* **tab:** Style focus outline of tab content
([#8804](#8804))
([8f0133f](8f0133f))


### Performance Improvements

* Update `transition-default` Tailwind util to only target common,
animatable properties
([#8797](#8797))
([f4d016b](f4d016b))


### Reverts

* Refactor(popover): update token pattern
([#8889](#8889))
([c43c280](c43c280))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^2.1.2-next.2 to ^2.1.2
</details>

<details><summary>@esri/calcite-components-angular: 2.7.0</summary>

##
[2.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.6.0...@esri/calcite-components-angular@2.7.0)
(2024-03-26)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize components versions


### Dependencies

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

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

##
[2.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.6.0...@esri/calcite-components-react@2.7.0)
(2024-03-26)


### Miscellaneous Chores

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


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.7.0-next.17 to ^2.7.0
</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Development

Successfully merging this pull request may close these issues.

None yet

4 participants