Role and semantics
Section titled “Role and semantics”The bar is a section region named “Unsaved changes”. The message is in role="status"; it is read when the bar opens. While closed the bar has inert, so invisible buttons stay out of the focus order.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | At the end of the page, to Discard, then Save. |
| Enter, Space | Runs the button. |
Focus does not move when the bar opens; users keep typing. If the bar closes after Save, move focus somewhere meaningful, such as the page heading.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| On open | “You have unsaved changes” |
| On save | “Saved” |
Contrast
Section titled “Contrast”Text has 4.5:1, the top border 3:1; the shadow is only for depth.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How SaveBar meets it | What product teams must do |
|---|---|---|
| 2.4.11 Focus not obscured | — | Do not let a fixed bar cover the focused field: leave room at the bottom, or use sticky. |
| 3.3.4 Error prevention | A browser prompt before leaving. | — |
| 4.1.3 Status messages | Opening and saving are announced. | — |