Adjust header and footer for text resizing [a11y]

[dhinrichs-scottlogic]

Feature Request

Description

Adjust header and footer so that the text can be resized to 200% without losing functionality.

• Assume that you're using the app full screen on 13" laptop at 1920x1080 resolution
• This ticket requires some research to familiarise yourself with the sufficient and advisory techniques for meeting this accessibility criterion.

Additional context

This is to fulfil WCAG 1.4.4 Resize Text. https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html
This means it should be possible to increase the font-size to 200% and no content should be cut off or hidden.

implementation details

some ideas for how this can be done:

• reduce overall header size (a height of 5rem might be enough?) and maybe give it a max-height to give more space to the main page, or, use media queries to reduce header height at a specific width breakpoint.
• give the Spy Logic logo a max-width or max-height
• reduce some of the gaps and padding
• allow the buttons to wrap their text?
• remove icons from buttons at a small breakpoint
• reduce footer height; this could be as little as 2rem.

Screenshots

How it looks currently at 200%

Roughly expected outcome at 100% (no zoom)

Roughly expected outcome at 200%

Acceptance criteria

GIVEN the user uses the app in the full screen browser on a 13" laptop
WHEN the user zooms to 200%
THEN all of the buttons and links of the header and footer are still visible.

[Kenny4297]

Hi @dhinrichs-scottlogic, I believe I can help with this issue. Would you mind assigning it to me?

[dhinrichs-scottlogic]

Hi @dhinrichs-scottlogic, I believe I can help with this issue. Would you mind assigning it to me?

Yes @Kenny4297 , go ahead, I've assigned this issue to you. Thank you so much for contributing!

[Kenny4297]

@dhinrichs-scottlogic I think I may be missing something here. When I edit any files when running the application, the changes are not shown at all. This goes for the css files as well. The two files in question are the 'MainHeader.tsx' and its CSS counterpart, 'MainHeader.css'.

I'm sure it's something stupid. Any assistance would be helpful!

[gsproston-scottlogic]

@dhinrichs-scottlogic I think I may be missing something here. When I edit any files when running the application, the changes are not shown at all. This goes for the css files as well. The two files in question are the 'MainHeader.tsx' and its CSS counterpart, 'MainHeader.css'.

I'm sure it's something stupid. Any assistance would be helpful!

Hi Kenny, hmm that's a tricky one 🤔
How are you running the application at the moment? Are you using the VS Code launch file or just through a terminal?
Are you able to see any changes if you completely restart the application?
One thing that's caught me out in the past is that the backend and frontend are run separately, so I'd make sure that the frontend is running. Backend can be running too but it shouldn't be required for this ticket.

[Kenny4297]

I am starting them up separately, the backend and then the frontend.

When you are working on it, do the changes occur immediately? How are you running it so that it works when you make changes?

[gsproston-scottlogic]

I am starting them up separately, the backend and then the frontend.

When you are working on it, do the changes occur immediately? How are you running it so that it works when you make changes?

Yes, changes are showing after I save them.
I'm personally running it through VS Code, but I've also just checked and it still works if the backend and frontend are started from a terminal.
Are you seeing any errors at all?

[Kenny4297]

I am starting them up separately, the backend and then the frontend.
When you are working on it, do the changes occur immediately? How are you running it so that it works when you make changes?

Yes, changes are showing after I save them. I'm personally running it through VS Code, but I've also just checked and it still works if the backend and frontend are started from a terminal. Are you seeing any errors at all?

Ahh I got it working. Here's what I did differently:

I ran only the frontend using 'npm run dev' instead of 'npm run start:ui'. I did not start the backend (since I am only working with css). Now this allows live changes to be shown. Thanks for the help!

[gsproston-scottlogic]

I am starting them up separately, the backend and then the frontend.
When you are working on it, do the changes occur immediately? How are you running it so that it works when you make changes?

Yes, changes are showing after I save them. I'm personally running it through VS Code, but I've also just checked and it still works if the backend and frontend are started from a terminal. Are you seeing any errors at all?

Ahh I got it working. Here's what I did differently:

I ran only the frontend using 'npm run dev' instead of 'npm run start:ui'. I did not start the backend (since I am only working with css). Now this allows live changes to be shown. Thanks for the help!

Great to hear!

[chriswilty]

@dhinrichs-scottlogic We are likely to run into problems with the header when zooming, as there are a lot of components in there. At some level we might want to move the function buttons (reset, getting started, handbook) into a dropdown menu, remove the button icons, etc, using media queries as @Kenny4297 suggests.

I think this requires some more thought before implementing anything.

[chriswilty]

I had a quick go locally to see what css rules we'd need to change. Below is what I changed, which are prime candidates for a media query breakpoint. Note that I've only downsized two fonts and then not by much; most changes are adjustments to spacing, while not making things too compacted.

.themed-button > img {
  display: none;
}

.main-header {
  height: 3.5rem;
  padding: 0 0.5rem;
  gap: 0.5rem;
}
.main-header .main-header-middle {
  gap: 0.5rem;
}
.main-header .main-header-middle .main-header-level {
  font-size: 1.5rem;
}
.main-header .themed-button.level-button {
  height: 2.5rem;
  padding: 0.5rem;
}
.main-header .main-header-right {
  gap: 0.5rem;
}

button.level-mission-info-banner {
  padding: 0 0.5rem;
  border-width: 0.5rem 0.25rem;
}
span.level-title-area {
  font-size: 1.25rem;
  white-space: nowrap;
  min-width: unset;
}

.chat-box .chat-box-feed {
  justify-content: stretch;
  /* REMOVE height: fit-content */
}
.chat-box .footer {
  padding: 1rem;
  gap: 0.5rem;
  /* REMOVE font-size: 0.75rem */
}
.chat-box .footer .control-buttons {
  gap: 0.5rem;
}
.chat-box .footer .messages textarea {
  padding: 0.5rem;
}

.main-footer {
  height: 2rem;
}
.main-footer a svg {
  height: 1.75rem;
}
.main-footer a svg,
.main-footer .links,
.main-footer .links a:not(:last-child)::after {
  padding: 0 0.5rem;
}

Result:

[kclark-scottlogic]

Screenshot from edge, Also tested on other brows and all look fine