Tabs styling doesn't work with without javascript enabled

[ray-marr-ho]

Description of the issue

When using the govuk-frontend styling without javascript enabled then the Tabs styling does not get applied.

This is because components/tabs/_index.scss has most of the styling inside of the class .govuk-frontend-supported which is only applied when the javascript is enabled.

Seems like a bug because all the other components/styles I've used so far work without issue. I can get the tabs to work for me by adding this class manually .govuk-frontend-supported but since I am not actually using the javascript (for which this className is used for) this is a bit of a hacky workaround.

Steps to reproduce the issue

1. Create an app with styling imported:
   @import "govuk-frontend/dist/govuk/all";

2. Do not add/enable javascript code.

3. Try to render the Tabs (see any example HTML here https://design-system.service.gov.uk/components/tabs/)

Actual vs expected behaviour

Actual: Links appear without Tab styling, no grey boxes, no borders

Expected: Tabs appear with styling as in the demos here https://design-system.service.gov.uk/components/tabs/

Environment (where applicable)

• Operating system: Mac
• Browser: Chrome
• Browser version: latest
• GOV.UK Frontend Version: 5.6.0

[querkmachine]

Hi @ray-marr-ho,

I don't think we would consider this a bug. Tab styling isn't applied without JavaScript because our tab component doesn't work and isn't accessible without JavaScript.

If you're using the tabs for a not-quite-tabby use, like for navigational purposes, this isn't a use case we officially support. You would need to make your own component with the tab styles in that case.

I wouldn't really encourage doing that, though. Components that look the same but behave differently in different places messes with user's mental models and can make services more difficult for users of assistive technology to use. Depending on the use case, it may be in conflict with WCAG's consistent identification or consistent navigation criteria.

If you're intending to use the design it as a navigation element for within a section, you may want to look at X-GOV's secondary navigation component, which was made for this purpose.

[ray-marr-ho]

@querkmachine Makes sense, thanks for the detailed response!