sts-sponsors team mailing list archive
-
sts-sponsors team
-
Mailing list archive
-
Message #07654
Re: [Merge] ~petermakowski/maas-site-manager:add-a11y-tests into maas-site-manager:main
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.
References