Skip to content

[TASK] Drop popper-js & replace with HTML popover, fix & upgrade stylelint#1237

Open
richardkrikler wants to merge 6 commits intoTYPO3-Documentation:mainfrom
richardkrikler:task/drop-popper
Open

[TASK] Drop popper-js & replace with HTML popover, fix & upgrade stylelint#1237
richardkrikler wants to merge 6 commits intoTYPO3-Documentation:mainfrom
richardkrikler:task/drop-popper

Conversation

@richardkrikler
Copy link
Copy Markdown
Contributor

@richardkrikler richardkrikler commented Apr 27, 2026

Also fixes all-documentations-menu desktop behavior.
Hide below viewport width, as then mobile menu is used.

Adjust phpunit.xml.dist: fixate UTC timezone for local dev usage.

Fix & update stylelint. (also solves #1203)

@richardkrikler richardkrikler marked this pull request as draft April 27, 2026 09:57
@richardkrikler richardkrikler marked this pull request as draft April 27, 2026 09:57
Also fixes all-documentations-menu desktop behavior.
Hide below viewport width, as then mobile menu is used.

Adjust phpunit.xml.dist: fixate UTC timezone for local dev usage.
* Fix grunt stylelint path
* Install missing @stylistic/stylelint-plugin package for stylelint v16
  & update `.stylelintrc`
* Add postcss-scss to allow parsing of `//` comments
* Upgrade to stylelint v17
* npm run build
@richardkrikler richardkrikler changed the title [TASK] Drop popper-js & replace with HTML popover [TASK] Drop popper-js & replace with HTML popover, fix & update stylelint Apr 27, 2026
@richardkrikler richardkrikler marked this pull request as ready for review April 27, 2026 11:51
@richardkrikler richardkrikler changed the title [TASK] Drop popper-js & replace with HTML popover, fix & update stylelint [TASK] Drop popper-js & replace with HTML popover, fix & upgrade stylelint Apr 27, 2026
Copy link
Copy Markdown
Contributor

@ineswillenbrock ineswillenbrock left a comment

Choose a reason for hiding this comment

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

Please add at least the role="tooltip" to All Documentation as mentioned.
And let's discuss the styling changes in the team as those enlage this PR.

Comment thread packages/typo3-docs-theme/assets/js/all-documentations-menu.js
Comment thread packages/typo3-docs-theme/assets/sass/components/_rst.scss
Comment thread packages/typo3-docs-theme/assets/sass/components/_search.scss
Comment thread packages/typo3-docs-theme/assets/sass/components/_textroles.scss
Comment thread packages/typo3-docs-theme/assets/sass/mixins/_focus.scss
Comment thread packages/typo3-docs-theme/assets/sass/_variables.scss
@@ -1,97 +1,101 @@
{
"customSyntax": "postcss-scss",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

why did you change this file?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Please look at the commit message of 63bc152
It was necessary to be compatible with v16 of stylelint.
In v16 stylistic rules were removed and reloacted into another npm package → https://github.com/stylelint-stylistic/stylelint-stylistic#about-and-purpose
https://stylelint.io/migration-guide/to-16/

@ineswillenbrock
Copy link
Copy Markdown
Contributor

Note to everyone: after merging and releasing this PR we need to check api.typo3.org: popper is linked there and should get removed as well as the version in the CDN paths adopted.
The next content change there after the release might break things.

@richardkrikler
Copy link
Copy Markdown
Contributor Author

@ineswillenbrock

Please add at least the role="tooltip" to All Documentation as mentioned. And let's discuss the styling changes in the team as those enlage this PR.

I understand the a11y problem & pushed a commit readding the deleted line.
Not sure if role tooltip is actually the right choice here, as it is more a menu than a tooltip 🤔.

I cannot fully understand the other comments about SCSS code styling changes, as these were not done by me manually.
The existing Gruntfile.js got the wrong path for stylelint & so the config was not applied for a while.
The rules in the .stylelintrc were there before and are unchanged (I only migrated them to be compatible with stylelint v16 & v17 - introduction of @stylistic/stylelint-plugin was necessary here).

Copy link
Copy Markdown
Contributor

@ineswillenbrock ineswillenbrock left a comment

Choose a reason for hiding this comment

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

@richardkrikler regarding a11y: that's what I got reading this article: https://www.smashingmagazine.com/2026/03/getting-started-popover-api/
You mightbe right, if one refers to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role
Might be actually rather role=menu if I read through the roles: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menu_role

Right now I'd like to keep the tooltip and open another issue to possible fix this object

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants