Implement browser compatibility linting

[larsrickert]

Open Questions/To-dos

Why?

Check if we can e.g. setup eslint (or a similar tool) to check/warn for Web API support / browser compatibility in our code.
So that we are notified when we try to use a Web API that is not supported by X percent of browsers.

Also look into the necessity of polyfills etc for supporting older browsers in the company

Acceptance criteria

• Pipeline should check browser support of the web APIs we use
• Define a list of relevant browser
• If there are issues that get out of scope, create tickets
• Update the Docs to reflect which browsers + versions are supported (ideally it is connected to a browserlists file)

Definition of Done

• follow-up tickets were created if necessary
  • Follow up: Browser compatibility CSS linting #1970
  • Implement Playwright testing for all browser that we support in browserlistrc #1997
• updated version + documentation is deployed

Approval

• Documentation link
• approved by ux @mj-hof
• approved by dev @JoCa96

Implementation details

• Info: ask A.S. from the department "Workplace Platform Design" about which relevant browsers & versions we have to support

[oemueller]

Proposed browserlist: https://browsersl.ist/#q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+dead

[oemueller]

with npx browserslist we can get a list of supported browsers -> based on that we can render a table of all supported browsers in the Docs, also possible with JS API
const browsers = browserslist(
["> 0.5%", "last 2 versions", "Firefox ESR", "not dead", "not op_mini all", "not KaiOS < 4.0"],
// {
// stats: opts.stats,
// path: opts.file,
// env: opts.env,
// },
);

[oemueller]

Desktop browser requirements: Edge, Safari (last 2 Versions), Firefox ESR (Source: Workplace Platform Design)

Mobile requirements: iOS Safari (last 2 Versions), Chrome for Android (last 2 Versions)

Approved by responsible people of the departments.