Is it possible to prevent accessibility indicator when pressing with mouse

[Robert_van_Gilst]

Hi,

Is it possible to hide the border around object when interacting with a mouse.

For example the following calcite-tab-nav:

        <calcite-tab-nav slot="title-group" class="tab-headers">
            <calcite-tab-title [selected]="tab === 'info'">
                Info
            </calcite-tab-title>
            <calcite-tab-title [selected]="tab === 'relations'">Relationer</calcite-tab-title>
            <calcite-tab-title [selected]="tab === 'graf'">Graf</calcite-tab-title>
            <calcite-tab-title [selected]="tab === 'json'">Json</calcite-tab-title>
        </calcite-tab-nav>

Which looks like this:

But when pressing on of the tabs it looks like this:

Is there a setting that hides this border from showing on all elements.

I understand that it is an accessibility option, but I would only like to see it when using the keyboard.

[KittyHurley]

Hi @Robert_van_Gilst - great question.

Calcite aims to support accessibility features, and with the upcoming Web Content Accessibility Guidelines 2.2, Success Criterion 2.4.7: Focus Visible will be migrating from Level AA to Level A to provide more context and support to users with low vision and a wider range of cognitive abilities when interacting via keyboard or mouse.

However, there is a plan to towards exposing a global and component focus state color, which would support more modification in the near future via #6458.

[Robert_van_Gilst]

Hi @KittyHurley ,

Thank you for you answer, when I look at #6458 it states that I should be able to set outline to 0 to disable the outline. But I cannot figure out where to set it...

Can you point me in the right direction? 🙂

[KittyHurley]

@Robert_van_Gilst There currently isn't enough support for folks to change focus across the components, so there isn't a workaround prior to work on issue #6458.

We haven't yet assigned the issue to a future milestone, but any "thumbs ups" on the initial issue, or comments can help bump the issue's prioritization.

As far as focus outline, we don't recommend or support setting the focus outline to "0" or "none" due to accessibility implications resulting in total keyboard inaccessibility, so would be up to the developer to determine the feasibility and implementation.

[Lerman]

@KittyHurley  Hello, is there a solution now, please?

[KittyHurley]

@Lerman Not at this time, the enhancement mentioned above is in the Calcite design backlog. You can upvote the GitHub issue or add a comment with a use case to help Calcite prioritize the issue.