E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Subramanian, Poornima (PCL)
Date: Tue, Sep 15 2020 9:58AM
Subject: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile
No previous message | Next message →

Hi All,

A SVG image button not functioning on iOS 13 mobile device with Voice Over. We tried couple of fixes like e.g. aria-hidden on SVG. It's strange the same button is working on Desktop with JAWS / NVDA, but only on iOS 13, it's not working.

Below is its markup, any suggestions for the fixes?

<button class="mfp-close icon-no-text" data-test-id="mfp-close" aria-label="Close">
<svg class="svg-icon svg-icon-open-close">
<use xlink:href="#icon-open-close"></use>
</svg></button>

.mfp-content .mfp-close.icon-no-text {
background: transparent;
height: 44px;
width: 44px;
opacity: 1;
position: absolute;
margin: 0;
top: 7px;
right: -10px;
text-indent: 0;
border-radius: initial;
padding: 0;
text-align: center;
}
.mfp-content .mfp-close.icon-no-text > svg {
color: #000;
background: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
pointer-events: none;
}

Thank you

Best,
Poornima
The information contained in this email and any attachment may be confidential and/or legally privileged and has been sent for the sole use of the intended recipient. If you are not an intended recipient, you are not authorized to review, use, disclose or copy any of its contents. If you have received this email in error please reply to the sender and destroy all copies of the message. Thank you.

To the extent that the matters contained in this email relate to services being provided by Princess Cruises and/or Holland America Line (together "HA Group") to Carnival Australia/P&O Cruises Australia, HA Group is providing these services under the terms of a Services Agreement between HA Group and Carnival Australia.

From: Birkir R. Gunnarsson
Date: Tue, Sep 15 2020 10:15AM
Subject: Re: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile
← Previous message | Next message →

Hi
What does Voiceover announce when you swipe to / touch this button?
You can add role="presentation" to the <svg> but given that it is a
button and that it already has its accessible name from aria-label
that should not be necessary.


On 9/15/20, Subramanian, Poornima (PCL) < = EMAIL ADDRESS REMOVED = > wrote:
> Hi All,
>
> A SVG image button not functioning on iOS 13 mobile device with Voice Over.
> We tried couple of fixes like e.g. aria-hidden on SVG. It's strange the same
> button is working on Desktop with JAWS / NVDA, but only on iOS 13, it's not
> working.
>
> Below is its markup, any suggestions for the fixes?
>
> <button class="mfp-close icon-no-text" data-test-id="mfp-close"
> aria-label="Close">
> <svg class="svg-icon svg-icon-open-close">
> <use xlink:href="#icon-open-close"></use>
> </svg></button>
>
> .mfp-content .mfp-close.icon-no-text {
> background: transparent;
> height: 44px;
> width: 44px;
> opacity: 1;
> position: absolute;
> margin: 0;
> top: 7px;
> right: -10px;
> text-indent: 0;
> border-radius: initial;
> padding: 0;
> text-align: center;
> }
> .mfp-content .mfp-close.icon-no-text > svg {
> color: #000;
> background: #fff;
> border-radius: 50%;
> width: 30px;
> height: 30px;
> pointer-events: none;
> }
>
> Thank you
>
> Best,
> Poornima
> The information contained in this email and any attachment may be
> confidential and/or legally privileged and has been sent for the sole use of
> the intended recipient. If you are not an intended recipient, you are not
> authorized to review, use, disclose or copy any of its contents. If you have
> received this email in error please reply to the sender and destroy all
> copies of the message. Thank you.
>
> To the extent that the matters contained in this email relate to services
> being provided by Princess Cruises and/or Holland America Line (together "HA
> Group") to Carnival Australia/P&O Cruises Australia, HA Group is providing
> these services under the terms of a Services Agreement between HA Group and
> Carnival Australia.
> > > > >


--
Work hard. Have fun. Make history.

From: Aditya
Date: Tue, Sep 15 2020 10:41AM
Subject: Re: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile
← Previous message | Next message →

Try adding role="img" and aria-label="close" on svg.




Sent from my iPhone

> On Sep 15, 2020, at 11:15 AM, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi
> What does Voiceover announce when you swipe to / touch this button?
> You can add role="presentation" to the <svg> but given that it is a
> button and that it already has its accessible name from aria-label
> that should not be necessary.
>
>
>> On 9/15/20, Subramanian, Poornima (PCL) < = EMAIL ADDRESS REMOVED = > wrote:
>> Hi All,
>>
>> A SVG image button not functioning on iOS 13 mobile device with Voice Over.
>> We tried couple of fixes like e.g. aria-hidden on SVG. It's strange the same
>> button is working on Desktop with JAWS / NVDA, but only on iOS 13, it's not
>> working.
>>
>> Below is its markup, any suggestions for the fixes?
>>
>> <button class="mfp-close icon-no-text" data-test-id="mfp-close"
>> aria-label="Close">
>> <svg class="svg-icon svg-icon-open-close">
>> <use xlink:href="#icon-open-close"></use>
>> </svg></button>
>>
>> .mfp-content .mfp-close.icon-no-text {
>> background: transparent;
>> height: 44px;
>> width: 44px;
>> opacity: 1;
>> position: absolute;
>> margin: 0;
>> top: 7px;
>> right: -10px;
>> text-indent: 0;
>> border-radius: initial;
>> padding: 0;
>> text-align: center;
>> }
>> .mfp-content .mfp-close.icon-no-text > svg {
>> color: #000;
>> background: #fff;
>> border-radius: 50%;
>> width: 30px;
>> height: 30px;
>> pointer-events: none;
>> }
>>
>> Thank you
>>
>> Best,
>> Poornima
>> The information contained in this email and any attachment may be
>> confidential and/or legally privileged and has been sent for the sole use of
>> the intended recipient. If you are not an intended recipient, you are not
>> authorized to review, use, disclose or copy any of its contents. If you have
>> received this email in error please reply to the sender and destroy all
>> copies of the message. Thank you.
>>
>> To the extent that the matters contained in this email relate to services
>> being provided by Princess Cruises and/or Holland America Line (together "HA
>> Group") to Carnival Australia/P&O Cruises Australia, HA Group is providing
>> these services under the terms of a Services Agreement between HA Group and
>> Carnival Australia.
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >

From: Subramanian, Poornima (PCL)
Date: Tue, Sep 15 2020 12:33PM
Subject: Re: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile
← Previous message | Next message →

Hi,

Voice Over announcing the aria-label which is 'Close' correctly, but on double tapping it's not closing the modal. Adding role="presentation" will still work?

Thank you

From: Jonathan Cohn
Date: Mon, Sep 21 2020 8:14AM
Subject: Re: Fix Suggestions please? SVG image button not accessible on iOS 13 mobile
← Previous message | No next message

Did you try with Chrome browser? I have found specific cases where e I thought that an element should be hidden but Chrome refused to do so.
Jonathan


> On Sep 15, 2020, at 11:58 AM, Subramanian, Poornima (PCL) < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi All,
>
> A SVG image button not functioning on iOS 13 mobile device with Voice Over. We tried couple of fixes like e.g. aria-hidden on SVG. It's strange the same button is working on Desktop with JAWS / NVDA, but only on iOS 13, it's not working.
>
> Below is its markup, any suggestions for the fixes?
>
> <button class="mfp-close icon-no-text" data-test-id="mfp-close" aria-label="Close">
> <svg class="svg-icon svg-icon-open-close">
> <use xlink:href="#icon-open-close"></use>
> </svg></button>
>
> .mfp-content .mfp-close.icon-no-text {
> background: transparent;
> height: 44px;
> width: 44px;
> opacity: 1;
> position: absolute;
> margin: 0;
> top: 7px;
> right: -10px;
> text-indent: 0;
> border-radius: initial;
> padding: 0;
> text-align: center;
> }
> .mfp-content .mfp-close.icon-no-text > svg {
> color: #000;
> background: #fff;
> border-radius: 50%;
> width: 30px;
> height: 30px;
> pointer-events: none;
> }
>
> Thank you
>
> Best,
> Poornima
> The information contained in this email and any attachment may be confidential and/or legally privileged and has been sent for the sole use of the intended recipient. If you are not an intended recipient, you are not authorized to review, use, disclose or copy any of its contents. If you have received this email in error please reply to the sender and destroy all copies of the message. Thank you.
>
> To the extent that the matters contained in this email relate to services being provided by Princess Cruises and/or Holland America Line (together "HA Group") to Carnival Australia/P&O Cruises Australia, HA Group is providing these services under the terms of a Services Agreement between HA Group and Carnival Australia.
> > > >