DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Acciones de tabla

Cómo mostramos información

Otorga más información sobre la tabla para hacerla más accesible y permite realizar acciones en lote.

Acerca de esta tabla

En la primera columna es posible seleccionar uno o más items pendientes. Puedes seleccionar todos los items pendientes con la casilla de verificación "Seleccionar todo".

La segunda columna contiene enlaces de acceso a los items.

Las cabeceras de columna tienen opción de ordenación.

Puedes realizar acciones sobre los items mediante los botones situados antes de la tabla.

Selección múltiple y Acciones sobre la tabla de items

Mostrar código del ejemplo: includes/_pattern.acciones-de-tabla.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-tabla.njk

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{% from "components/details/_macro.details.njk" import componentDetails %}
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}

{# Instrucciones de funcionamiento de la tabla #}
{% call componentDetails({
  "summary": {
    "html": "Acerca de esta tabla"
  },
  "classes": "mb-xs text-sm"
})  %}
    <div id="descTable1" class="grid gap-sm">
      <p>En la primera columna es posible seleccionar uno o más items pendientes. Puedes seleccionar todos los items pendientes con la casilla de verificación "Seleccionar todo".</p>
      <p>La segunda columna contiene enlaces de acceso a los items.</p>
      <p>Las cabeceras de columna tienen opción de ordenación.</p>
      <p>Puedes realizar acciones sobre los items mediante los botones situados antes de la tabla.</p>
    </div>
{% endcall %}
{# Barra de Acciones #}
<section class="flex flex-col lg:flex-row lg:flex-wrap lg:w-full" aria-labelledby="acciones-items">
  <h3 id="acciones-items" class="sr-only">Selección múltiple y Acciones sobre la tabla de items</h3>
  <div class="lg:flex sm:flex-1">
    <form action="#">
      {{ componentCheckboxes({
        "idPrefix": "todos-items",
        "name": "todos-items",
        "classes": "c-checkboxes--sm mt-sm -mb-xl ml-base",
        "items": [
          {
            "value": "todas",
            "text": "Seleccionar todo",
            "classes": "-mt-base",
            "label": {
              "classes": "text-sm -mt-1"
            }
          }
        ]
      })  }}
    </form>
  </div>
  <div class="flex lg:items-start lg:ml-auto lg:pl-base order-first lg:order-last">
    {{ componentMenubar({
      "id": "actions-table-menubar",
      "idPrefix": "actions-table",
      "ariaLabel":"Acciones sobre los items seleccionados de la tabla",
      "items": [
        {
          "text": "Importar items",
          "ariaLabel": "Importar items",
          "id": "actions-table-item-1",
          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
          "href": "#"
        },
        {
          "text": "Aceptar",
          "ariaLabel": "Aceptar",
          "id": "actions-table-item-2",
          "classes": "c-menubar__button--sm mb-sm mr-sm",
          "href": "#"
        },
        {
          "text": "Reenviar",
          "ariaLabel": "Reenviar items seleccionados",
          "id": "actions-table-item-3",
          "classes": "c-menubar__button--sm mb-sm mr-sm",
          "sub": {
            "items": [
              {
                "role": "menuitem",
                "text": "A una bandeja personal"
              },
              {
                "role": "menuitem",
                "text": "A un organismo"
              }
            ],
            "attributes": {
              "aria-labelledby": "actions-table-item-3"
            }
          }
        }
      ]
    })  }}
  </div>
</section>
{# fin Barra de Acciones #}

Cuándo lo utilizamos

Qué componentes utilizamos

Accesibilidad

  • El objetivo de la descripción de la tabla es ayudar a todas las personas a comprender su estructura y su funcionamiento. La descripción es especialmente útil para las personas que no pueden ver la tabla y acceden con un lector de pantalla. Para redactar de forma adecuada la descripción ten en cuenta que:
    • Si la tabla no tiene un título incluido con la etiqueta <caption>, debes comenzar la descripción identificando la tabla (por ejemplo, indica que es el listado de trámites realizados).
    • No debes hacer referencia a cuántas filas y columnas tiene la tabla, ya que el lector de pantalla anuncia por defecto esta información.
    • La descripción no resume los datos, sino que ofrece información relevante sobre su estructura y funcionamiento, similar a la información que perciben las personas que pueden ver la tabla. De este modo, las personas usuarias de lector de pantalla pueden hacerse una imagen mental de la tabla e interactuar con ella de manera más rápida y eficiente.
  • Las acciones deben estar dentro de un elemento <section> y tener un encabezado con .sr-only que las describa.