Fix dark-mode table headers and phone-width overflow in the reference guide's CSS

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,891 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@yashdotdev13 ya está trabajando en esto.

Desde el 14/11/2026.

  • #1903 de @yashdotdev13 — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css
Área
documentation, frontend

Línea de trabajo

Ambas correcciones van en css/wicket.css: añade una regla de modo oscuro para table thead, table tfoot y tbody tr th que sobrescriba el fondo #f7f8f7 de asciidoctor.css, y cambia el margen negativo de #toc.toc2 en el bloque max-width: 767px para que coincida con el padding de su contenedor. Compila con mvn -pl wicket-user-guide -Pguide generate-resources y luego revisa target/generated-docs/single.html a 375 px con prefers-color-scheme: dark. Está terminado cuando el texto del encabezado alcance un contraste de 4,5:1 y la página deje de desplazarse horizontalmente.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Two problems in the restyled reference guide (#1845), both in css/wicket.css, found while checking the accessibility chapter (#1847) in the new design.

Table header rows are unreadable in dark mode

asciidoctor.css gives table thead, table tfoot and tbody tr th the background #f7f8f7. In dark mode the header cells get the light text colour of the dark theme but keep this background, so the header row is light grey text, rgb(164, 184, 176), on an almost white background: a contrast of about 2:1, where WCAG 2.2 success criterion 1.4.3 asks for 4.5:1.

On master it shows on the one table with a header row, in "Working with AJAX" (chapter 19); #1847 adds a second one, the WCAG criteria table in "Accessibility". A dark-mode rule for table thead, table tfoot and tbody tr th that uses the page's own surface colour would fix both.

The page scrolls sideways at phone width

Below 768px, #toc.toc2 gets margin: 0 -36px (wicket.css, the max-width: 767px block). The table of contents then reaches from -18px to 393px on a 375px wide viewport, and the whole page scrolls 18px sideways (success criterion 1.4.10 asks for no scrolling in two directions at 320 CSS pixels). A negative margin that matches the padding of its container would keep the full-bleed look without the overflow.

Both were seen in target/generated-docs/single.html built with mvn -pl wicket-user-guide -Pguide generate-resources on master at 745ae018ec, in a 375 × 667 viewport and with prefers-color-scheme: dark.

Lenguaje dominante
Java
Estrellas
800
Forks
423
Merge medio
1 d 1 h
PR fusionados (30 d)
170

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de apache/wicket

Todos los issues de apache/wicket

Issues similares

Más issues de Java

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.