bitwarden-estensione-browser/src/popup/generator
Patrick H. Lauke 7b12868c70
[PS-497] Change `<content>` to `<main>`, make it explicitly non-focusable (#2245)
* Make <content> element explicitly non-focusable

Some browsers (Firefox, upcoming versions of Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=585413) make containers with `overflow: auto` / `overflow: scroll` (and the `-x` / `-y` variants) keyboard-focusable. This leads to a very awkward experience for assistive technology users navigating through the extension window, as for every view, the entire `<content>` container receives focus (and screen readers try to announce all its content in one go) before you reach the actual first control. To counteract this behaviour, this adds an explicit `tabindex="-1"` to these elements.

* Change `<content>` to `<main>`

More semantically accurate. See https://github.com/bitwarden/browser/pull/2245#issuecomment-1104553312

* Update scss to target `main` instead of `content`

* Change the previously existing `<main>` to generic `<div>`, tweak styles accordingly

Can't have two separate `<main>` elements, especially not nested ones. The original `<main>` was really just a handy wrapper for the component, but semantically should be neutral
2022-04-29 10:06:33 +10:00
..
generator.component.html [PS-497] Change `<content>` to `<main>`, make it explicitly non-focusable (#2245) 2022-04-29 10:06:33 +10:00
generator.component.ts update generator (#2484) 2022-03-31 19:03:45 -04:00
password-generator-history.component.html [PS-497] Change `<content>` to `<main>`, make it explicitly non-focusable (#2245) 2022-04-29 10:06:33 +10:00
password-generator-history.component.ts Add eslint (#2405) 2022-02-24 18:14:04 +01:00