sts-sponsors team mailing list archive

[Peter Makowski <mp+441890@xxxxxxxxxxxxxxxxxx>]

Diff comments:

> diff --git a/frontend/src/components/TokensList/components/TokensTable/TokensTable.tsx b/frontend/src/components/TokensList/components/TokensTable/TokensTable.tsx
> index a4c2b15..a6a4354 100644
> --- a/frontend/src/components/TokensList/components/TokensTable/TokensTable.tsx
> +++ b/frontend/src/components/TokensList/components/TokensTable/TokensTable.tsx
> @@ -46,15 +45,20 @@ const TokensTable = ({
>        {
>          id: "select",
>          header: ({ table }) => <SelectAllCheckbox table={table} />,
> -        cell: ({ row }) => (
> -          <div>
> -            <Input
> -              checked={row.getIsSelected()}
> -              disabled={!row.getCanSelect()}
> -              onChange={row.getToggleSelectedHandler()}
> +        cell: ({ row, getValue }) => (
> +          <label className="p-checkbox--inline">
> +            <input

It does. This is because @canonical/react-components do not give full control over the component structure. Select input fields are a special case as no visible label is shown (as the label is in the next "name" column).

> +              aria-label={`select ${getValue()}`}
> +              className="p-checkbox__input"
>                type="checkbox"
> +              {...{
> +                checked: row.getIsSelected(),
> +                disabled: !row.getCanSelect(),
> +                onChange: row.getToggleSelectedHandler(),
> +              }}
>              />
> -          </div>
> +            <span className="p-checkbox__label" />
> +          </label>
>          ),
>        },
>        {


-- 
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/441890
Your team MAAS Committers is subscribed to branch ~petermakowski/maas-site-manager:add-a11y-tests.